Skip to main content

HTML Guide

Bad value X for attribute “sizes” on element “img”: Bad media condition: Parse Error at Y.

sizes contains an invalid media condition; the value must be a comma-separated list of media conditions with corresponding slot sizes, ending with an optional fallback length.

Detailed explanation:

  • The sizes attribute on img pairs a media condition with a slot size that represents the layout width of the image for that condition. Syntax: (<media-condition>) <length>[, ...], <length> where the last item can be a bare length fallback.
  • A media condition uses the same grammar as CSS media queries. It must be valid CSS, e.g., (min-width: 600px) or (width <= 50rem) and (orientation: landscape). Each condition must be enclosed in parentheses unless using logical operators combining proper conditions.

Common parse errors:

  • Missing parentheses: use (min-width: 600px), not min-width: 600px.
  • Invalid units or tokens: use px, em, rem, vw, etc.; avoid % in media conditions.
  • Missing slot size after a condition: (min-width: 600px) must be followed by a length like 600px.
  • Using px only for slot size without units or using percentages: slot size must be a length like 300px, 50vw, not 300.
  • Trailing comma or extra commas.
  • Misusing comparison syntax: use modern range syntax like (600px <= width <= 1000px) or the traditional form (min-width: 600px) and (max-width: 1000px). Do not write (min-width <= 600px).
  • Slot sizes must be lengths: px, em, rem, vw, vh, vmin, vmax, ch. Percentages are not allowed in sizes slot sizes.
  • The srcset widths (w descriptors) must correspond to the intrinsic widths of the image candidates, e.g., 400w, 800w. The browser picks one based on sizes.

HTML examples:

  • Correct usage with media conditions and fallback: 

    <img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(min-width: 900px) 50vw, (min-width: 600px) 66vw, 100vw"
  alt="Decorative pattern">

  • Using range syntax and avoiding common mistakes: 

    <img
  src="hero-1600.jpg"
  srcset="hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
  sizes="(800px <= width < 1200px) 80vw, (width >= 1200px) 50vw, 100vw"
  alt="Hero banner">

  • Minimal fixed example for a typical error (missing parentheses and slot size): Incorrect: 

    <img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="min-width: 600px, 100vw" alt="Sample">

    Correct: 

    <img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="(min-width: 600px) 50vw, 100vw" alt="Sample">

  • Example avoiding invalid tokens and commas: 

    <img
  src="avatar-256.png"
  srcset="avatar-128.png 128w, avatar-256.png 256w"
  sizes="(orientation: landscape) 30vw, 50vw"
  alt="User avatar">

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 “media” on element “link”: Parse Error.
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”: 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.
An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.