Responsive images via srcset and picture for modern crawlers
Offer multiple resolutions so AI vision pipelines can pick the high-quality variant.
What this signal tests
We check that content images wider than 400 pixels expose multiple resolutions, either via a srcset attribute on <img> (with sizes for the breakpoint hints) or by being the <img> child of a <picture> element with one or more <source> children. At least half of large content images should use one of these techniques.
Why it matters for your visibility in AI
Single-resolution images force consumers to take whatever you served. Mobile viewers get a 4K hero image they did not need; vision models get a tiny thumbnail because that is all you published. With srcset, the consumer (browser or crawler) picks the size most appropriate for its needs. Multimodal AI models doing visual analysis prefer to pull a high-resolution variant because they can see more detail; their inference is materially better on larger images. Responsive markup also signals modern publishing hygiene. Sites that use srcset and <picture> tend to have a coherent image pipeline, which correlates with other quality signals (compression, format selection, metadata) that AI trust scoring picks up on. Sites still serving one fixed JPG per image tend to be older, less maintained, and less trusted by retrieval pipelines.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| >=50% of large content images use srcset or <picture>. |
How we test it
For each <img> element we measure the rendered or declared width. If wider than 400 pixels, we check whether the element has a srcset attribute with at least one additional URL, or whether its parent is a <picture> element with at least one <source> child. We report the percentage of large images that meet this bar.
Show technical detection method
For each <img> wider than 400px: has srcset OR is <img> child of <picture> with >=1 <source>.
If your site fails: how to fix it
- Add srcset and sizes to every content image larger than 400 pixels: <img src="hero.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w, hero-2400.jpg 2400w" sizes="(max-width: 600px) 100vw, 50vw">.
- For format negotiation (AVIF or WebP with JPG fallback), use <picture><source type="image/avif" srcset="..."><source type="image/webp" srcset="..."><img src="fallback.jpg"></picture>.
- If you use Next.js, Astro, or Eleventy, use the framework's built-in <Image> component, which generates srcset and <picture> automatically from a single source.
- For WordPress, the core srcset feature is on by default, but verify your theme actually outputs it (some older themes strip srcset). The Optimole, ShortPixel, and Smush plugins add picture-element support.
- For Shopify or Squarespace, check whether your theme uses the platform's responsive image helper (img_url with width parameter on Shopify, ImageLoader on Squarespace).
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | low |
| Category | Multimodal |
Primary sources
Related signals
Frequently asked questions
Does srcset matter for AI if browsers already handle it?
AI vision pipelines that fetch your images often parse srcset to pick the largest variant rather than the default src. Without srcset, they get the default, which is usually optimised for desktop browsers and may be smaller than ideal for vision models. With srcset, they reliably get the high-resolution version.
How many srcset variants should I generate?
Three to four widths typically covers it: a 1x and 2x mobile size, a 1x and 2x desktop size. More variants give finer-grained selection but cost more storage and CDN bandwidth. Use your analytics to identify the most common viewport widths and target those.
What about decorative images, icons, and thumbnails?
Small images (under 400 pixels) generally do not benefit from srcset. The check excludes them. Focus the effort on hero images, product photos, article headers, and any image where visual detail matters.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.