Responsive images, srcset: Crawl Audit check 106

Short answer: a phone doesn't need the same 2,000 pixel image as a large monitor. With srcset or <picture>, you offer several sizes and the browser picks the smallest that looks right. Check 106 warns when a page has images but none of them offer sizes.

What Crawl Audit checks

• Pass: no images, or at least one <img srcset> or <picture><source srcset>.
• Warning: images but no srcset at all.

One responsive image is enough to pass, so check your largest images, especially the one at the top of the page.

What MDN says

• "mobile users don't want to waste bandwidth by downloading a large image intended for desktop users, when a small image would do for their device."
• In MDN's example, the 800 pixel version of a picture is 128KB and the 480 pixel version 63KB, about half.
• <picture> lets you swap in a different crop or format. It still needs an <img> with src and alt inside, "otherwise no images will appear."

<img src="/shop-800.webp"
     srcset="/shop-480.webp 480w, /shop-800.webp 800w, /shop-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533" alt="Inside the shop">

On your platform

• WordPress: adds srcset automatically for images from the media library.
• Squarespace: "creates up to seven versions of that image, each with a different width."
• Next.js: next/image generates srcset for you.
• Shopify and Wix: check how your theme outputs images, and any added as raw HTML.

On devmarde.com

All seven images on our homepage had srcset on 6 October, generated by next/image.

Sources

• MDN, Using responsive images in HTML, checked 6 October 2026.
• Squarespace, Formatting images; Next.js, Image component.