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

The srcset attribute supports two types of descriptors: width descriptors (e.g., 480w) and pixel density descriptors (e.g., 2x). These two types cannot be mixed, and the sizes attribute is specifically designed to work with width descriptors. The sizes attribute tells the browser how wide the image will be displayed at various viewport sizes, so the browser can then pick the best image from srcset based on the widths you’ve provided. If any candidate in srcset lacks a width descriptor — or uses a density descriptor instead — the browser can’t perform this calculation, and the HTML is invalid.

This matters for several reasons. First, browsers rely on the combination of sizes and width descriptors to make intelligent decisions about which image to download before the layout is computed. An invalid srcset can lead to the browser ignoring the entire attribute or selecting a suboptimal image, wasting bandwidth or displaying a blurry result. Second, standards compliance ensures consistent behavior across all browsers and devices.

A common mistake is specifying sizes while using density descriptors (1x, 2x) or providing bare URLs without any descriptor in srcset. If you want to use density descriptors, simply remove the sizes attribute. If you want responsive image selection based on viewport width, use width descriptors for every candidate.

Examples

Incorrect: Using density descriptors with sizes

<picture>
  <source
    srcset="image-small.jpg 1x, image-large.jpg 2x"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>

This triggers the error because 1x and 2x are density descriptors, but the sizes attribute requires width descriptors.

Incorrect: Missing descriptor on one candidate

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

Here, image-small.jpg has no descriptor at all. When sizes is present, every candidate must have a width descriptor.

Correct: All candidates use width descriptors with sizes

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

Each image candidate now specifies a width descriptor (400w, 800w), which matches the requirement imposed by the sizes attribute.

Correct: Using density descriptors without sizes

If you only need density-based selection (e.g., for retina displays) and don’t need viewport-based sizing, remove the sizes attribute entirely:

<picture>
  <source srcset="image-small.jpg 1x, image-large.jpg 2x">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>

Correct: Using srcset with width descriptors on <img>

The same rules apply when using srcset directly on an <img> element:

<img
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  src="photo-640.jpg"
  alt="A mountain landscape">

Every candidate in srcset includes a width descriptor, making this fully valid alongside the sizes attribute. The src attribute serves as the fallback for browsers that don’t support srcset.

Learn more:

MDN Reference

MDN: HTMLImageElement.srcset

→