Why is this an issue?

The srcset attribute on <img> and <source> elements provides a list of image candidates so the browser can pick the most appropriate one based on display density or layout. Each candidate is expressed as a URL optionally followed by a descriptor. Only two descriptor forms are valid:

When a descriptor is omitted or invalid, the entry falls back to 1x. While allowed by the spec, it is good practice to define a valid and explicit descriptor on every entry to make the developer’s intent visible and avoid silent fallbacks.

This rule does not flag a single-URL srcset on a <source> element when media or type is set and no descriptor is written: those are art direction and format negotiation patterns, where the parent attribute already discriminates and the implicit 1x fallback is unambiguous. When the author does write an explicit descriptor on such an element, it must still be valid — otherwise the browser silently drops the candidate and the <source> contributes no image.

How to fix it

Add a valid descriptor to every entry of the srcset attribute. Use a pixel density descriptor (1x, 2x, 1.5x, …​) when the image renders at the same CSS size across all viewports, or a width descriptor (400w, 800w, …​) together with a sizes attribute when the image renders at different CSS sizes depending on layout.

Code examples

Noncompliant code example

<img src="logo.png"
     srcset="logo-retina.png, logo-ultra.png 3x"
     alt="Logo"> <!-- Noncompliant: "logo-retina.png" has no descriptor -->

<img src="photo-medium.jpg"
     srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Photo"> <!-- Noncompliant: "photo-large.jpg" has no descriptor -->

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x">  <!-- Noncompliant: "logo.png" has no descriptor -->
  <img src="logo.png" alt="Logo">
</picture>

Compliant solution

<img src="logo.png"
     srcset="logo-retina.png 2x, logo-ultra.png 3x"
     alt="Logo">

<img src="photo-medium.jpg"
     srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Photo">

<picture>
  <source srcset="logo.png 1x, logo-1.5x.png 1.5x">
  <img src="logo.png" alt="Logo">
</picture>

Resources

Documentation