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.
Optimizing WordPress Images For Speed
- Find Unoptimized Images In GTmetrix + PSI
- Use GTmetrix Legacy Reports To See More Image Optimizations
- Properly Size Images
- Defer Offscreen Images
- Serve Images In Next-Gen Formats
- Efficiently Encode Images
- Specify Image Dimensions
- Serve Images From A CDN
- Avoid Image URL Redirects
- Combine Images Using CSS Sprites
- Use Adaptive Images For Mobile
- Disable Image Hotlinking
- Remove EXIF data
- Serve Lower Quality Images To Users On Slow Connections
- Cache Images
- Cache Gravatars
- Resize GIFs
- Avoid Embedding Images
- Image Optimization Tools
1. Find Unoptimized Images In GTmetrix + PSI
GTmetrix and PageSpeed Insights show the same image optimizations since GTmetrix’s update.
- 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. 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.
- 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.
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)
Be sure to use adaptive images to properly size images for mobile devices (step 11).
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/webpc-passthru.php?src=https://onlinemediamasters.com/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png&nocache=1
New Image URL (With CDN Rewrite): https://onlinemediamasters.b-cdn.net/wp-content/
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!
Main Image Optimization Tools
- 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 rewrite to serve images from your CDN. Has other speed optimization features to remove bloat and unload assets on specific pages.
Other Image Optimization Tools
- 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.
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
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.
I’m using this plugin: https://wordpress.org/plugins/simply-gallery-block/
But it lightboxes do slow down the site a bit so I’m considering deleting it and replacing it with a simple 2 columns layout of screenshots.
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 ?
Most people use target_blank (new tab) for all external links. Internal links usually open in the same tab.
Request you to tell me one thing. If I delete an image from my WordPress gallery, will it be automatically deleted from all the blogs in which I used them or not?
From your gallery? No. From your Media Library? Yes.
Hi,
How did u use wp rocket to lazy load comments. Can you tell me the exact method?
I use wpDiscuz for comments, so I added these in the delay JavaScript execution settings.
discuz
gravatar
You are professionally explain the image optimization step by step. Previously I am using EWWW image optimizer. I have select this plugin by reading the popular post for website called WPorion. But I want to choose the other image compression plugin so Tom you tell me which is the best option?
ShortPixel or TinyPNG are both good choices.
Oh my GOD, I spent 6 hours after reading your post. I spend this time to do everything you said. Bro, right now, my website is extremly fast. You are GOD of website speed for me. My website opens and response in just half second now. Ealier it took 8 secons to load.
Wow, 6 hours but man those are great results! So happy you found the tutorials helpful :)
you really had to bash Trump in this otherwise helpful page?
wtf
Black lives matter.
Hello there, I just want to know that, if I use different plugins in WordPress, it will unhealthy for the servers on shared hosting? because you have mentioned here multiple plugins.
You should really only need 1 image optimization plugin and it shouldn’t slow down your site even on shared hosting – the point is it to make it faster and somewhat easier on your server.
Shared hosting is fine up to a point but if your site requires more (higher CPU) plugins or starts to get significant traffic, you will need something like cloud.
Tom,
I am still very new to all this, I use allot of free images for my wordpress blog, is there one tool you recommend using to optimize images for speed.
P.S I use cloudflare and a caching plugin on my website with Yoast SEO, i am trying to keep plugins at a minimum to avoid conflicts.
Hi Tony,
I usually recommend ShortPixel for optimizing images. Just make sure you resize/crop them to the correct dimensions before uploading them.
Hi,
Respect for this article! I was wondering how you coop with the high def images. When GTmetrix is telling me “Serve scaled images” it is because I have uploaded two times the size of an image for high def reasons. Scaling them down will immediately show less quality image. This example was from Revolution slider btw.
Like to hear what your thoughts are on this.
A common problem with photographers! It’s just a matter of how much quality you’re willing to sacrifice. If you can scale and arr still happy, do it. If not, don’t.
Greetings! I get warnings over the “Automatic image ALT attribute” being abandoned. Is this something to worry over?
I don’t think so. I still use it, works great and saves time!
hello Tom, for each image and also for each link), WordPress gives the option to open it in a new tab (window). What is the best in terms of SEO ?
Hi Evelyne,
Good question. If it’s an external link, most websites open it in a new window (including mine). Internal links are mixed – I don’t open it in a new window but some websites do. I think if people click the links on your site a lot, this can lead to too many windows. Trying to help them keep it clean for my visitors I guess. Hope that helps!