Bad value X for attribute “srcset” on element “img”: Expected width descriptor but found Y at Z. (When the “sizes” attribute is present, all image candidate strings must specify a width.)

The srcset attribute allows you to provide the browser with a set of image sources to choose from based on the user’s viewport size or display density. Each entry in srcset is called an image candidate string and consists of a URL followed by an optional descriptor — either a width descriptor (like 300w) or a pixel density descriptor (like 2x).

The sizes attribute tells the browser what display size the image will occupy at various viewport widths, using media conditions and length values. The browser uses this size information together with the width descriptors in srcset to select the most appropriate image. This is why the HTML specification requires that when sizes is present, all srcset entries must use width descriptors — without them, the browser cannot perform the size-based selection that sizes is designed to enable.

This error typically appears in three situations:

1. A srcset entry has no descriptor at all — the URL is listed without any accompanying width or density value.
2. A pixel density descriptor (x) is used alongside sizes — mixing sizes with x descriptors is invalid because the two mechanisms are mutually exclusive.
3. A typo or formatting issue — for example, writing 600px instead of 600w, or placing a comma incorrectly.

Why this matters

• Standards compliance: The WHATWG HTML Living Standard explicitly states that when sizes is specified, all image candidates must use width descriptors.
• Correct image selection: Without proper width descriptors, browsers cannot accurately determine which image to download. This may lead to unnecessarily large downloads on small screens or blurry images on large screens.
• Performance: Responsive images are a key performance optimization. A malformed srcset defeats the purpose and can result in wasted bandwidth.

How to fix it

1. Determine the intrinsic width (in pixels) of each image file listed in srcset.
2. Append the width descriptor to each URL in the format [width]w, where [width] is the image’s actual pixel width.
3. Ensure no entries use x descriptors when sizes is present. If you need density descriptors, remove the sizes attribute entirely.
4. Make sure every entry has a descriptor — bare URLs without any descriptor are invalid when sizes is used.

Examples

Missing width descriptor

This triggers the validation error because the srcset URL has no width descriptor:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>

Fixed by adding the width descriptor:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>

Using pixel density descriptors with sizes

This is invalid because x descriptors cannot be combined with the sizes attribute:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>

Fixed by switching to width descriptors:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 800w, /img/photo-2x.jpg 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>

Alternatively, if you only need density-based selection and don’t need sizes, remove it:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  alt="A sunset over the mountains"
>

Multiple image sources with width descriptors

A complete responsive image setup with several sizes:

<img
  src="/img/photo-800.jpg"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"
  alt="A sunset over the mountains"
>

Each URL is paired with a w descriptor that matches the image’s intrinsic pixel width. The sizes attribute then tells the browser how wide the image will display at each breakpoint, allowing it to pick the best candidate.

Learn more:

MDN Reference

MDN Web Docs: <img>: The Image Embed element

→

MDN Reference

MDN: Responsive images guide

→

WHATWG Spec

WHATWG HTML Standard: Embedded content

→