Table of Contents
Images are often the largest part of web pages, making them important factors in load time, user experience, and SEO. The recent Improve Image Delivery Insight by Google helps you spot image-related performance issues and take targeted action to correct them.
In this post, you’ll learn more about the impact of images on website performance and how to use Google’s metric to deal with them, either manually and/or with a WordPress plugin. Doing so will help improve your site’s user experience, conversions, engagement, and search visibility.
| TL;DR Not ready to commit to the whole post? Here’s a sneak peek of what’s inside: ✅ Images are a major part of page weight, so they greatly impact load time, user experience, and SEO. Google’s Improve Image Delivery Insight highlights when images are too large, poorly compressed, or using outdated formats. ✅ To fix these issues manually, serve images in the correct size, use modern formats like WebP/AVIF, apply appropriate compression, replace large GIFs with video, and follow performance best practices like caching, lazy loading, CDNs, and prioritizing LCP images. ✅ Or, automate all of this: WP Rocket optimizes how images load (lazy loading, LCP prioritization, CDN integration, caching, etc.), while Imagify optimizes the images themselves (convert to WebP/AVIF, compress, resize). Together, they drastically improve performance, often in just minutes. |
What’s the Improve Image Delivery Insight?
First, let’s explore Google’s benchmark and why it matters.
The Role of Images in Website Performance
Images typically make up a disproportionate share of a web page’s total file size. That’s simply because visuals are much more information-dense than text content.
As a consequence, they are slower to download and may block files that are crucial for rendering web pages in the process. When that happens, both actual and perceived page loading speed decrease, which influences bounce and conversion rates and ultimately revenue.
This also makes images a factor in Core Web Vitals like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). In fact, in many cases, images act as the LCP element.
Plus, when they don’t load correctly, they can contribute to web page instability and negatively affect Cumulative Layout Shift (CLS).
| 💡 Since Google uses these metrics to rank web pages in search, images directly impact web traffic and SEO. For that reason, it’s very important that you optimize all images you include on your site, both in terms of size, weight, format, and delivery. |
Google’s Improve Image Delivery Insight
That’s exactly where this performance insight comes in. Combining previous image audits, including “Serve images in next-gen formats” and “Efficiently encode images”, it evaluates if visuals on a web page are unnecessarily large. Specifically, it checks if:
- Images are delivered in appropriate dimensions for the user’s device and the location they appear in
- They use modern formats such as WebP and AVIF instead of JPEG or PNG
- Image compression levels are sufficient
- Moving visuals would be better off using videos instead of animated GIFs
The insight points out all images on the tested page that exhibit one or more problems in these areas, plus estimated file size savings if improvements are made.
Finding Image Delivery Issues on Your Site
Being a Google performance metric, the Improve Image Delivery Insight is available in all the company’s speed testing tools.
One of the easiest ways to see if it applies to your site is to run your web pages through PageSpeed Insights. The metric will appear either under Insights or Passed Audits.
Another option is to use the Developer Tools in Google’s Chrome browser. Open them (via the menu → More tools → Developer tools or Ctrl/Cmd+Shift+I), go to the Performance panel, and capture a page load recording. When it’s finished, the Improve Image Delivery Insight will appear in the left sidebar.
Click on it to see the list of images that need improvement and highlight flagged visuals in the performance timeline. Another click on any of the images gives you details about what issues the tool detected.
How to Solve Image Delivery Problems Manually
The good news is that issues with images on web pages are pretty straightforward to address. The criteria Google highlights in its insight already point to the improvements needed. In the following sections, we’ll look at how to apply them, first by hand and afterwards via plugin.
1. Show Images in the Right Size
The first step is to avoid using images that are larger in size than they appear on the page. An image that’s 2,000 by 1,000 pixels large but only takes up 300 pixels is a huge waste of bandwidth and performance drain. So, scale your images to the appropriate size before uploading.
But what are the right dimensions? After all, people view your website on many different screen sizes. An image that fits perfectly on a desktop monitor is hilariously oversized for a cellphone screen.
Luckily, there is a solution: The srcset and sizes attributes allow you to provide several visuals in the same <img> tag for various screen dimensions.
<img src="images/hero-1200.jpg" srcset="images/hero-480.jpg 480w, images/hero-800.jpg 800w, images/hero-1200.jpg 1200w, images/hero-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 1200px" width="1200" height="600" alt="Hero banner"> This allows browsers to automatically deliver the correct resolution, which includes high-density versions for retina displays. That way, visitors don’t waste their download speed on image sizes that are not appropriate for them, your images load quicker, and your web pages appear faster.
2. Use Modern Image Formats
Besides dimensions, another important factor to address is file size. Here, the format you choose for your images is very important. Modern formats like WebP and AVIF provide significantly smaller file sizes at the same visual quality than older formats like JPEG and PNG.
They are also supported by all modern browsers (WebP, AVIF), making them safe to use for the majority of users. Plus, they are in active development, so they will continue to deliver better results over time.
If necessary, you can serve fallback formats for older browsers. You can do this by providing more than one <source> file in the <picture> HTML element.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="800" height="600">
</picture> As we have seen, image format is something the Improve Image Delivery insight specifically checks for, so you should take it seriously.
| 💡 You can use tools like Photoshop, Sketch, or CloudConvert to transform your images into other formats. |
3. Compress Your Images
The reason why modern image formats deliver smaller file sizes is that they have better compression built in. Compression means getting rid of data that isn’t absolutely to shrink file size without significantly compromising quality.
There are two kinds of compression: lossy and lossless.
Lossy compression reduces file size by permanently removing some image data that isn’t noticeable to the human eye. Lossless methods, on the other hand, don’t touch image data but remove unnecessary metadata like color profile details, embedded thumbnails, or unused color information.
Lossy produces smaller files and is most appropriate for photographs and similarly complex images. Lossless compression is best for logos, icons, text overlays, and graphics requiring sharp edges.
| 💡 You can compress your images before uploading them to your website with tools like Squoosh, Optimizilla, and TinyJPG/PNG. Play with the compression rate to find a good compromise between image size and quality. |
4. Replace GIFs with Video Formats for Large Animations
Everyone loves a good GIF.
Unfortunately, they are not the most efficient format for moving visuals, especially if they are longer.
For any GIF larger than 100KB, the Improve Image Delivery Insight will advise you to use video formats like MP4 or WebM instead. They provide smoother playback and better compression, meaning smaller file sizes, and you can use the HTML <video> element to control autoplay, looping, and display behavior.
| 💡 Tools to convert GIFs into those formats are Ezgif and the aforementioned CloudConvert. |
5. Adhere to Performance Best Practices
The points above cover the main factors the Improve Image Delivery Insight considers. But they are not the only steps you can take to ensure your website’s visuals load quickly.
Many other performance best practices indirectly influence how fast images load even if this performance metric doesn’t track them:
- Improve server response time: This impacts website performance as a whole, especially Time to First Byte (TTFB). A faster server reduces delays before image transfer even begins and is mostly a matter of choosing a good hosting provider.
- Use a Content Delivery Network (CDN): Places a copy of all or critical website files on computers all around the world. That way, visitors receive files from the location nearest to them, reducing delay caused by distance. There are also CDNs for especially images that offer on-the-fly resizing, compression, and caching.
- Enable caching: Caching means saving frequently used files in an easy-to-access location so that they are delivered more quickly. There are different types of caching (e.g. browser vs server) with varying ways of implementation.
- Apply lazy loading: In this case, image download is delayed until they become visible to a visitor. This can save a lot of unnecessary data transfer and blocking of more important files and visuals.
- Use fetchpriority and/or preload: These attributes tell browsers to prioritize files during page load. You can use them to ensure critical images load quickly.
- Track performance: Websites change all the time. Keeping an eye on performance over time allows you to quickly respond to issues that negatively impact speed, including those caused by images.
Optimizing Image Delivery with a Plugin
As we have seen above, there is a lot you can do to limit the impact of visuals on your website’s performance. But wouldn’t it be nice if you could automate it instead of having to implement them yourself one by one?
If that’s how you feel and you are a WordPress user, you are in luck. Everything we’ve mentioned so far is also possible via plugins. We’ll show you two examples.
Improve Performance with WP Rocket
WP Rocket is the easiest and most powerful performance plugin. Itcomes with numerous features to improve image delivery on your site. For example, with just a few clicks, you can enable lazy loading for images, CSS backgrounds, videos, and iframes. The plugin also makes it easy to connect your site to a Content Delivery Network (CDN).
Additionally, WP Rocket automatically implements critical image optimization. That means it excludes the LCP image from being lazy loaded, preloads it, and assigns fetchpriority=”high” to it.
What’s more, WP Rocket offers a host of general performance improvements that benefit your site as a whole. Implementing them will make your site faster across the board, which also helps it deliver images to visitors more quickly. They include:
- Caching (with a separate mobile cache)
- Automatic lazy rendering
- GZIP compression
- CSS and JavaScript minification
- Combining, deferring, and asynchronously loading JavaScript
- Delaying non-critical JavaScript until a user interaction
- Self-hosting Google Fonts for fewer external requests
- Database optimization
These features either activate automatically together with the plugin or are available through the same easy-to-use interface. Finally, Rocket Insights allows you to automatically monitor your top page’s performance over time.
t’s a performance monitoring tool integrated right into WP Rocket and powered by GTmetrix. Rocket Insights delivers in-depth performance data for the pages you add to the list. This helps you understand WP Rocket’s impact, allows you to quickly spot and troubleshoot performance issues and optimize what slows your site down in a central location.Reduce Image Size Using Imagify
While the above all helps optimize the environment in which your images appear, they don’t do anything about the visuals themselves. If you want to automate that part of the process, as well the perfect companion plugin to WP Rocket is Imagify — an image optimization plugin for WordPress.
It allows you to automatically convert images uploaded to your site to the WebP and AVIF formats as well as compress and resize them without loss of quality. You can perform these actions for existing images as well, both individually or in bulk.
Together, WP Rocket and Imagify are a dream team to ace Google’s Improve Image Delivery Insight. Just what kind of effect can they have? Let’s have a look at a real-life case study.
Case Study: Improve Image Delivery with WP Rocket and Imagify
For this test, we created a dummy website with a standard WordPress theme, a few common plugins, and an image-heavy front page.
After testing it with PageSpeed Insights, we found the following performance baseline.
| Mobile Performance score | 76 |
| First Contentful Paint | 3.2s |
| Largest Contentful Paint | 4.4s |
| Speed Index | 4.8s |
Not too bad but also nothing to write about. The speed testing tool also displayed the Improve Image Delivery Insight with sufficient potential to save 302KB.
From here, we installed and activated WP Rocket along with the following features:
- Remove unused CSS
- Defer and delay JavaScript
- Lazy loading for images, iframes, and videos
- Preload and self-host Google Fonts
We also set up Imagify and made sure to convert all images that appear on the test website’s homepage to WebP.
Here are the results afterwards:
| Mobile Performance score | 92 |
| First Contentful Paint | 1.5s |
| Largest Contentful Paint | 3.2s |
| Speed Index | 2.5s |
In addition, Improve Image Delivery was reduced to just 22KB of potential savings.
Most importantly, the changes took no longer than 10 minutes to implement, far faster than making these changes by hand.
Are You Ready to Improve Image Delivery on Your Website?
The speed at which images load has a direct and measurable impact on your website’s page experience and Core Web Vitals. That’s why Google’s Improve Image Delivery Insight provides clear guidance on when and where optimization is needed.
Ultimately, it comes down to keeping images as small as possible, optimizing their loading, and implementing general performance improvements that prevent load delays. WordPress users can rely on WP Rocket and Imagify to automate this process. Get WP Rocket today and test it risk-free for 15 days!
