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

The sizes attribute and the srcset attribute work together as a system for responsive images. The srcset attribute provides the browser with a list of image candidates (typically at different widths or pixel densities), while the sizes attribute tells the browser how much space the image will occupy in the layout. The browser uses both pieces of information together to pick the most appropriate image file to download.

When you specify sizes without srcset, the attribute has no purpose. There’s only one image source (the src attribute), so the browser has nothing to choose from, and the layout hints provided by sizes are meaningless. The HTML specification explicitly states that the sizes attribute must not be present unless srcset is also specified with width descriptors (w). This isn’t just a stylistic concern — it signals to validators and other tools that the markup is incomplete or incorrect, which could indicate a copy-paste error or a missing attribute.

This issue commonly occurs when:

• The srcset attribute is accidentally removed during refactoring, leaving sizes orphaned.
• A developer adds sizes in preparation for responsive images but forgets to add srcset.
• Code is copied from a template and partially modified.

Examples

❌ Invalid: sizes without srcset

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

The sizes attribute is present, but there is no srcset to provide multiple image candidates. The browser has no use for the sizing information.

✅ Fix: Add a matching srcset attribute

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

Now sizes tells the browser: “Below 600px viewports, the image fills 100% of the viewport width; otherwise it fills 50%.” The browser combines this with the width descriptors in srcset to select the best image.

✅ Fix: Remove sizes if you don’t need responsive images

<img
  src="photo.jpg"
  alt="A landscape photo">

If you only have a single image source and don’t need responsive behavior, simply remove the sizes attribute.

✅ Using sizes with <source> inside <picture>

The same rule applies to <source> elements inside a <picture> block:

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

Each element that uses sizes also includes a corresponding srcset with width descriptors.

A note on srcset with pixel density descriptors

The sizes attribute is specifically designed for use with width descriptors (w) in srcset. If you’re using pixel density descriptors (x) instead, sizes is not needed:

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

In this case, the browser selects based on device pixel ratio rather than viewport size, so sizes would be unnecessary.

Learn more:

MDN Reference

HTMLImageElement.srcset guide

→