Bad value for attribute “srcset” on element “img”: No width specified for image X. (When the “sizes” attribute is present, all image candidate strings must specify a width.)

When an img element has a sizes attribute, every image candidate in the srcset attribute must include a width descriptor (like 480w), not a pixel density descriptor (like 2x) or a bare URL.

The srcset attribute accepts two types of descriptors, but they cannot be mixed, and the choice depends on whether sizes is present.

Width descriptors (w) tell the browser the actual pixel width of each source image. The browser then uses the sizes attribute to determine how much space the image will occupy in the layout and picks the best candidate from srcset. This pairing of srcset with width descriptors and sizes is how responsive image selection works.

Pixel density descriptors (x) tell the browser which image to use based on the device's pixel density (e.g., 1x for standard screens, 2x for retina). When using density descriptors, the sizes attribute has no role and should be omitted.

The validation error appears when sizes is present but one or more entries in srcset lack a w descriptor. A bare URL with no descriptor is treated as 1x by default, which conflicts with the requirement that sizes demands width descriptors.

Invalid example

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg, photo-800.jpg 2x"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A landscape photo">

Here, photo-400.jpg has no descriptor (defaults to 1x), and photo-800.jpg uses 2x. Because sizes is present, the validator expects every candidate to specify a width.

Fixed example

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A landscape photo">

Each candidate now includes a width descriptor that reflects the image's intrinsic width in pixels. The browser compares these widths against the resolved sizes value to choose the most appropriate source.

If you do not need sizes and just want to serve different images for different pixel densities, drop the sizes attribute and use density descriptors instead:

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 1x, photo-800.jpg 2x"
  alt="A landscape photo">

Learn more:

MDN Reference

MDN: Responsive images - srcset with sizes

→

MDN Reference

MDN: Responsive images guide

→

WHATWG Spec

WHATWG HTML Standard: Embedded content

→