How to Optimize Images in WordPress for Speeding up Website

how to optimize your images in wordpress

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.

how to optimize your images in wordpress

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.

Optimize images wordpress

  • 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.

properly size images

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.

  1. Favicon: 16x16px
  2. Widget images: 414(w)
  3. Carousel images: 115(h)
  4. Slider images: 1900(w) x 400(h)
  5. Featured images: 250(w) x 250(h)
  6. Fullwidth blog post images: 680(w)
  7. Twitter OG image 1024(w) x 512(h)
  8. 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.

Image Optimizations by Using GTmetrix Legacy

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 elementor background 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.

how to fix images in next gen formats

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
  • Autoptimize
  • LiteSpeed Cache
  • EWWW Image Optimizer
  • Smush – Lazy Load Images, Optimize & Compress Images
  • WP Fastest Cache

6. To Fix Efficiently Encode Images

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.

how to fix efficiently imagesThis 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.

bunny 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.

image elements do not have explicit

how to fix specify image dimensions

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

CSS Sprites

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.

Better Search Replace Plugin

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).

Shortpixel Image Optimizer Plugin

How To Create Adaptive Images

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

adaptive images plugin setting

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).

Removing EXIF data

13. Caching images

Caching images is usually done through your cache plugin.

WP Rocket Plugin

14. 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.

optimize images

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.

resize a gif for optimize image

Step 2: Compress and upload it on your website.

gif optimizer

16. Image Optimization Tools

There are many Image Optimizer Plugins, but you should only use one of them.

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.

GTmetrix report for optimize image in wordpress

Does your GTmetrix report look a little better?
Hope this helped! Drop me a comment if you have questions.

 

2 thoughts on “How to Optimize Images in WordPress for Speeding up Website

Leave a Reply

Your email address will not be published. Required fields are marked *