Optimizing images in WordPress is a very important part to speed up your website. Because images are an integral part of your content. It conveys the messages and helps keep your readers engaged.
Moreover, they are also used to break up long pieces of content to keep readers from getting bored and improve Google search rankings. However, using images in your content will slow down your website.
There are many ways to optimize your images before and after uploading them. This tutorial will help you optimize images in your WordPress Site to load as fast as possible.
1. Using GTmetrix and PageSpeed Insights to find Unoptimized images
GTmetrix and PageSpeed Insights show the same image optimizations. So you can use it to find unoptimized images.
- Properly size images – resize large images to correct dimensions.
- Defer offscreen images – lazy load images and background images.
- Serve images in next-gen formats – convert JPEGs/PNGs to WebP.
- Efficiently code images – losslessly compress images using a plugin.
- Combine images using CSS sprites – combine many small images into 1 file.
2. To Fix Properly Size Images
Serve images that are appropriately sized to save cellular data and improve load time.
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.
As long as you follow the correct dimensions of your site (fullwidth blog images, logo, sidebar, footer, sliders, etc), you shouldn’t see errors.
- Run a page through the 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.
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)
3. To See More Image Optimizations by Using GTmetrix Legacy Reports
- Specify image dimensions: add width/height to the image’s HTML or CSS.
- Minimize redirects – serve images from correct WWW and HTTP(s) version.
- Use a content delivery network – serve images from a CDN.
- Leverage browser caching – make sure images are being cached.
- Make favicon small and cacheable – use a 16x16px favicon and cache it.
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.
4. To Fix 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 the WordPress repository or try the 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.
5. To Fix Serve Images In Next-Gen Formats
Serve images in next-gen formats means you need to convert images to WebP. So, 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 WordPress repository.
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.
You can use a designated WebP plugin from the WordPress repository below:
- WebP Converter for Media – Convert WebP & Optimize Images
- Imagify – Optimize Images & Convert WebP
- LiteSpeed Cache
- EWWW Image Optimizer
- Smush – Lazy Load Images, Optimize & Compress Images
- WP Fastest Cache
Efficiently encode images means you need to compress images.
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.
This is usually done through 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%.
7. Serving images from a CDN
Serving images from a CDN means you need to enable a CDN rewrite.
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.
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.
8. To Fix Specify Image Dimensions
Specify image dimensions means adding a width/height to the image’s HTML or CSS.
How To Fix Specify Image Dimensions
- Run a page through the GTmetrix legacy report.
- Learn which images have specific image dimension errors.
- Take note of the image dimensions provided by GTmetrix.
- Edit the page, locate the image, and view its 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.
This is an optimization recommended in GTmetrix legacy reports but is still useful. Images that don’t have height attributes 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 hardcoded in HTML/CSS need to have this done manually.
9. Using CSS Sprites Combines Images
CSS sprites allow you to combine multiple images (usually smaller decorative images like logos or icons) into a single file. This reduces the number of HTTP requests, speeding up page loading.
If you need your sprites to be responsive, use the Responsive CSS Sprite Generator.
Using CSS Sprite Generator step by step:
– Upload Your Images
– Choose Options ( PNG – Recommended, JPEG, GIF)
– Create your Sprite
10. 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.
11. To Create Adaptive Images
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 plugin being the most popular).
How To Create Adaptive Images
- Install an adaptive images plugin.
- Retest on your site for properly size image errors on mobile.
12. Removing EXIF data
Removing EXIF data 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).
13. Caching images
Caching images is usually done through your cache plugin.
14. Cache Gravatars
If you have posts with lots of comments, consider optimizing Gravatars.
15. 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 and upload it on your website.
16. Image Optimization Tools
There are many Image Optimizer Plugins, but you should only use one of them.
- ShortPixel – lossless compression, EXIF removal, resizing.
- ShortPixel Adaptive Images – serve smaller images to mobile devices.
- BunnyCDN – CDN I recommend for serving images and other assets.
- WebP Converter For Media – converts JPEG/PNGs to WebP images.
- Elementor Lazy Load Background Images – lazy load background images.
- GTmetrix Legacy Reports – shows image errors not shown in new reports.
- Perfmatters – enable CDN to rewrite to serve images from your CDN. Has other speed optimization features to remove bloat and unload assets on specific pages.
- Awesome Screenshot – Chrome extension for taking screenshots.
- Better Search Replace – bulk updates images that need to be optimized.
- Cloudflare – includes image optimizations like hotlink protection, mirage, polish.
- CSS Sprite Generator – combine multiple decorative images into 1 CSS sprite.
- Flying Images – optimization plugin that serves images from Statically CDN.
- WP User Avatar – upload a locally hosted Gravatar image (see my comments).
- WP Rocket – #1 cache plugin in most Facebook polls with image optimizations.
- Zoom – Chrome extension that gets the perfect zoom levels during screenshots.
17. Frequently asked Questions when Optimizing Images in WordPress
17.1 How do I efficiently encode images?
Compressing your images will fix this. PageSpeed Insights uses an 85% compression level to check whether savings are 4KiB or greater, so try to compress your images at around 85%.
17.2 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.
17.3 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.
17.4 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 serving scaled images.
17.5 How do I optimize images in WordPress?
Image optimization plugins usually handle compression, WebP, and remove EXIF data. Otherwise, make sure images are properly sized and lazy loaded which are two key parts of image optimization.
Does your GTmetrix report look a little better?
Hope this helped! Drop me a comment if you have questions.