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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-sizes-attribute-must-only-be-specified-if-the-srcset-attribute-is-also-specified
> 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 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`

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

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

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

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

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