Skip to main content

HTML Guide

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.

Invalid sizes syntax in the <img> sizes attribute causes the validator error; each size value must be a valid CSS length with units and optional media condition.

Detailed explanation

The sizes attribute on responsive images (used with srcset) tells the browser how wide the image will be in CSS pixels under certain media conditions so it can choose the best candidate from srcset. It must be a comma-separated list of one or more size descriptors:

  • Optional media condition followed by a length: (<media-condition>) <length>
  • Or a final fallback length without media condition: <length>

Valid length units include: 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. Percentages are not allowed in sizes. Bare numbers without units are invalid. The media condition must be valid per CSS Media Queries (e.g., (max-width: 600px)), and each list item must have exactly one length value.

Common mistakes that trigger this error:

  • Missing units: sizes="(max-width: 600px) 100" → must be 100px or another unit.
  • Using %: sizes="(max-width: 600px) 100%" → percentages are invalid in sizes.
  • Multiple lengths per item: sizes="(min-width: 800px) 50vw 400px" → only one length per item.
  • Typos in units: 100 pxx, 100vws.
  • Missing fallback: while not strictly required if all conditions cover all cases, providing a final fallback length avoids unexpected behavior.

Ensure sizes pairs correctly with srcset; srcset provides image candidates with width descriptors (w), and sizes expresses the slot width the image will occupy.

HTML examples

Correct usage with media conditions and fallback

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

Fixing missing units (was 100 -> 100px)

<img
  src="avatar-200.jpg"
  srcset="avatar-200.jpg 200w, avatar-400.jpg 400w"
  sizes="(max-width: 480px) 100vw, 200px"
  alt="User avatar">

Avoiding invalid percentages (use vw instead)

<img
  src="banner-800.jpg"
  srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 80vw"
  alt="Promotional banner">

Single unconditional size (no media condition)

<img
  src="thumb-320.jpg"
  srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
  sizes="320px"
  alt="Thumbnail">

Correct srcset with sizes alignment

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w"
  sizes="(min-width: 1200px) 800px, (min-width: 800px) 60vw, 90vw"
  alt="Landscape photo">

If the validator pinpoints a position (Z), check that token for a missing or invalid unit, extra tokens after the length, or malformed media condition.

Learn more:

Last updated on

Related W3C validator issues