How To Optimize Images In WordPress: The Art Of Creating Perfectly Optimized Images (20 Image Optimizations, 2020)

When it comes to image optimization, you’ve probably heard enough about alt text.

There are actually 20 different ways to optimize images (if you include both SEO and speed optimization). These will give you better scores in GTmetrix/Pingdom, potentially rank you higher in search, and make your content load much faster. I’ve managed to get a 100% GTmetrix report with .5s load times… optimizing my images in WordPress was a big part of it.

Optimize images BEFORE uploading – using a program like Photoshop to optimize images before uploading them can save lots of work. You can resize, compress, strip EXIF data, save in correct format (eg. PNG/JPEG), and write a descriptive file name (which will automatically be used as the alt text if using the Automatic Image Alt Attributes plugin). That’s 6 optimizations!

If you require high resolution images (eg. a photography website), you may not want to resize and compress them (step 3 and 8) since these can reduce quality, even if it’s by a small amount.

Main tools I use – I use GIMP to resize/compress images (my image editor of choice), WP Rocket for my cache plugin, Imagify for further lossless compression + removing EXIF data, both Cloudflare and StackPath CDN, Automatic Image ALT Attributes plugin to automatically use the image file name as alt text, and Optimum Gravatar Cache to cache Gravatars in comments. I use WP Review Pro as my rich snippets plugin, Better Search Replace to bulk update images (very handy), and GTmetrix as my speed testing tool. See the full list of tools.

1. Find Unoptimized Images

Run your site through GTmetrix and you’ll see these items in the Page Speed/YSlow tabs. The first five are usually page-specific, meaning GTmetrix will only show the unoptimized images for the single page you test. The last 3 usually occur on your entire site. Of course, these are only 7 ways to optimize images, but some of the most important, so we’ll be doing these first.

• Serve scaled images: resize large images to correct dimensions (step 2)
• Specify image dimensions: specify a width/height in the image’s HTML or CSS (step 3)
• Optimize images – losslessly compress images (step 4)
• Combing images using CSS sprites – combine multiple images into 1 image (step 5)
• Avoid URL redirects – don’t serve images from wrong www or http(s) version (step 6)
• Use a content delivery network – serve images/files from a CDN (step 7)
• Leverage browser caching –  cache images/files using your cache plugin (step 8)
• Make favicon small and cacheable – use a 16x16px favicon and cache it (step 9)

Start by fixing images that appear on multiple pages: logo, sidebar/footer images, etc. Also start with serve scaled images as you may have to resize/reupload them with new dimensions.

2. Serve Scaled Images

If you see serve scaled images errors in GTmetrix, it means you have oversized images and need to resize them to the correct dimensions (which GTmetrix provides you with). As long as you follow your image dimensions cheat sheet (see below), you shouldn’t see these errors. But if you already uploaded oversized images, you’ll need to resize them manually, or use a plugin.

Bulk Resize Images Using A Plugin – the problem with this, is that different images call for different dimensions (widgets, sliders, fullwidth images). While most image optimization plugins have an option to resize images to one single specific set of dimensions, you should really crop/resize them before uploading. If you do resize images using a plugin, keeps backups of the original images (and only test a few out) in case you’re not happy with the results.

Resize Images Manually – get the correct dimensions from GTmetrix and resize/reupload them. Remember, GTmetrix only shows unoptimized images for the single page you test.

Create A Cheat Sheet Of Your Website’s Image Dimensions
Your sliders, blog sidebar, featured images, and blog content body all call for specific dimensions which images should be resized to. Create a cheat sheet so you can resize them before uploading them to WordPress. This is especially helpful if you have many areas of your website requiring different images sizes, and if you have multiple designers/editors.

3. Specify Image Dimensions

This means adding a width/height to the image’s HTML or CSS. The Visual Editor does this for you (but widgets, some page builders, and custom HTML do not). Test a few pages in GTmetrix.

GTmetrix tells you the image’s dimensions…

Add the width/height to the image’s HTML…

4. Losslessly Compress Images

These are “optimize images” items in GTmetrix. Many programs (eg. Photoshop and Gimp) have the option to compress when exported. While this is a great start, image compression plugins usually get even better results. I prefer Imagify, Kraken, ShortPixel, or Smush. Other plugins are known to visually reduce image quality and may cause errors with your images.

Compressing Images With Imagify

1. Sign up for Imagify
2. Install the Imagify Plugin
3. You will be prompted with the instructions below:
4. Enter your API key from your Imagify account
5. Set your compression level (normal, aggressive, ultra)
6. Imagif’em all (photo below) with bulk optimizes all images on your site
7. Once you’ve reached your limit, pay $4.99 or wait next month to reset your limit

Test how images look with different levels of compression…

Once signed up, bulk optimize all images on your site…

Set the option to optimize images on upload…

5. Combine Images Into CSS Sprites

On my homepage, you may think you see 21 icons, but they’re actually 1 single image. This is a CSS sprite, where you combine multiple images into 1 single image. This reduces the number of images (and requests) which is why my homepage only has 10 requests. Instead of loading 21 images, it loads 1. You will need CSS knowledge to do this, or use a CSS sprite generator.

Only Use CSS Sprites For Decorative Images – you lose a lot of image alt tags when you combine 21 images into 1. Do NOT combine important images into CSS sprites if they describe your content. As for me, the speed of my homepage is more important than it’s SEO… I use my homepage’s GTmetrix report in a lot of places (so I have to keep it clean) and my homepage, believe it or not, doesn’t target a keyword. It’s purpose is to outline my tutorials… and load fast.

6. Avoid Image URL Redirects

If you changed to HTTPS, www versions, or started serving images from a CDN, you should bulk update all your images (and links) using Better Search Replace so they are serving the correct version. Otherwise you may see minimize redirects or use cookie-free domains errors.

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

7. Serve Images From A CDN

This requires changing image URLs to include your CDN URL…

• Old Image URL (Without CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
• New Image URL (With CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – I use both Cloudflare and StackPath since more data centers = faster content delivery. Cloudflare has 200+ data centers, StackPath has 34+ data centers which are heavily located in the United States (which is where most my visitors are from). Cloudflare does not assign you a CDN URL so we’ll use StackPath’s CDN to serve images.

Step 1: Choose a CDN. I use StackPath (they have a 30-day trial).

Step 2: In the dashboard, click the CDN tab, then create a StackPath CDN Site…

Step 3: Copy your CDN URL and paste it into your cache plugin (below is for WP Rocket)…

Step 4: Replace image URLs to include your CDN URL (using Better Search Replace).

Step 5: Check for old image URLs using Chrome DevTools. Sometimes, your cache plugin or CDN Enabler takes care of this, except links in CSS and JavaScript which are hard-coded. For the links which are left behind, they are normally in files (such as CSS or Javascript) that need manual checking and replacing. Chrome DevTools shows you all domains currently being used.

Step 6: Run your site in GTmetrix and “content delivery network” should be green in YSlow. You shouldn’t have any errors in “minimize redirects” or “use cookie-free domains” either.

8. Cache Images

Most cache plugins have an option for browser caching, which caches images. I use WP Rocket which was rated the #1 cache plugin in multiple Facebook polls, and I have tutorial for that. Swift Performance is generally ranked the #1 free cache plugin (I have a tutorial for that too).

9. Make Favicon Small And Cacheable

Ensure your favicon is 16x16px, is favicon.ico format, and is cached using your cache plugin.

10. Remove EXIF data

Exif data contains information such as aperture, shutter speed, ISO, focal length, camera model, date the photo was taken, and more. You don’t need this for images on your website. The VA Removing Exif plugin removes Exif data automatically once images are uploaded.

Most image optimization plugins (including Imagify, ShortPixel, Kraken, EWWW, and Smush) have an option to remove EXIF data automatically. Here is the settings for Imagify…

11. Cloudflare Image Optimization

Cloudflare also has a few ways to optimize images. Mirage and Polish are found in your Cloudflare speed settings while Hotlink Protection is found in your Scrape Shield settings.

Cloudflare Mirage (Pro Feature) – reduces image requests, lazy loads images, and improves image load times on mobile devices with slow network connections. Here are more details…

• Resizes images based on a visitor’s device/connection. A visitor on a poor connection will get a smaller version (lower resolution) until they are back on a higher bandwidth.
• Reduces amount of requests – instead of sending multiple requests for all images on the website, Mirage pulls this into one request so visitors can see images immediately.
• Lazy loads images (only loads them once users scroll down and actually see the image).

Cloudflare Polish (Pro Feature) – strips EXIF data and compresses images.

Cloudflare Hotlink Protection – prevents people from copying your images and pasting them on their own website, which (since you’re still hosting that image) will suck up your bandwidth.

12. Lazy Load Images

This delays the loading of images until users scroll down the page and visibly see the image. While it improves initial load times, constantly loading images as you scroll can be very annoying. I personally only lazy load videos, since those take much long to load than images.

You can use the Lazy Load plugin, Lazy Load For Videos plugin, or use WP Rocket…

13. Save As Correct Format

PNG vs. JPEG – PNG is uncompressed (larger file size) and should be used in simple images without lots of colors. JPEG is a compressed (smaller file size) which slightly reduces image quality but is smaller in size, and is used in images with lots of colors. GIMP and other image editing programs should use the correct format automatically, but this is still good to know.

Illustration by Labnol

14. Image File Names

Search engines use both alt text and image file names, so name your files before uploading them to WordPress. If you’re using a plugin that adds alt text automatically based on the file name, naming your files is all you need to do! Do not stuff keywords, just describe the image.

15. Alt Text

These should be the same as your image file name. You can use the Automatic Image Alt Attributes plugin to automatically use the file name as the alt text. As long as you’re using relevant images, some of them should naturally include (bits) of your keyword… there is absolutely no reason to stuff keywords in images, which risks a keyword stuffing penalty.

Add Alt Text To Images Automatically – use the Automatic Image Alt Attributes plugin. Now whenever you add an image, the plugin will add alt text which is the same as the file name…

<img src="https://website.com/wp-content/uploads/2016/08/WP-Fastest-Cache-Plugin.jpg" alt="WP-Fastest-Cache-Plugin" width="577" height="247" />

Find Missing Alt Text – Screaming Frog is a free tool that shows you all images missing alt text.

• Download Screaming Frog SEO Spider
• Enter your website and click “Start” to crawl the website
• Click the images tab
• Go to Overview → Missing Alt Text (see below)
• Locate those images on your site and add alt text

16. Open Graph (Facebook + Twitter)

This makes your content format properly when shared on Facebook/Twitter, specifically your image since both networks use custom dimensions to display it, otherwise it will look funny.

If using Yoast, go to the “Social” settings and enable Open Graph for both Facebook/Twitter…

Now edit a page/post, then click the “share” link in Yoast and you will see options to upload custom images for Facebook (1200 width x 628 height) and Twitter (1024 width x 512 height).

17. Images In Featured Snippets

Featured snippets are when Google shows bits of your content at the top of search results and can (but are not guaranteed) to include an image. Google will pull these from any 1st page result, however it’s up to them whether they will even display a featured snippet or image. These also make your snippet show up twice and are an incredible way to get lots of traffic.

3 Types Of Featured Snippets

• Answers
• Tables
• Lists

How To Get Featured Snippets In Google

• Target a keyword where people want a concise answer
• Use Moz Keyword Explorer to identify question keywords
• Use Answer The Public to find even more question keywords
• Choose whether the answer should be a paragraph, list, or table
• Design a nice graphic (or take a photo) describing the keyword
• Use optimal character length (see photo below taken from Moz)
• Create fact-based content with quality references (links, graphics, etc)
• Target keywords that already have an featured snippet but do a poor job
• If you’re aiming for the answer box, target your keyword using an exact match
• Make sure you’re on the 1st page for the keyword, if not, improve the content

18. Structured Data

Images can be used in structured data (and badges) for the following content types:

• Video
• Recipe
• Product
• Animated GIFS

What Rich Snippets Plugin Should I Use?
I use MyThemeShop’s WP Review Pro (here’s a page I use it on) which supports 14 data types including recipes and product reviews. I used to use WP Rich Snippets but the developer abandoned the plugin and it hasn’t been updated for 2+ years, and the All In One Schema plugin is just boring (it has a lack of options and styling). WP Review Pro is very easy to use.

19. Style Images

Don’t forget to style your images! I use borders on most of mine.

• Image Titles
• Image Links
• Image Borders
• Image Captions

20. Resize GIFs

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

Resize the GIF…

Then compress it…

The result :-)

21. Cache Gravatars

If you have posts with lots of comments, Gravatars can completely ruin your report. You can disable them, break comments to only show a certain number of comments, or try a Gravatar cache plugin. You may need to do a bit of testing as some plugins don’t work on some websites.

• Cache Gravatars (Optimum, Harry’s, or FV Gravatar Cache)
• Disable Gravatars completely
• Set your default Gravatar to blank
• Delete comments that don’t add value
• Set your default Gravatar to a custom image on your server
• Restrict your Gravatar images to smaller dimensions (e.g. 32px)
• Paginate comments in WP Disable to only show 20 comments at a time
• If none of these work, check out WP Rocket’s caching Gravatars tutorial

22. Avoid Embedding Images From External Websites

Always upload images to your website, never copy/paste them. Otherwise you end up with extra requests as the image isn’t hosted on your server so it has to pull it from somewhere else.

23. Image Optimization Tools

Avoid using plugins with duplicate functionality – Imagify, ShortPixel, Kraken, EWWW, and Smush all basically do the same thing (lossless compression, EXIF data removal, resize images). WP Rocket has options for lazy load, caching, and CDN (and database cleanup + hosting Google Analytics locally) which most cache plugins do not, saving you from using extra plugins.

• Awesome Screenshot – Chrome extension for taking screenshots.
• Automatic Image Alt Attributes – automatically inserts alt text using image file name.
• Better Search Replace – use it to bulk update images.
• Cloudflare – free CDN with 200+ data centers, hotlink protection, mirage, polishing.
• Chrome DevTools – shows domains being used if you have GTmetrix redirect errors.
• CSS Sprite Generator – free tool for combining multiple images into 1 CSS sprite.
• EWWW Image Optimizer – lossless compression, EXIF removal, resizing.
• GifGifs – resizes GIFs.
• GIMP – free image editing software I use.
• GTmetrix – shows you which images need to be optimized.
• Imagify – lossless compression, EXIF removal, resizing.
• Imsanity – resizes large image to fix “serve scaled images” in GTmetrix.
• Kraken – lossless compression, EXIF removal, resizing.
• Lazy Load – plugin that delays loading of images until they become visible.
• Lazy Load For Videos – plugin that delays loading of videos until they become visible.
• Optimum Gravatar Cache – caches Gravatars (or try Harry’s Gravatar Cache).
• Screaming Frog SEO Spider – find missing alt text, meta descriptions, etc.
• ShortPixel – lossless compression, EXIF removal, resizing.
• Smush – lossless compression, EXIF removal, resizing.
• StackPath – $10/month CDN with 31 data centers.
• Swift Performance Lite – #1 free cache plugin in most Facebook polls.
• WP Review – rich snippets plugin (helps get images showing in search results).
• WP Rocket – #1 cache plugin in most Facebook polls.
• VA Removing Exif – strips unnecessary data from images.
• Zoom  -Chrome extension for getting the perfect zoom while taking screenshots.
• Yoast – enables Facebook/Twitter meta data so images format properly when shared.

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.

See Also: Hot I Got 100% GTmetrix Scores

Cheers,
Tom