Images in a suitable size

What we check

We load the home page in a real browser and look at all images that are at least 400 pixels wide (not counting SVG graphics). For each we check whether it is offered in several sizes, through the srcset attribute or the <picture> element.

• If there are at least two large images and none of them in several sizes, there is a warning.
• If there are only individual large images in only one size, a note.

If the page loads images with JavaScript (lazy loading with a placeholder), only a tiny placeholder is there when the page opens. We judge such images by their displayed size and by the image source the script loads later. If no source can be recognised, they are not assessed and appear in the detail view.

Why it matters

A header image that appears 2000 pixels wide on a large screen is perhaps 400 pixels wide on a smartphone. With only one version the smartphone loads the large image anyway, often five to ten times the data volume needed.

For visitors on the move this means:

• longer loading time, especially with average reception,
• more data volume used,
• a later main content, which shows in the LCP metric and thus at Google.

With srcset the page describes several versions of the same image. The browser chooses the suitable one itself, depending on screen width and pixel density.

How to fix it

WordPress

WordPress automatically creates several sizes on upload and sets srcset by itself, provided the image is inserted through the media library. If srcset is missing, it usually has one of these reasons:

• The image is included as a background image in the CSS, for example in a page builder section. Background images have no srcset. Many builders offer separate background images for desktop, tablet and smartphone, though.
• The image was inserted with a fixed address instead of through the media library.
• A slider or gallery plugin always outputs the original. Check its settings or switch the plugin.

Wix, Jimdo, Squarespace

The builders deliver images in a suitable size automatically. If something is still reported here, the images often come from embedded third-party widgets.

Own code

<img src="team-800.webp"
     srcset="team-400.webp 400w, team-800.webp 800w, team-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="1600" height="1067" alt="Our team">

sizes tells the browser how wide the image appears on the page. This way it can choose the suitable version before the layout.

How to check it yourself

Right-click a large image and choose "Inspect". If the <img> element has a srcset attribute with several entries, everything is fine.

Frequently asked questions

What is the difference from the article "Images"?

That one is about the format and size of each image. This one is about whether the page offers different versions in different sizes to different devices. Together they result in fast images on every device.

Does every image have to be uploaded in several sizes?

No. A CMS such as WordPress creates the versions automatically on upload. An original that is large enough is uploaded, and the system does the rest.