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

The srcset attribute supports two types of descriptors: width descriptors (like 480w) and pixel density descriptors (like 2x). However, these two types cannot be mixed, and the sizes attribute is only compatible with width descriptors. The sizes attribute tells the browser how wide the image will be displayed at various viewport sizes, and the browser uses this information along with the width descriptors in srcset to choose the most appropriate image file. If sizes is present but an image candidate lacks a width descriptor, the browser cannot perform this calculation correctly.

This matters for several reasons. First, it violates the WHATWG HTML specification, which explicitly requires that when sizes is present, all image candidates must use width descriptors. Second, browsers may ignore malformed srcset values or fall back to unexpected behavior, resulting in the wrong image being loaded — potentially hurting performance by downloading unnecessarily large files or degrading visual quality by selecting a too-small image. Third, standards-compliant markup ensures consistent, predictable behavior across all browsers and devices.

A common mistake is specifying a plain URL without any descriptor, or mixing density descriptors (1x, 2x) with the sizes attribute. An image candidate string without any descriptor defaults to 1x, which is a density descriptor — and that conflicts with the presence of sizes.

Examples

❌ Incorrect: Missing width descriptor with sizes present

<picture>
  <source
    srcset="image-small.jpg, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="A scenic landscape">
</picture>

Here, image-small.jpg has no width descriptor. Since sizes is present, this triggers the validation error.

❌ Incorrect: Using density descriptors with sizes

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-fallback.jpg"
  alt="A scenic landscape">

Density descriptors (1x, 2x) are incompatible with the sizes attribute.

✅ Correct: All candidates have width descriptors

<picture>
  <source
    srcset="image-small.jpg 480w, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="A scenic landscape">
</picture>

Every image candidate now includes a width descriptor, which pairs correctly with the sizes attribute.

✅ Correct: Using density descriptors without sizes

If you want to use density descriptors instead of width descriptors, simply remove the sizes attribute:

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  src="image-fallback.jpg"
  alt="A scenic landscape">

This is valid because density descriptors don’t require (and shouldn’t be used with) the sizes attribute.

✅ Correct: Width descriptors on <img> with sizes

<img
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 400px) 320px, (max-width: 800px) 640px, 1280px"
  src="photo-640.jpg"
  alt="A close-up of a flower">

Each entry in srcset specifies its intrinsic width, and sizes tells the browser which display width to expect at each breakpoint. The browser then selects the best-fitting image automatically.

Learn more:

MDN Reference

MDN: HTMLImageElement.srcset

→