15 Ways To Optimize Images In WordPress For Faster Load Times And Core Web Vitals

Want your images to load faster?

GTmetrix and PageSpeed Insights show a few image optimizations, but not all. This tutorial helps you optimize images in WordPress to load as fast as possible. It includes everything from WebP to ShortPixel, adaptive images, serving them through a CDN, and properly sizing images.

Many image editing programs (Photoshop and GIMP) let optimize images before uploading them. For example, they let you crop/resize images to proper dimensions, compress them, and remove EXIF data. Take advantage of these optimizations done by your image editing program.

If your website uses high resolution images (a photography website), you may not want to resize and compress them (steps 2 + 5) since it can reduce quality, even if it’s by a small amount.

 

1. Find Unoptimized Images In GTmetrix + PSI

GTmetrix and PageSpeed Insights show the same image optimizations since GTmetrix’s update.

 

2. Use GTmetrix Legacy Reports To See More Image Optimizations

I also like using GTmetrix legacy reports because they show you specify image dimensions errors as well as properly size image errors with the correct dimensions, while the new report doesn’t. For those specific optimizations, use the GTmetrix legacy report. You will need to create a free GTmetrix account and go to account > analysis options > default to legacy reports.

 

3. Properly Size Images

Properly size images means you need to resize large images to smaller dimensions.

As long as you follow the correct dimensions of your site (fullwidth blog images, logo, sidebar, footer, sliders, etc), you shouldn’t see errors. If you already uploaded large images, you will need to resize them manually or use a plugin. However, most image optimization plugins only have an option to resize them to a single set of dimensions, so resizing manually is often the only option.

How To Fix Properly Size Images

• Run a page through GTmetrix legacy report.
• Expand serve scaled images in the PageSpeed tab.
• Find oversized images and their correct dimensions (provided by GTmetrix).
• Resize images to the dimensions then replace the old image with the new one.

Tips For Taking Screenshots
The Zoom Chrome Extension lets you take screenshots at precise zoom levels. Since my fullwidth blog images are 680px, I use Zoom (as well as my computer’s zoom levels) to achieve near perfect 680px screenshots. Then I use GIMP to crop the edges. I’m left with a high quality 680px screenshot that fits the blog perfectly. For the screenshots, I use Awesome Screenshot.

Create An Image Dimensions Cheat Sheet
Learn the different areas of your site and create a cheat sheet. This way, you know the exact dimensions of each image and may avoid resizing huge images which may result in quality loss.

• Favicon: 16x16px
• Widget images: 414(w)
• Carousel images: 115(h)
• Slider images: 1900(w) x 400(h)
• Featured images: 250(w) x 250(h)
• Fullwidth blog post images: 680(w)
• Twitter OG image 1024(w) x 512(h)
• Facebook OG image: 1200(w) x 628(h)

 

4. Defer Offscreen Images

Defer offscreen images means you need to lazy load them.

Lazy load was built-in to WordPress 5.5, so there’s no need to enable it in another plugin. Most lazy load errors are because background images (in CSS) aren’t being lazy loaded. In which case, you can search WordPress’ repository or try Elementor Lazy Load Background Images plugin.

How To Fix Defer OffScreen Images

• Lazy load images.
• Lazy load background images.
• Learn how your cache plugin (e.g. WP Rocket) lazy loads images.

Above the fold images should be excluded from lazy load since users immediately see them.

 

5. Serve Images In Next-Gen Formats

Serve images in next-gen formats means you need to convert images to WebP.

Most image optimization plugins do this (e.g. ShortPixel). Otherwise, use a WebP plugin like WebP Converter For Media. If you’re using WP Rocket, WebP caching should almost always be disabled unless your WebP plugin doesn’t serve WebP images (which it usually does). It should also be disabled if you’re using Cloudflare or using the <picture> element or .htaccess method.

How To Fix Serve Images In Next-Gen Formats

• Enable WebP through your image optimization plugin.
• Select a WebP conversion method with <picture> element being most common.
• Alternatively, you can use a designated WebP plugin from the WordPres repository.

 

6. Efficiently Encode Images

Efficiently encode images means you need to compress images.

This is usually done though an image optimization plugin or your image editing program (Photoshop, GIMP, etc). Lighthouse tests your images with 85% compression and compares them to the original version. If the savings are 4KiB or greater, Lighthouse will flag the image. So if you’re looking to pass this recommendation, set your image compression level to around 85%.

How To Fix Efficiently Encode Images

• Choose an image optimization plugin (I recommend ShortPixel).
• Set the compression level to 85% (the same level Lighthouse uses).
• Bulk compress existing images and option to optimize images upon upload.

 

7. Specify Image Dimensions

Specify image dimensions means adding a width/height to the image’s HTML or CSS.

This is an optimization recommended in GTmetrix legacy reports but is still useful. Images that don’t have height attribute can result in a higher CLS in PageSpeed Insights. The visual editor and most page builders automatically add width/height attributes, so you usually don’t need to worry about it. But images that are hard coded in HTML/CSS need to have this done manually.

How To Fix Specify Image Dimensions

• Run a page through GTmetrix legacy report.
• Learn which images have specify image dimension errors.
• Take note of the image dimensions provided by GTmetrix.
• Edit the page, locate the image, and view it’s HTML or CSS.
• Add a width and height attribute to the image (screenshot below).
• Enable “add missing image dimensions” if you’re using WP Rocket.

 

8. Serve Images From A CDN

Serving images from a CDN means you need to enable CDN rewrite.

When setting up a CDN, they don’t change your URLs by default. You will need to enable CDN rewrite which can be done in Perfmatters or the WP CDN Rewrite plugin. This serves images from your CDN instead of just your server. Some image optimization plugins such as Flying Images will serve images from a free CDN such as Statically. Cloudflare doesn’t use CDN URLs. This changes your image URLs to include the CDN URL, ensuring they’re served from the CDN.

How To Serve Images From A CDN

• Setup a CDN (BunnyCDN is a very popular choice).
• Enable CDN Rewrite (in Perfmatters or through a plugin).
• Or, choose an image optimization plugin with a built-in CDN.

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

 

9. Avoid Image URL Redirects

Minimize redirects can be caused by images served from wrong URLs.

If you changed to HTTPS or WWW versions, you should bulk update all images (and links) so they use the correct version. Otherwise, you’ll see errors across your site to minimize redirects.

Use the Better Search Replace plugin to bulk update image URLs.

 

10. Combine Images Using CSS Sprites

I used a CSS sprite on my old homepage. You may think  you see 21 icons, but it’s actually 1 single image. This is a CSS sprite and combines multiple images (usually smaller decorative images like logos or icons) into 1 single image. This reduces the number of images as well as requests. Instead of loading 21 images, it loads 1. You can do this with a CSS sprite generator.

People might say “well, a 369MB page size is easy to load in .5 seconds!” But honestly, removing heavy elements and making your site more lightweight is just as good as any other optimization.

 

11. Use Adaptive Images For Mobile

Adaptive images serve smaller images to mobile devices.

If you test your site in a GTmetrix legacy report from Android (premium feature) you will likely see serve scaled image errors on mobile. That’s because images aren’t being resized for mobile. There are many adaptive images plugins (with ShortPixel Adaptive Images being most popular).

How To Create Adaptive Images

• Install an adaptive images plugin.
• Retest on your site for properly size image errors on mobile.

 

12. Disable Image Hotlinking

Disabling hotlinking prevents people copying/pasting your images to their website.

If they do this, the image will still be hosted on your server and consume your bandwidth. WP Rocket (disable embeds), Cloudflare, and many hosts have options to disable image hotlinking.

 

13. Remove EXIF data

Removing EXIF data strips useless information from images.

Removing it can make images slightly smaller. You probably don’t need aperture, shutter speed, ISO, focal length, camera model, date photo was taken, and other useless data in your images. Most image optimization plugins have an option to remove EXIF data (below is for ShortPixel).

 

14. Serve Lower Quality Images To Users On Slow Connections

The Optimole plugin and Cloudflare Mirage downgrades image quality for users on slow connections. This is a tradeoff, however if most of your visitors are on mobile, consider it.

 

15. Cache Images

Caching images is usually done through your cache plugin.

WP Rocket (what I use) and LiteSpeed Cache are the gold standards.

 

16. Cache Gravatars

If you have posts with lots of comments, consider optimizing Gravatars.

I use WP User Avatar to host Gravatars locally (the plugin lets me upload a custom purple Gravatar icon). Then I used WP Rocket to delay my comments and Gravatar’s JavaScript (wpDiscuz and gravatar). Since my comments are delayed and optimized, it puts virtually zero weight on my blog’s initial load time. I tried Gravatar cache plugins but they didn’t work for me.

 

17. Resize GIFs

Just like you resize images to the correct dimensions, GIFs should be resized too (use GIF GIF).

Step 1: Upload the GIF and resize it.

Step 2: Compress it.

Embed it on your website and laugh.

 

18. Avoid Embedding Images

Always upload images to your website, never copy/paste them from other sites. Otherwise, you’ll have extra requests since it’s not hosted on your server and pulls from somewhere else.

 

19. Image Optimization Tools

Just a reminder; avoid using multiple plugins for the same functionality!

 

Frequently Asked Questions

How do I optimize images in WordPress?

Image optimization plugins usually handle compression, WebP, and removing EXIF data. Otherwise, make sure images are properly sized and lazy loaded which are two key parts of image optimization.

How do I properly size images in WordPress?

Resize images to the correct dimensions. GTmetrix legacy reports tell you the correct dimensions they should be resized to. This was previously known as serve scaled images.

How do I create WebP images in WordPress?

Most image optimization plugins have a setting to convert JPEGs and PNGs to WebP images. Otherwise, search the WordPress repository for a WebP plugin.

How do I defer offscreen images?

It means you need to lazy load images. If you this error in PageSpeed Insights, it's most likely due to background images in CSS which are more difficult to lazy load.

How do I efficiently encode images?

Compressing your images will fix this. PageSpeed Insights uses a 85% compression level to check whether savings are 4KiB or greater, so try to compress your images at around 85%.

 

What Do You Think?
Does your GTmetrix report look a little better? Let me know in the comments! And if you want more tips that will get you even better scores + load times, see my full WordPress speed guide.

Cheers,
Tom