Properly size images
This means that the URL contains images that are larger than the size they are rendered at.
Why is this important?
On different devices, images will render at different sizes, depending on the size of the viewport. Serving images that are larger than the screen size available means that the browser needs to resize the images down to fit. From a user perspective, this means that they need to unnecessarily download useless data, which increases load time and is a waste of cellular data.
What does the Hint check?
This Hint will trigger for any internal URL that contains images which are not appropriately-sized.
In order to do this, Sitebulb collects all the images on the page, then compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the check.
How do you resolve this issue?
Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that just results in wasted bytes and slows down page load time.
Running a Lighthouse audit on any affected pages will show the equivalent opportunity, listing all images on the page that aren't appropriately sized, along with the potential savings in kibibytes (KiB). Resizing these images will save data and improve page load time.
The main strategy for serving appropriately-sized images on an ongoing basis is to use 'responsive images', where you create multiple versions of each image at different sizes, then specify which version to use on different screen sizes, via media queries.
Other solutions include utilising image CDNs to handle image optimization, or using vector-based image formats, like SVG, which can be scaled to any size.
This issue should be discussed with your developer to determine the most appropriate method, based on the specific site setup and resources available.
Further Reading
- Properly size images (Lighthouse documentation)
- How to properly size images
- How to optimize images for website performance
