The “sizes” attribute must only be specified if the “srcset” attribute is also specified.

The sizes attribute and the srcset attribute are designed to work as a pair for responsive image delivery. The srcset attribute provides the browser with a list of image files and their intrinsic widths (e.g., 480w, 800w), while the sizes attribute tells the browser how much space the image will occupy in the layout at different viewport sizes. The browser combines this information to select the most appropriate image file to download.

When sizes appears without srcset, it serves no purpose. The browser has only the single image specified in the src attribute, so there’s no decision to make about which image to load. The HTML specification explicitly requires that sizes must not be present unless srcset is also specified with width descriptors.

This error commonly occurs when a CMS or templating system outputs the sizes attribute by default, when srcset is accidentally removed during refactoring, or when developers copy markup snippets without including all the necessary attributes.

Beyond standards compliance, leaving orphaned sizes attributes creates confusing, harder-to-maintain code. Other developers (or your future self) may assume responsive images are configured when they aren’t, leading to wasted debugging time.

How to fix it

You have two options:

1. Add a srcset attribute if you want the browser to choose from multiple image sizes based on viewport width. The srcset must use width descriptors (w) for sizes to be meaningful.
2. Remove the sizes attribute if you don’t need responsive images and a single src is sufficient.

Note that sizes is also valid on <source> elements inside a <picture> element — the same rule applies there. Every <source> with a sizes attribute must also have a srcset attribute.

Examples

❌ Incorrect: sizes without srcset

<img
  src="image.jpg"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

The sizes attribute is present but there’s no srcset, so the browser has no alternative images to pick from.

✅ Correct: sizes paired with srcset

<img
  src="image-800w.jpg"
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

Here, srcset provides two images with their intrinsic widths. The sizes attribute tells the browser: “If the viewport is 600px or narrower, the image will display at 480px wide; otherwise, it will display at 800px wide.” The browser uses this information to download the most efficient file.

✅ Correct: removing sizes when responsive images aren’t needed

<img src="image.jpg" alt="A mountain landscape">

If a single image is sufficient, simply drop the sizes attribute.

❌ Incorrect: sizes on a <source> without srcset

<picture>
  <source
    media="(min-width: 800px)"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

✅ Correct: sizes on a <source> with srcset

<picture>
  <source
    media="(min-width: 800px)"
    srcset="wide-480w.jpg 480w, wide-960w.jpg 960w"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

The <source> element now includes a srcset with width descriptors, giving the browser the candidate images it needs to make use of sizes.

Learn more:

MDN Reference

MDN: sizes attribute

→

MDN Reference

MDN: srcset attribute

→