How to Optimize Images for Page Speed (and Google)

Wondering how to optimize images for page speed and Google? In this article, you’ll learn the best image optimization techniques that improve performance and address the Page Speed Insights (PSI) image warnings.

Google is a significant source of revenue for most businesses, so it’s crucial to rank well. Page speed is one of the most important KPIs in the algorithm, and you’ll see how image optimization techniques are an excellent way to give a speed boost to your WordPress site.

Let’s dive in.

Why Images Are Crucial for Improving Page Speed

According to Google, optimizing images for page speed is important for rankings and user experience. In fact, you need to prepare images for the web. 

Did you know that a large volume of unoptimized images is usually the culprit behind a slow website? Here’s how images impact performance: 

• Overall page speed – large images can make your website slow and upset your visitors who expect to access the information as soon as possible. As shown in the figure below, images are the dominant resource in a web page: 

Images are a great source of page weight, and they also make up the largest number of HTTP requests per page: 

When a visitor lands on your site, your browser has to request and download some files to render the content. An HTTP request is made to the server for every single file:

The more heavy resources you have, the more requests your browser will need to make. Optimizing your images and making them smaller will reduce the size of the HTTP requests resulting in a faster loading site.

• Conversions – optimizing your images for page speed is crucial for the revenue of your business. You need a fast-loading site with light images to make your visitor happy, otherwise potential clients will leave before even browsing. According to Google, if the page load time is more than 5 seconds, then the probability of bounce increases by 90%! 

We have seen how images play an important role in the performance of a web page. Let’s go over the effects of unoptimized images on Google PageSpeed Insights reports. 

What’s the Impact of Images on Google PageSpeed Insights?

PageSpeed Insights is a tool powered by Lighthouse that analyzes the content on a web page, including images. Once the audit is finished, PageSpeed gives a diagnosis and recommendations to optimize images and make that page faster. 

There are two PageSpeed metrics impacted by images: the Largest Contentful Paint (LCP), which is a Google Core Web Vitals, and the First Contentful Paint (FCP). 

First Contentful Paint (FCP): it’s related to the first text and image elements being rendered to the screen. Largest Contentful Paint (LCP): it marks the point when the main content has been loaded.  📖  Both KPIs can be worsened by Google if the above-the-fold images take time to load.

What’s more, there are five common PageSpeed recommendations related to image optimization, namely: 

1. Serve Images In The Next-gen Formats

Google recommends converting images to WebP or AVIF because those formats offer better compression than JPEG or PNG. Compressing images means faster downloads, less data consumption, and a faster site. 

In the example below, I could save almost 135 KB by converting my JPEG image to webP:

2. Efficiently Encode Images

Efficiently encoding images means reducing an image file size while still maintaining great quality. If the potential savings are 4KB or greater, Google will flag the image as optimizable. 

3. Defer Offscreen Images

An additional way to optimize images for performance is to defer offscreen images and apply the lazy loading script to the images below-the-fold (not on the visitor’s screen). The goal is to prioritize the critical resources first and load the “hidden” images later.  

4. Properly Size Images

Another recommendation from Google is to properly size the images, especially when serving them on mobile (responsive design). In the picture below, I could save 50 KB by resizing and optimizing my image for the mobile devices.

5. Serve Static Assets With An Efficient Cache Policy

HTTP caching can speed up your page load time on repeat visits to your site. Google flags all static resources that aren’t cached:

In the next section, we’ll go over how to address each of the image PageSpeed Insights items and how to improve page speed.

How to Optimize Images for Google PageSpeed and Performance

To optimize images for Google and improve page speed, you can  implement 8 following performance techniques:

1. Convert Images to WebP (or Another Next-Gen Format)
2. Compress Images
3. Resize Images
4. Set Image Dimensions
5. Implement Lazy Loading
6. Enable Browser Caching
7. Take Advantage of a CDN
8. Use .SVG Graphics When Possible

Let’s go over the web tools and plugins you can use for each optimization recommended by Google to improve your overall Lighthouse score. 

1. Convert Images to WebP (or Another Next-Gen Format)

One of the most efficient ways to optimize your images for Google is to convert them to WebP or Avif using a WordPress plugin like Imagify. It creates a WebP version of the images resulting in better compression and optimization. Imagify is free up to 20MB of data a month. (Check the full Imagify’s pricing).

🔊 Important to note: as of March 2024, Imagify also converts images to Avif, the other next-gen format recommended by Google to make your images lighter.

You can check out other WebP conversion plugins: WebP Convertor for media and WebP Express.

If you don’t want to use a plugin, you’ll find many free online tools like Convertio or Ezgif. You need to perform a few extra steps for that method:  upload your images, download them in WebP, and put them in your WordPress library. 

2. Compress Images

Compressing an image means significantly reducing its size to decrease its cost for storage. According to Google, this will give your website a nice performance boost! 

The most popular WordPress plugins to compress images without losing quality are, namely: 

• Imagify with Smart Compression and the possibility to compress images in bulk)

• Optimole
• Compress JPEG & PNG (Tiny PNG)
• EWWW
• ShortPixel

Read our guide to learn more about the 6 best image compression plugins for WordPress. 

You can also use design software like Photoshop or Lightroom to compress images, but note that the quality may be altered. 

The last option is to go for a web-based tool like TinyPNG.

3. Resize Images

Google recommends resizing images properly, especially on mobile. You can use software like Sketch, Preview, or GIMP to modify the size of the images and reduce their weight. 

Note: you can also use Imagify to resize large images. There is an option to automatically optimize the larger images. 

4. Set Image Dimensions

PageSpeed suggests setting an explicit width and height on image elements. The goal is to reduce layout shifts and improve the Cumulative Layout Shift (CLS) metric, another Core Web Vitals metric. It measures the visual stability of the content. 

To set an image dimension makes sure that your “width” and “height” HTML tags have a value, as shown in red below: 

<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
<img src="girl.jpg" width="640" height="360" alt="girl at the beach" />

A manual way to know if the dimensions are properly set up is to use the developer tool on Chrome and inspect your images:

5. Implement Lazy Loading

Lazy loading is one of the most efficient ways to optimize your images for Google and performance. Why? You tell the browser only to download the images that the visitor is viewing. 

To apply lazy loading to your images, you can use a free WordPress plugin like LazyLoad by WP Rocket or Autoptimize. LazyLoad by WP Rocket is very straightforward: 

You can also implement lazy loading manually by adding the following tag on your image:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

To learn more about lazy loading, we suggest you read this article about the best lazy load plugins for WordPress.

6. Enable Browser Caching

Caching is another Google recommendation for page speed because it allows images to be served faster to the users. Browser caching can help to reduce the server load by reducing the number of HTTP requests per page. 

Google suggests using a WordPress plugin to implement caching. One of  the best cache plugins is WP Rocket. It applies 80% of the web performance best practices has a simple interface and a quick set-up.

7. Take Advantage of a CDN

Using an image CDN significantly reduces your traffic costs and increases your grade on Google PageSpeed Insights. It optimizes the way images are delivered to the visitors no matter where they are in the world. Thanks to this image optimization technique, the amount of transferred data is reduced.

Important: setting up a CDN from scratch can be overwhelming. You’ll need to deal with DNS records and Cname fields. If you prefer an automatic installation, you may want to try RocketCDN. They do the heavy lifting and configure the CDN for you. A CDN offers many benefits and it’s an essential performance ally if you have a worldwide audience.

8. Use SVG graphics When Possible

One of the most valuable features of SVG for performance is that the graphic can be scaled without losing quality. SVG stands for Scalable Vector Graphics, and it’s based on XML. Behind the scenes, this format is equations and mathematics, making it easier to scale without ever compromising the pixels. 

Images and Page Speed: a Case Study

Let’s apply all the recommended techniques we just mentioned so we could compare our performance before and after the optimization of a web page. We’ll use PageSpeed Insights and GTmetrix for the audit. 

The first column shows the results before any type of optimization. I created a web page with 8 HD pictures from my iPhone. 

The second column shows the improvements after implementing the image optimization techniques. My results on Google PageSpeed Insights have definitively improved: 

	Before Image Optimization	After Image Optimization(Imagify + WP Rocket + Rocket CDN)
Overall grade
Page Speed Insights warnings
Page Details:Total weight of my images on the page% of requests made by images

Key performance results with Imagify, WPRocket and RocketCDN:

After following Google’s recommendations about how to optimize images we can notice the following improvements:

• The image-related PSI issues and warnings are fixed 
• Images total weight was 3.5 MB, it’s now down to 36.8 KB
• Half of the HTTP requests was made by the images. After optimization, they are only responsible for 22% of the requests.
• The HTTP requests went from 16 down to 9
• My Core Web Vitals are now all in the green
• The performance grade went from 68/100 to 95/100 on mobile
• The fully loaded time was 3.9 s and it went down to 1.2 s
• My page size was almost 4MB and it’s now 91KB!

Wrapping Up

To optimize images for page speed and Google, I’ve applied the following performance protocol:

• I installed Imagify, which allowed me to:
  • Convert my images to WebP
  • Resize my largest images
  • Compress and optimize my images using the Ultra mode to efficiently encode them

• I activated RocketCDN to allow my images to be served faster around the world.

• I used WP Rocket to:
  • Implement caching 
  • Apply lazy load on my images 
  • Optimize my JS and CSS code

Want to give it a try and get rid of the image-related warnings? Start your image optimization journey with Imagify! Before installing the plugin, you can start using the web app for free.