Bad value X for attribute “sizes” on element “img”: Empty source size at Y.

The sizes attribute works alongside srcset to tell the browser how wide an image will be displayed at various viewport sizes, so the browser can choose the most appropriate image source before the page layout is computed. The attribute value is a comma-separated list where each entry consists of an optional media condition followed by a source size value (a CSS length). The final entry in the list acts as the default size and should not include a media condition.

When the browser parses the sizes attribute and encounters an empty entry — meaning there is nothing meaningful between two commas or after a trailing comma — it cannot resolve that entry to a valid source size. The HTML living standard’s parsing algorithm treats this as an error. While most browsers will silently ignore the empty entry and still render the image, the malformed attribute can lead to unexpected behavior and indicates a code quality issue that should be addressed.

Common causes of this error include:

• A trailing comma at the end of the sizes value (e.g., "100vw, 50vw, ").
• Double commas in the middle of the list (e.g., "100vw, , 50vw").
• Dynamically generated values where a template or CMS outputs a comma even when a size entry is conditionally omitted.

Fixing the issue is straightforward: ensure every comma in the list separates two valid source size entries, and that the list neither begins nor ends with a comma.

Examples

Trailing comma (invalid)

The most common cause — a comma after the last entry creates an empty source size:

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

Trailing comma fixed

Remove the trailing comma so the list ends with a valid entry:

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

Double comma in the middle (invalid)

A double comma creates an empty entry between two valid sizes:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, , 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Double comma fixed

Remove the extra comma so each entry is separated by exactly one comma:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Dynamically generated sizes with an empty entry (invalid)

Templates or CMS platforms sometimes output commas for entries that are conditionally empty:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, , (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

Dynamically generated sizes fixed

Ensure the template logic only outputs a comma when a valid entry follows:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

If your sizes attribute is built dynamically, consider filtering out empty values before joining them with commas, or trimming trailing commas from the final output. A well-formed sizes attribute should always consist of one or more valid entries separated by single commas, with the last entry serving as the default source size (typically something like 100vw).

Learn more:

MDN Reference

MDN Web Docs: Responsive images

→

MDN Reference

MDN Web Docs: <img>: The Image Embed element

→

MDN Reference

MDN Web Docs: <picture>: The Picture element

→