Black Friday Sale - 15% off Yearly PRO Plans!

Use code BF2022 to get 15% off the first year of any Yearly PRO Plan!

Details and conditions

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

PageSpeed: Serve scaled images

Overview

Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices.

Read More

How does your site score on this recommendation?

But my site is responsive…

It can be tempting to serve high-resolution images to all users when catering for displays of varying pixel density. The compressive images technique often yields smaller file sizes with better perceived quality, so that option should definitely be evaluated, however just be aware that higher resolution images will always require more memory and take longer to decode, so it's important to also consider low-powered devices with standard-resolution displays. For this reason, we recommend making use of the srcset attribute. Browser support is very good, and lagging browsers can be helped along with Scott Jehl's picturefill. Take at look at his example usages when determining the most appropriate implementation for your site.

Further details from Google

Sometimes you may want to display the same image in various sizes, so you will serve a single image resource and use HTML or CSS in the containing page to scale it.

For example, you may have a 10 x 10 thumbnail version of a larger 250 x 250 image, and rather than forcing the user to download two separate files, you use markup to resize the thumbnail version. This makes sense if the actual image size matches at least one - the largest - of the instances in the page, in this case 250 x 250 pixels. However, if you serve an image that is larger than the dimensions used in all of the markup instances, you are sending unnecessary bytes over the wire. You should use an image editor to scale images to match the largest size needed in your page, and make sure that you specify those dimensions in the page as well.

Read our Lighthouse documentation to learn more about serving properly sized images.

Summary

Images
High
Moderate
67%

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×