Encoding images at with an efficient image format at the right quality level can give a performance boost to your website.
In this article, we will explore image compression types and their effect on page speed, showing how optimized images can deliver high quality content sooner to the visitor.
What is efficient image encoding?
Image encoding minimizes file size while maintaining visual quality by compressing the image. Encoding images can help performance by reducing load times and bandwidth usage. There are two forms of image compression to be aware of: lossy and lossless.
Lossy compression
Lossy compression reduces file size by permanently removing some image data, which may result in reduced quality. JPEG is a lossy image format.
Lossless compression
Lossless compression reduces file size without losing image quality. The original image can be perfectly restored after decompression. PNG is a lossless image format.
Understanding lossy and lossless can help make you decide which encoding process is best for your website. If your website shares high quality art, then lossless may be preferred. However, if delivering a fast experience for your visitors is a priority then lossy may be the most suitable option.
Modern image formats like WebP and AVIF offer a balance between quality and compression, providing even better performance for web optimization.
Efficient and inefficient image compression
When compressing images, the goal is to improve user experience by providing a faster page load. However, caution should be practiced as to compress images efficiently in order to not sacrifice image quality. In the comparison below, we can see an original JPEG image with the file size of 734 kb.
When compressing the image to 85%, the file size is now 617kb. This can be considered as efficient encoding with over 100 kb saved without compromising the image quality.
However, when compressing more aggressively to 5%, the size savings come with an obvious deterioration in image quality.
Why does efficient image encoding matter?
Efficient image encoding allows the browser to download and deliver images faster to the user. Improving use experience and also Largest Contentful Paint (LCP).
In the request waterfall below we have a demo page which has an uncompressed LCP image. By viewing the LCP sub-parts we can see a load duration of 1.23 seconds. Due to the large file size of the image causing a high load duration, the LCP score is 1.72 seconds.
After encoding the image, the file size has reduced from 734 kb to 207 kb. This reduction in file size has a direct impact on the load duration, as the browser is able to download the image sooner. The new LCP score for the page is 891 ms.
Efficiently encoding the image has improved the LCP score by almost 1 second, without compromising on image quality.
How to check if images are encoded efficiently
Google's Lighthouse website analysis tool can identify whether images are encoded efficiently on your page. Look for the Efficiently encode images audit in the performance diagnostics.
When an audit fails, an analysis listing the images and their potential savings is presented.
Images are only reported in this audit if larger than 4 kb.
Lighthouse also lists potential savings from using efficient image encoding. In this example, it would bring the resource size down from 33 kilobytes to just 11.9 kilobytes.
How to improve image encoding
To better compress your images, you can either use an image hosting service or manually compress your images.
Using an image hosting services
There are several platforms to help you serve optimized images on your website. Imgix is an image processing service that takes your original file and serves it an a more efficient format
Once your image source is set up, find Parameter Defaults and set the quality to 80. This setting ensures a smaller file size while maintaining high quality, without needing to update the image from your website directly.
Manually compressing images
You can also edit images on your website directly. One quick solution to compress images is the Squoosh web app. Drop or paste your image into the app to begin the compression process.
To compress the image, drag the slider to the desired quality and then download it. The compressed image can then replace the original image on your website.
Monitor image page weight and performance impact
DebugBear can help monitor page weight over time and alert you to any regressions. Setting performance budgets means you can receive a notification if page weight or LCP exceeds a certain value.
Request waterfalls make identifying potential file size savings for images easy. Any larger file sizes are highlighted in orange or red, allowing you to make optimizations and compare to previous results.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data