How To Optimize Images In WordPress (Above The Fold Images, Backgrounds, Mobile Resizing, WebP, Plugins vs. CDNs)

Optimize images wordpress

Image optimization doesn’t end in Photoshop.

Above the fold images should be preloaded and excluded from lazy load (improving LCP).

Background images aren’t lazy loaded by default since page builders load them from CSS. Instead, you’ll have to add a lazy-bg helper class to them which is found in a number of plugins.

Image CDNs optimize them “on the fly” while plugins add bloat and can increase memory usage. Some CDNs also do a much better job than others (including resizing them for mobile).

So even if you were to resize/compress images before uploading them to WordPress, it only addresses 2/7 image recommendations found in PageSpeed Insights. There’s a lot more to it! This tutorial also compares popular image optimization services like Cloudflare Mirage/Polish, BunnyCDN’s Bunny Optimizer, QUIC.cloud, ShortPixel + Adaptive Images, Optimole, and others.

Image optimization pagespeed insights

 

1. Choose An Image Optimization Service

Cache plugins, image optimization plugins, and image CDNs all do different things. Using a good “setup” is extremely important to make sure it includes all possible image optimizations.

Cache plugin – I recommend FlyingPress because it’s easy to preload above the fold images while excluding them from lazy load, it includes a lazy-bg helper class to lazy load background images, and hosts YouTube placeholders locally. Like most cache plugins, it also adds missing image dimensions. They offer FlyingCDN which uses BunnyCDN and has a large network, fast Tbps, and performs well on cdnperf.com. FlyingCDN includes Bunny Optimizer, an image CDN that takes care of compression, WebP, and mobile resizing. WP Rocket makes you jump through hoops and SiteGround Optimizer (along with SiteGround CDN) lack several key features as well.

Image CDNs – generally better than image optimization plugins because:

  • Less plugins
  • No backup bloat
  • Images are resized for mobile
  • They don’t increase memory usage

Avoid WP Rocket’s RocketCDN (which uses StackPath) and SiteGround’s CDN. Both have very small networks, they don’t resize images for mobile, and they’re what I’ll just call “bare bones.” If you’re using BunnyCDN, make sure you setup the BunnyCDN plugin and add your CDN URL to your cache plugin or CDN rewrite in Perfmatters. This can help serve more files from BunnyCDN.

Bunny optimizer
Bunny Optimizer does a better job optimizing images than RocketCDN, SiteGround CDN, others

Cloudflare Enterprise – available on Rocket.net (what I use), Cloudways, and FlyingProxy. It includes Mirage/Polish and Enterprise features which are a powerhouse for optimizing images and TTFB. Cloudways’ Cloudflare Enterprise doesn’t have full page caching and FlyingProxy lacks Argo Smart Routing. I use Rocket.net because their Cloudflare Enterprise is more robust and they have very fast servers (feel free to test my global TTFB in KeyCDN). Since their hosting includes Cloudflare Enterprise, you’re knocking 2 birds with 1 stone between a good host/CDN.

Image Optimization Plugins – add bloat and should only be used if you’re not using something like Cloudflare Mirage/Polish, Bunny Optimizer, or QUIC.cloud’s CDN. An exception is ShortPixel Adaptive Images which supports mobile resizing since image optimization plugins don’t do this.

What I Recommend:

  • FlyingPress + FlyingCDN
  • FlyingPress + Cloudflare Pro (which has Mirage, Polish, APO)
  • FlyingPress + Cloudflare Enterprise on Rocket.net (what I use)
  • LiteSpeed Cache + QUIC, but still lacks image optimization features
  • For WP Rocket, look into Bunny Optimizer or Cloudflare Pro + Optimole or Perfmatters
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 above the fold images while excluding from lazy load x x x
Mobile resizing x x x
Local YouTube placeholders x x x x
CDN StackPath SiteGround BunnyCDN QUIC.cloud Cloudflare
CDN PoPs 73 176 112 81 285
Price $59/yr + $7.99/mo $7.49/mo $60/yr + $.03/GB $.02 – .08/GB $20/mo

 

2. Resize Images To Correct Dimensions

Create an “image dimensions cheat sheet” which looks something like this:

  • Logo: 242 x 107
  • Favicon: 16 x 16
  • Sidebar images: 414(w)
  • Carousel images: 115(h)
  • Slider images: 1000 x 500
  • Featured images: 250 x 250
  • Background images: 1920 x 1080
  • Fullwidth blog post images: 765(w)
  • Twitter OG image 1024 x 512
  • Facebook OG image: 1200 x 630

To make this easier, try making them a similar ratio so resizing the image is less work. For example, I made my top post image (this one) roughly the same ratio as Facebook’s OG image. That way, all I have to do is resize it and it looks perfect for Facebook – without having to edit it.

Canva resize images
Using Canva to resize images depending on where they’re used

Tips For Taking Screenshots
The Zoom Chrome Extension lets you take screenshots at precise zoom levels. Since my fullwidth blog images are 765px wide, I use Zoom (and my computer’s zoom levels) to capture 765px screenshots every time (or close to it). I use GIMP to crop edges if needed. I’m left with a high quality screenshot that fits my blog perfectly. I use Awesome Screenshot for the capturing.

 

3. Resize Images For Mobile

Since image optimization plugins don’t resize images for mobile, use an image CDN that supports it (like Cloudflare’s image resizing or Bunny Optimizer). Or use ShortPixel Adaptive Images. A lot of people complain about poor LCP on mobile – mobile image resizing can help.

Flyingpress responsive images 1

 

4. Compress Them at 85%

Lighthouse tests images at 85%, so that’s the ideal compression level.

Especially if you’re using an image optimization, you should resize/compress images before uploading them. Otherwise, the plugin has to do a lot of work which puts stress on your server.

How lighthouse flags images 85 percent

 

5. Serve Them In WebP Or Convert Them Manually

WebP images can be less than half the size of PNGs.

Just by converting the image at the top of this post, it went from about 38kBs to 10kBs. But while WebP images are totally worth it, image CDNs don’t always serve them in WebP if the “savings” aren’t high enough. That said, here are some things I’ve learned when using WebP.

Test WebP Images – open your website in Chrome Dev Tools and go to the Network tab. Use Ctrl + R (Windows) or ⌘ + R (Mac). You will see all images loaded on the page and their “type.”

Test webp images chrome dev tools
Check whether images are served in WebP using the Chrome Dev Tools Network tab

Consider Converting Above The Fold Images Manually – even though Cloudflare thinks the savings aren’t high enough, my savings are often 70%+. Since the most important images to optimize are those loading above the fold, I spent a couple hours manually converting most of them using a free WebP converter, then uploaded them manually. So whether Cloudflare thinks the savings are high enough or not, they’re served in WebP regardless. Yeah – it’s pretty tedious.

.htaccess vs. <picture> tag – most image optimization plugins let you choose from these (.htaccess is recommended). Some can even serve AVIF which are arguably better than WebP. Since AVIF isn’t fully supported yet, plugins should only serve AVIF if the browser supports it. If your plugins and CDN don’t support WebP, try WebP Converter For Media or WebP Express.

 

6. Preload Above The Fold Images

While above the fold images should be preloaded, they’re usually different on each page. And when PageSpeed tells you to preload your LCP element, it’s probably the image that’s different.

Above the fold images
Above the fold images should be preloaded and excluded from lazy load

You can preload every above the fold image manually (like you would in WP Rocket), or use the preload critical images setting in FlyingPress or Perfmatters. Just set the number of images that typically load above the fold (i.e. 2-3) and they will be excluded from lazy loaded and preloaded.

Preload critical images perfmatters

 

7. Exclude Above The Fold Images From Lazy Load

Just like above the fold images should be preloaded, they should also be excluded from lazy load. Otherwise, it creates delay since lazy loading images that are seen first is counterintuitive.

Again, the easiest way is to preload critical images setting in Perfmatters or FlyingPress. WP Rocket can exclude a specific number of images from lazy load, but it’s an 8-step process which involves installing a helper plugin, editing the number in a text editor, and uploading the plugin.

While you can manually exclude sitewide images like your logo/sidebar images, manually excluding your (unique) LCP images can be tedious, and setting a number is more effective.

Exclude above the fold images from lazy load optimole

 

8. Lazy Load Background Images (Or Exclude Them)

The easiest way to do this is CSS background images in Perfmatters.

Some cache and image optimization plugins also have helper classes to lazy load background images (lazy-bg) or exclude them from lazy load (skip-lazy). You can check the documentation.

FlyingPress has lazy-bg, Elementor has lazyload, SG Optimizer has skip-lazy, and Optimole does this with CSS selectors, or by adding the no-lazy image class in the plugin settings, then adding it to your images. There are even plugins specifically to lazy load Divi background images. And if neither your plugins or page builder support the classes, you can try adding your own CSS class.

In WP Rocket, you’ll need to add class names to the exclude list.

Divi lazy load background images
Some plugins have helper classes to lazy load background images (or exclude them)

 

9. Specify Dimensions

Most cache plugins (and Perfmatters) add missing image dimensions. If you still see explicit width + height errors in PageSpeed, edit the image’s HTML and add the dimensions manually. Images without specified dimensions cause layout shifts (same with ads and dynamic content).

Add width and height image attributes

<img src="example.png" width="680" height="680" />

 

10. Set Cache Expiration To 1 Year

Since images don’t change often, Google suggests setting browser TTL to 1 year (31536000s).

You can do this in Cloudflare, but if PageSpeed still tells you to serve static assets with an efficient cache policy, you probably need to login to your hosting account, find some kind of “cache expiration” setting, then increase it to 1 year. If you don’t see a setting, ask your host.

Nginx static cache expiry
Check your hosting account for a “cache expiration” setting (or similar) and set it 1 year

 

11. Disable Hotlinking

Disabling hotlink stops people from copying your images and pasting them on their website. While this sounds harmless, that image is still hosted on your server which is doing the work.

Even if you don’t care if people use your images, you should at least make them download it and upload to their own website. It could save your server resources and potentially, money.

You can do this in Cloudflare, or most hosting dashboards have a setting.

Cloudflare hotlink protection

 

12. Use Local YouTube Thumbnails

When embedding videos, you may see external requests to i.ytimg.com in your PageSpeed report. FlyingPress is the only plugin I know that can host YouTube placeholder images locally.

Flyingpress self host youtube placeholder
FlyingPress is the only plugin I know that does this

 

13. Use Local Avatars

If you have lots of blog comments, they create external requests to gravatar.com. Try using a local avatar plugin or delay your comments section. On a side note, native comments (CSS) is more lightweight than third-party comment plugins. LiteSpeed Cache can also cache Gravatars.

Simple local avatars plugin

.

14. Remove EXIF Data

While it only helps a little, EXIF data (like time a photo was taken) can be removed.

Shortpixel remove exif data

 

15. Lower The Quality On Slow Connections

When visitors are on a slow connection, the quality of your images will be reduced. Several plugins and CDNs do this, like Optimole and Cloudflare Mirage. But, it won’t improve scores.

Enable network based optimizations on slow connections optimole

 

Speedvitals omm

 

Frequently Asked Questions

How do I optimize images for WordPress?

Good image optimization involves a blend of image CDNs (or image optimization plugins) with some features done by your cache plugin. Between the 3, be sure to address image compression, next-gen formats, mobile resizing, backgrounds, and above the fold images.

How to compress images in WordPress?

While image compression can be done with plugins, image CDNs are preferred because they don't add bloat or increase memory usage. Instead, they optimize images on the fly. Since Lighthouse tests images at 85%, that's the recommended compression level to use.

What’s the best free image optimization plugin?

Optimole and ShortPixel are two top-rated image optimization plugins and tend to have more features than Imagify and similar plugins, such as lazy loading background images.

Which CDN should I use to optimize images?

Cloudflare with Mirage + Polish and BunnyCDN's Bunny Optimizer do an excellent job optimizing images (including for mobile) while serving them from a large, fast network.

How to preload LCP images in WordPress?

The easiest way to preload LCP images is the preload critical images setting found in FlyingPress and Perfmatters. Just set the number of images that usually load above the fold, then they will automatically be preloaded and excluded from lazy load for better LCP.

How to optimize images for mobile?

Most image CDNs resize images for mobile, such as Cloudflare's image resizing or Bunny Optimizer. FlyingCDN (from the FlyingPress cache plugin) also serves responsive images.

How to serve images in WebP?

Most image CDNs/plugins serve images in WebP, or use a dedicated WebP plugin such as WebP Converter For Media or WebP Express. You can also use a free online WebP converter to manually convert important images, like those that load above the fold (for better LCP).

How to optimize background images?

Since background images are loaded from CSS, you'll need to manually lazy load them (often with a lazy-bg class) while excluding above the fold backgrounds from lazy load (using a skip-lazy class). Perfmatters has a lazy load setting for CSS background images.

Is Photoshop enough to optimize images?

While Photoshop can resize/compress images and save them in WebP, it doesn't address other optimizations related to lazy load, preload, and mobile resizing. No, it's not enough.

How to optimize images without WordPress plugins?

Image CDNs are the most effective way to optimize images without needing WordPress plugins. Most of them address compression, WebP, mobile resizing, and other features.

How to host external images locally?

Avatars (in comments) and YouTube thumbnails can be hosted locally using local avatar plugins, then FlyingPress which has a setting for self-hosting YouTube placeholder images.

Cheers,
Tom

You Might Also Like:

32 Comments...

    • Yes, they work together… when using both, I generally recommend using Perfmatters for lazy loading, preloading critical images, removing unused CSS, script manager, testing preloading other files (besides fonts), bloat removal, and hosting fonts locally.

      Reply
  1. Hi Tom,

    You are a true rarity. An expert, but humble… spending your time to help others. Can’t thank you enough.
    At your advice, (with your clear data to back it all up), I just moved our nonprofit away from SG and over to Rocket. Love it! TTFB is awesome. Support is awesome. Cloudflare Enterprise is awesome. (serving images as WebP is sort of awesome when it works).
    The only thing “missing” as I see it, is that Rocket discontinued their “auto image resizing” feature. They said it caused more problems than it solved.
    I’m good with all the basics on images… starting with proper image size for computer, compression, Webp – i get all that – but so far I can’t find a solution that will (1) automatically resize and serve proper dimensions images for mobile, (particularly interested in Woo product images), while (2) at the same time “playing nicely” and perfectly with Enterprise edge via Rocket. plenty of other cdn solutions to do this, but not that will work perfectly with CF enterprise edge, (at least in my limited understanding).
    I’d love to learn from you more on this when time allows.
    Thanks again!

    Reply
    • Thanks so much Matt, really appreciate you saying that.

      Ah, sounds like I need to update this in my articles if they don’t support image resizing. I may need to chat with their team to see if they have a recommended solution since I’m sure they’re getting inquires about it. ShortPixel Adaptive Images, Bunny Optimizer… let me reach out to them and see what they say.

      Reply
  2. wprocket bunny cdn, is the best option for you? I have a lot of images. With this combination shortpixel isn’t necessary right?
    Thanks

    Reply
  3. Hi Tom, Thank you for sharing brainstorming tips for optimizing images for our website. This will really help full.

    Reply
  4. Nice article .. I will really like to know which is better between serving images through CDN and serving optimized image through the server.?

    Reply
  5. How can I make image gallery that display image in thumbnail size in a grid and load full size image in a lightbox when clicked on it. The way you are using in your gallery.

    Reply
  6. hi Tom, for each picture and furthermore for each connection), WordPress gives the choice to open it in another tab (window). What is the awesome terms of SEO ?

    Reply
    • Most people use target_blank (new tab) for all external links. Internal links usually open in the same tab.

      Reply

Leave a Comment