HTML check: Bad value X for attribute “sizes” on element “source”: Expected units (one of “em”, “ex”, “ch”, “rem”, “vw”, “vh”, “vmin”, “vmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found Y at Z

About This HTML Issue

A sizes attribute on a <source> element contains a length value that is missing valid CSS units or uses an unrecognized unit.

The sizes attribute tells the browser how wide an image will be displayed at a given viewport condition. Each entry in the sizes list is either a media condition paired with a source size value, or a default source size value. The source size value must be a valid CSS length, which means it requires a recognized unit such as px, vw, em, or rem. Bare numbers without units, percentage values (%), or made-up units are not allowed.

A common mistake is writing a bare number like 300 instead of 300px, or using % instead of vw. The % unit is explicitly disallowed in sizes because the browser needs to resolve image widths before layout is complete, and percentage lengths depend on a containing block that may not be known yet. Use vw (viewport width) when you want a percentage-like relative size.

The sizes attribute applies to <source> elements inside a <picture>, and also to <img> elements directly.

Invalid example

<picture>
  <source
    srcset="image-480.jpg 480w, image-800.jpg 800w"
    sizes="(max-width: 600px) 100%, 50%"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A sample photo">
</picture>

The validator rejects 100% and 50% because % is not a permitted unit in sizes.

Fixed example

<picture>
  <source
    srcset="image-480.jpg 480w, image-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A sample photo">
</picture>

Replace % with vw, or use any other valid CSS absolute or relative length unit (px, em, rem, etc.). A calc() expression with valid units also works, for example calc(100vw - 2rem).