# Bad value “” for attribute “imagesizes” on element “link”: Must not be empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-imagesizes-on-element-link-must-not-be-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `imagesizes` attribute is used exclusively on `<link>` elements that have `rel="preload"` and `as="image"`. It works in tandem with the `imagesrcset` attribute to allow the browser to preload the most appropriate image from a set of candidates — mirroring how `sizes` and `srcset` work on an `<img>` element. When the browser encounters these attributes on a `<link>`, it can begin fetching the right image resource early, before it even parses the `<img>` tag in the document body.

When `imagesizes` is set to an empty string (`""`), the browser has no information about the intended display size of the image, which defeats the purpose of responsive image preloading. The browser cannot select the best candidate from `imagesrcset` without knowing how large the image will be rendered. An empty value is invalid per the HTML specification, which requires the attribute to contain a valid source size list (the same syntax used by the `sizes` attribute on `<img>`).

This matters for both **performance** and **standards compliance**. Responsive preloading is a performance optimization — an empty `imagesizes` undermines that by leaving the browser unable to make an informed choice. From a standards perspective, the validator correctly rejects the empty value because the attribute's defined value space does not include the empty string.

## How to fix it

- **Provide a valid sizes value** that matches the `sizes` attribute on the corresponding `<img>` element in your page. This tells the browser how wide the image will be at various viewport widths.
- **Remove `imagesizes` entirely** if you don't need responsive preloading. If you're preloading a single image (using `href` instead of `imagesrcset`), you don't need `imagesizes` at all.

## Examples

### ❌ Bad: empty `imagesizes` attribute

```html
<link
  rel="preload"
  as="image"
  imagesrcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="">
```

The empty `imagesizes=""` triggers the validation error and prevents the browser from selecting the correct image candidate.

### ✅ Fixed: providing a valid sizes value

```html
<link
  rel="preload"
  as="image"
  imagesrcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px">
```

The `imagesizes` value uses the same syntax as the `sizes` attribute on `<img>`. It provides media conditions paired with lengths, with a fallback length at the end. This value should match the `sizes` attribute on the corresponding `<img>` element in your markup.

### ✅ Fixed: simple full-width image

```html
<link
  rel="preload"
  as="image"
  imagesrcset="banner-640.jpg 640w, banner-1280.jpg 1280w"
  imagesizes="100vw">
```

If the image spans the full viewport width, `100vw` is a straightforward and valid value.

### ✅ Fixed: removing the attribute when not needed

```html
<link rel="preload" as="image" href="logo.png">
```

If you're preloading a single, non-responsive image, omit both `imagesrcset` and `imagesizes` and use the `href` attribute instead. The `imagesizes` attribute is only meaningful when paired with `imagesrcset`.