Recommendations

PageSpeed
YSlow

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.

Summary

Images
High
Moderate
71%