Properly size images
This should be considered as a high priority optimization. It can have a significant impact on the overall performance, especially when the potential KB savings are high. It cannot be fixed by WP Rocket, but with other tools.
Images are an important part of many websites, but, you need to have a good balance between your images and the website performance.
When PageSpeed shows this opportunity for your website it means that the images on your site are uploaded at a larger size than the size at which they are displayed in the browser.
When we use an image that is very large but is displayed on the site in a much smaller size, the browser has to waste time and resources to resize the image. This is inefficient and slows down the page load.
PageSpeed compares the size of the image as it is displayed on your site, with the actual size of the image. If there is a saving of 4KB or more due to the incorrect size, the image will be flagged.
In the video below you can see the impact on the user experience of uploading images of an appropriate size on our website:
Can you see the difference on the load time of those images? As you can see, the image on the right loads faster.
Why does this happen if they seem to be the same image? Let’s take a closer look.
If we inspect the first image you will see this:
The image occupies just 300x200 pixels in the browser, but the real size of this image is 2050x1364 pixels.
If we do the same with the second image, you will see this:
This image occupies 300x200 pixels in the browser and its size is exactly the same.
And if you check the file size of each image, you will see there is a big difference:
As you can see, properly sizing images can also reduce the size of the website.
Let’s see how PageSpeed triggers this opportunity when test this URL:
As you can see, only the image that is being resized in the browser is listed by PageSpeed. And there is a potential savings of 3,441.7KiB (3.4MB) which is significant. Sizing this image correctly will have a big impact on the performance of the site.
How to size your images correctly
There are multiple tools that can be used to scale the images to an appropriate size. You can get further information in the following links: