Skip to main content

HTML Guide

Bad value X for attribute “sizes” on element “source”: Expected units (one of “em”, “ex”, “ch”, “rem”, “cap”, “ic”, “vw”, “svw”, “lvw”, “dvw”, “vh”, “svh”, “lvh”, “dvh”, “vi”, “svi”, “lvi”, “dvi”, “vb”, “svb”, “lvb”, “dvb”, “vmin”, “svmin”, “lvmin”, “dvmin”, “vmax”, “svmax”, “lvmax”, “dvmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found Y at Z.

Use a valid media length in the sizes attribute; each slot’s length must include a unit (e.g., px, vw) and cannot be unitless.

Detailed explanation

The sizes attribute on responsive images (<img> or <source> within <picture>) specifies, for each media condition, the slot size that the image will occupy in the layout. Each size value must be a valid CSS length with units, or the keyword auto (for <img> only; not useful with <source>). Unitless numbers (e.g., 300) are invalid; use 300px. Percentages are not allowed in sizes. Valid units include: px, em, rem, vw, vh, and the full set listed by the validator (e.g., svw, lvh, cm, etc.).

Common pitfalls:

  • Missing units: sizes="(min-width: 768px) 600, 100vw" → 600 must be 600px.
  • Using %: sizes="50%" is invalid; use a viewport unit like 50vw.
  • Malformed list: values must be comma-separated media conditions followed by a length, ending with a fallback length.
  • Putting sizes on <source> is valid, but syntax must match the same rules as on <img>.

Reference keywords:

  • sizes
  • srcset
  • media (on <source>)
  • CSS length units

Valid pattern

  • With conditions: sizes="(media-condition) length, ... , fallback-length"
  • Without conditions: sizes="fallback-length"

HTML examples

Fix missing units

Before (invalid):

<picture>
  <source
    type="image/webp"
    srcset="hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(min-width: 900px) 800, 100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(min-width: 900px) 800, 100vw"
    alt="Hero image">
</picture>

After (valid):

<picture>
  <source
    type="image/webp"
    srcset="hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(min-width: 900px) 800px, 100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(min-width: 900px) 800px, 100vw"
    alt="Hero image">
</picture>

Replace percentage with viewport units

Before (invalid):

<picture>
  <source
    media="(min-width: 600px)"
    srcset="card-600.webp 600w, card-900.webp 900w"
    sizes="50%">
  <img
    src="card-600.jpg"
    srcset="card-600.jpg 600w, card-900.jpg 900w"
    sizes="50%"
    alt="Product card">
</picture>

After (valid):

<picture>
  <source
    media="(min-width: 600px)"
    srcset="card-600.webp 600w, card-900.webp 900w"
    sizes="50vw">
  <img
    src="card-600.jpg"
    srcset="card-600.jpg 600w, card-900.jpg 900w"
    sizes="50vw"
    alt="Product card">
</picture>

Clean, minimal example with multiple slots

<picture>
  <source
    type="image/avif"
    srcset="banner-480.avif 480w, banner-960.avif 960w, banner-1440.avif 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw">
  <img
    src="banner-480.jpg"
    srcset="banner-480.jpg 480w, banner-960.jpg 960w, banner-1440.jpg 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw"
    alt="Responsive banner">
</picture>

If the validator reports “found Y at Z,” inspect the exact character at position Z for a missing unit, stray %, or malformed comma/whitespace, then replace with a valid CSS length unit.

Learn more:

Last updated on

Related W3C validator issues

Bad value X for attribute “sizes” on element “source”: Bad media condition: Parse Error at Y
A “source” element that has a following sibling “source” element or “img” element with a “srcset” attribute must have a “media” attribute and/or “type” attribute.
Bad value “auto” for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto”.
Bad value “” for attribute “sizes” on element “img”: Must not be empty.
Bad value X for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto,”.
Bad value X for attribute “sizes” on element “img”: Bad media condition: Parse Error at Y.
Bad value X for attribute “sizes” on element “img”: Empty source size at Y.
Bad value X for attribute “sizes” on element “img”: Expected units (one of “em”, “ex”, “ch”, “rem”, “cap”, “ic”, “vw”, “svw”, “lvw”, “dvw”, “vh”, “svh”, “lvh”, “dvh”, “vi”, “svi”, “lvi”, “dvi”, “vb”, “svb”, “lvb”, “dvb”, “vmin”, “svmin”, “lvmin”, “dvmin”, “vmax”, “svmax”, “lvmax”, “dvmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found “w” at Y
Bad value X for attribute “sizes” on element “img”: Expected units (one of “em”, “ex”, “ch”, “rem”, “cap”, “ic”, “vw”, “svw”, “lvw”, “dvw”, “vh”, “svh”, “lvh”, “dvh”, “vi”, “svi”, “lvi”, “dvi”, “vb”, “svb”, “lvb”, “dvb”, “vmin”, “svmin”, “lvmin”, “dvmin”, “vmax”, “svmax”, “lvmax”, “dvmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found Y at Z.
Bad value X for attribute “srcset” on element “source”: Must contain one or more image candidate strings.