srcset: serving the right image size for the screen

What srcset is

srcset lists several versions of the same image. In its width form each candidate carries a w descriptor and sizes tells the browser how wide the image will be rendered; in its density form each carries 1x or 2x and no sizes is used. Either way the browser picks one file before it downloads anything.

Without it there is one file for everyone. A hero sized for a 2560-pixel display is downloaded in full by a phone that will render it 390 pixels wide, which is most of the wasted bytes on a typical page. In a width-descriptor set, sizes matters as much as the candidates: with no sizes the browser assumes the image fills the viewport. <picture> solves a related but different problem: choosing between formats, or between differently cropped images at different breakpoints.

What squirrel checks

The rule runs on every crawled page. It counts every img[src] with and without a srcset attribute, and separately counts <picture> elements. It emits a single check named srcset:

• Skipped when the page has no images. Message: No images found.
• Pass when responsive images exist and none are fixed-size. Message: All 8 image(s) are responsive.
• Info when both exist. Message: 8 responsive, 4 fixed-size image(s), with Consider adding srcset for remaining images as the value.
• Info when none are responsive. Message: 12 image(s) without responsive srcset, with Add srcset for multiple image sizes as the value.

Severity info, weight 3. The responsive count adds the srcset images and the <picture> elements together, so an <img srcset> inside a <picture> contributes to both halves of that sum.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="800" height="533" alt="…"
/>

Generate the variants at build time or through an image CDN. For a fixed-size image, the density form is shorter: srcset="/logo.png 1x, /logo@2x.png 2x" and no sizes at all.

Icons, logos and anything rendered at a fixed small size do not need this.

Enable / disable

Disable this rule

[rules]
disable = ["images/srcset"]

Disable all Images rules

[rules]
disable = ["images/*"]

Enable only this rule

[rules]
enable = ["images/srcset"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• images/picture-element: the picture markup this rule also counts.
• images/responsive-size: small images whose files are heavier than their displayed size needs.
• images/image-file-size: the file weight srcset is there to reduce.
• images/modern-format: the other half of the same optimisation.

Images findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Responsive images, MDN
• The img element, MDN

Check your site

Run squirrel audit https://example.com and open the Images section of the report. Each page is reported with its responsive and fixed-size image counts. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.