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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-sizes-attribute-may-be-specified-only-if-the-srcset-attribute-is-also-present
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`

```html
<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

```html
<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

```html
<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:

```html
<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:

```html
<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.