Efficiently encoding images means reducing image size. This is usually done with compression, WebP, mobile resizing, lazy loading backgrounds, a (good) image CDN, and other optimizations.
There are 3 main ways to optimize images:
- Software (Photoshop, GIMP, etc)
- Image optimization plugins (Optimole, TinyPNG, Imagify)
- CDNs (i.e. Cloudflare Mirage/Polish, Bunny Optimizer, Flying Images)
The problem with software is it doesn’t control things on your site like mobile resizing, lazy loading, or image CDNs. You can do a lot in Photoshop, but will still need something for those.
The problem with image optimization plugins is they add bloat (i.e. image backups and variations). They can also increase memory usage since they use your server to do the work.
That’s why I recommend image CDNs. Unlike plugins, they optimize images on the fly without having to create backups or rely on your server to optimize images. The result is less bloat and stress on your server. Many image CDNs also resize images for mobile while most plugins don’t.
- Choose an image CDN + cache plugin
- Compress images to 85%
- Properly size images
- Use WebP images
- Remove EXIF data
- Lazy load background images
- Specify image dimensions
- Serve images from a CDN
- Resize images for mobile
- Set cache expirations to 1 year
- Host YouTube placeholders locally
- Serve lower quality images on slow connections
1. Choose An Image CDN + Cache Plugin
Image CDNs don’t add bloat, they don’t use server resources to optimize images, and they usually have more features than software/plugins. The downside is, they usually cost money. Bunny Optimizer is solid (this is used on FlyingCDN). Cloudflare Pro’s Mirage + Polish are also included with third-party Cloudflare Enterprise services (Rocket.net, Cloudways, FlyingProxy).
Cache plugins have image optimizations too. FlyingPress preloads viewport images by setting the number of images that usually load in the viewport (usually 2 or 3) which also excludes them from lazy load. It’s the only plugin I know that hosts YouTube placeholders locally and includes a lazy-bg helper class to lazy load background images. LiteSpeed Cache is good, but WP Rocket and SiteGround Optimizer (along with their CDNs) do a poor job optimizing images. Neither preloads viewport images, resizes images for mobile, and both of their CDNs are a joke.
What I Use
|WP Rocket + RocketCDN||SG Optimizer + SG CDN||FlyingPress + FlyingCDN||LiteSpeed Cache + QUIC||Cloudflare Mirage + Polish|
|Lazy load backgrounds||Inline||x||lazy-bg class||x||✓|
|Preload viewport images||x||x||✓||x||✓|
|Local YouTube placeholders||x||x||✓||x||x|
|Price||$59/yr + $7.99/mo||$7.49/mo||$60/yr + $.03/GB||$.01 – .04/GB||$20/mo|
2. Compress Images To 85%
Lighthouse tests images at 85%, so that’s the compression level I’d use.
If you’re using an image optimization plugin, compressing images and resizing them (before uploading to WordPress) reduces the amount of resources image optimization plugins put on your server. Especially if you’re on shared hosting, get in the habit of doing these beforehand.
3. Properly Size Images
Resizing images to correct dimensions should also be done before uploading them.
Since my blog is 765% pixels wide, that’s what I resize most images to. Then there’s my logo, sidebar image, and sometimes you have featured images or WooCommerce product images.
I recommend creating a “cheat sheet” of your different image dimensions. Otherwise, you may see an error to properly size images in PageSpeed Insights. But since most images are probably lazy loaded, you may not see this error. Instead, the lazy loading of images will just take longer.
4. Use WebP Images
Convert all your viewport images (those loading above the fold) to WebP using a free tool like CloudConvert. I was able to get this image (shown on my homepage) down to just 30KBs with the help of WebP. My sidebar image shown in the upper right of this post, is only around 9KBs. Since viewport images are seen first, these are the most important images you want optimized.
For other images, use your image CDN or plugin to convert them to WebP. The Converter For Media plugin is also a good option if you don’t already have a WebP solution. Some image CDNs/plugins may have additional WebP settings in which case, refer to their documentation.
5. Remove EXIF Data
Unless you’re a photographer, you can usually strip this unnecessary data like time/date the photo was taken. This can reduce file size and most image optimization services have a setting.
6. Lazy Load Background Images
Since background images are loaded from CSS, page builders don’t lazy load them. The “preload critical images” setting in FlyingPress and Perfmatters won’t work on them either.
There are a few ways to solve this:
- Use the lazy-bg helper class in FlyingPress.
- Enable CSS background images in Perfmatters.
- Move background images to inline HTML in WP Rocket.
- Add background image CSS selectors to Optimole.
- Add your own lazy-bg helper class with code.
7. Specify Image Dimensions
If PageSpeed tells you to add an explicit width/height to images, enable “add missing image dimensions” which most cache plugins have a setting for. If you still get errors, you probably added an image using custom code and need to add the width + height to the image’s HTML:
8. Serve Images From A CDN
Image CDNs knock out several birds with 1 stone.
Not only are you offloading work from your server to the CDN, but you’re taking advantage of the CDN network (reducing geographical distances) along with image optimization features like compression, WebP, mobile resizing, and even serving low quality images on slow connections.
Here are 3 steps I recommend:
1. Use a good image CDN with a large network – Cloudflare Pro (with Mirage, Polish, image resizing), Bunny Optimizer (along with FlyingPress’ FlyingCDN) are both solid. QUIC.cloud’s paid/standard plan is good if you’re on LiteSpeed which has a large network and uses image placeholders. Most paid CDNs have more PoPs and a lot more features compared to free CDNs.
2. Make sure images (and other files) are being served from the CDN – if your CDN uses a CDN URL, check your source code to make sure images (and other files like CSS, JS, fonts) are served from it. If they’re not, you may need to check your CDN settings. I remember talking with BunnyCDN’s support who said it’s a good idea to not only setup the BunnyCDN plugin, but also add the CDN URL to your cache plugin (or try the CDN rewrite which in the Perfmatters settings).
Old Image URL (Without CDN Rewrite): https://onlinemediamasters.com/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png
New Image URL (With CDN Rewrite): https://onlinemediamasters.b-cdn.net/wp-content/
3. Check the CDN settings for other image optimizations – activating the CDN isn’t enough. Go through the settings and check which features it has, or find a good tutorial on configuring it.
9. Resize Images For Mobile
Most people use properly sized images for desktop but forget about mobile, meaning images won’t be resized properly which can lead to a worse mobile LCP score. You can use Cloudflare’s image resizing, BunnyCDN’s smart image optimization, or FlyingPress’ responsive images when using FlyingCDN. You can alternatively use adaptive images such as ShortPixel Adaptive Images.
10. Set Cache Expirations To 1 Year
PageSpeed Insights flags images if the cache lifespan is over 365 days (it will tell you to serve static assets with an efficient cache policy).
11. Host YouTube Placeholders Locally
When embedding YouTube videos, you may see external requests to i.ytimg.com which is from the placeholder image. FlyingPress is the only plugin I know that hosts these locally which (in addition to the other settings) eliminates all external requests to both YouTube and i.ytimg.com.
12. Serve Lower Quality Images On Slow Connections
Images take a long time to load on slow connections. Many services let you downgrade the quality when this happens. Cloudflare Mirage, Bunny Optimizer, Optimole (in the screenshot below), and other services may have a setting to serve low quality images on slow connections.
Retest Your Images
Efficiently encode images should be 100%. PageSpeed Insights can take 28 days to update, so you may want to try clearing your cache and retesting your website in SpeedVitals or GTmetrix.