Serves images with appropriate resolution

Text on the web automatically wraps at the screen's edge, so it doesn't overflow. It's different with images. Images have an intrinsic size. If an image is wider than the screen, the image will overflow, causing a horizontal scrollbar to appear.

Using responsive images means the page serves three to five different sizes or resolutions of the same image. Serving more image sizes is better for performance, but it will take up more space on your servers and require writing more HTML.

Why it is important

Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.

Using responsive images creates a better and faster user experience.

How the audit works

Sitefig uses Lighthouse to detect images served with incorrect resolutions.

Sitefig runs the lighthouse test with a mobile browser device emulation, to test for smaller screen sizes.

If an image is larger than the space it takes up in the browser, the audit will fail. However, some adjustments are made for small and large images.

The audit adapts to image size:

• The size must be proportional to the density for smaller images, typically icons.
• For larger images, some tolerance is allowed; in those cases, the perceived degradation is not that bad.

Fixing the problem

Serving responsive images in the right size and resolution might require additional testing to get this right.

But, if you are implementing responsive images and the only things that changes is the resolution and size, the most convenient method is to use the <img> element with a srcset attribute

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="responsive image example"> This syntax allows the browser to take care of the necessary changes.