How To Efficiently Encode Images In WordPress (And Why Image CDNs Are Better Than Bloated Optimization Plugins)

Efficiently encode images wordpress

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.

Efficiently encode images in wordpress 1

 

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).

Bunny optimizer

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

I use Rocket.net’s Cloudflare Enterprise which includes Mirage and Polish, then FlyingPress for my cache plugin which has more image optimizations (and other features) than similar plugins.

WP Rocket + RocketCDN SG Optimizer + SG CDN FlyingPress + FlyingCDN LiteSpeed Cache + QUIC Cloudflare Mirage + Polish
Compression x
WebP x
Specify dimensions x x
Lazy load backgrounds Inline x lazy-bg class x
Preload viewport images x x x
Mobile resizing x x x
Local YouTube placeholders x x x x
CDN StackPath SiteGround BunnyCDN QUIC.cloud Cloudflare
CDN PoPs 60 14 112 77 270
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.

Shortpixel image compression type
Set compression level to 85% or “lossy” is recommended in most cases

 

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.

Copy image address
If you “copy image address” and paste the URL in a new tab, both images should be the same size

 

4. Use WebP Images

Image optimization plugins/CDNs don’t always serve images in WebP (likely because the savings aren’t enough). The tip below ensures your most important images are using WebP.

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.

Webp image
WebP can help get images down to just 9KB

 

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.

Shortpixel remove exif data

 

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:

Perfmatters lazy load css background images

Elementor lazy bg css class
FlyingPress has a lazy-bg helper class to lazy load background images

 

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:

Add explicit image width height manually wordpress

 

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).

Bunnycdn source code

Perfmatters cdn url rewrite

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/uploads/2021/01/Tom-Dupuis-Widget.png

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.

Flyingpress responsive images 1

 

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).

First, try increasing browser cache TTL in Cloudflare, LiteSpeed Cache, or W3 Total Cache if you’re using any of those. Next, check your hosting account for a setting to increase cache lifespan (the screenshot below is for Cloudways). If none of these work, edit your .htaccess file where you should see “expires headers” or try contacting your host. Delaying JavaScript can also get rid of these errors if your images (or other files) are being served from third-party code.

Cloudways static cache expiry

 

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.

Flyingpress iframe settings

 

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.

Enable network based optimizations on slow connections optimole

 

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.

Speedvitals omm

Cheers,
Tom

You Might Also Like:

Leave a Comment