HTML Guides for sizes

The sizes attribute works together with the srcset attribute to help the browser choose the most appropriate image source for the current viewport and layout. Its value must follow a specific syntax: a comma-separated list where each entry is an optional media condition followed by a CSS length value. The final entry acts as a default and should be a length value without a media condition.

The value "auto" is not recognized as a valid CSS length or source size descriptor by the current HTML specification. While there is a newer sizes="auto" feature being developed for use specifically with loading="lazy" images, it is not yet universally part of the validated standard, and the W3C validator flags it as invalid. When the validator encounters auto, it expects a number (like 100vw or 50px) or a minus sign, but instead finds the letter “a”, producing this error.

Why This Matters

• Standards compliance: Using invalid attribute values means your HTML doesn’t conform to the specification, which could lead to unpredictable behavior across browsers.
• Responsive image loading: When sizes contains an invalid value, browsers may fall back to the default value of 100vw, which can cause them to download unnecessarily large images, hurting performance.
• Accessibility and tooling: Invalid HTML can cause issues with assistive technologies and automated tools that rely on well-formed markup.

How to Fix It

You have several options depending on your use case:

1. Specify explicit sizes — Provide a valid source size list that describes how wide the image will be displayed at various viewport widths.
2. Use a simple default — Set sizes to a single CSS length like "100vw" if the image always spans the full viewport width.
3. Remove sizes entirely — If you don’t use srcset with width descriptors, the sizes attribute is unnecessary and can be removed.
4. Use sizes="auto" with loading="lazy" — If you intentionally want the browser to determine sizes automatically for lazy-loaded images, be aware this is a newer feature that the validator may not yet support. You can suppress this specific warning if you’ve confirmed browser support meets your needs.

Examples

❌ Invalid: Using auto as the sizes value

<img
  src="photo.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="auto"
  alt="A scenic mountain view">

This triggers the error because auto is not a valid CSS length or source size descriptor.

✅ Fixed: Using a responsive source size list

<img
  src="photo.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
  alt="A scenic mountain view">

This tells the browser: use 100% of the viewport width on screens up to 600px, 50% on screens up to 1000px, and 33% on larger screens. The browser then picks the best image from srcset.

✅ Fixed: Using a simple default size

<img
  src="photo.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="100vw"
  alt="A scenic mountain view">

If the image always fills the full viewport width, 100vw is a straightforward valid value.

✅ Fixed: Removing sizes when srcset is not used

<img src="photo.jpg" alt="A scenic mountain view">

If you’re not using srcset with width descriptors, the sizes attribute serves no purpose and can be safely removed. Without it, the browser defaults to 100vw when interpreting any srcset width descriptors.

✅ Fixed: Using a fixed pixel width

<img
  src="photo.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="400px"
  alt="A scenic mountain view">

If the image is always displayed at a fixed width regardless of viewport size, you can specify that width directly as a CSS length value.

An empty sizes attribute on an img element is invalid; the attribute must contain a valid value or be omitted.

The sizes attribute specifies the slot width that the browser should use for selecting the appropriate image from those available in srcset. It should only be used when the srcset attribute is present. An empty string is not a valid value—if you do not have any sizes to specify, the attribute should be removed entirely.

Correct usage:

• Remove the empty sizes and srcset attributes if not needed.
• If specifying, provide valid values such as "100vw" or "(max-width: 600px) 100vw, 50vw".

Incorrect example:

<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1200w" sizes="" alt="">

Corrected example (with a valid sizes value):

<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1200w" sizes="100vw" alt="">

srcset contains candidates without a width descriptor while sizes is present, so each candidate must use a width (w) descriptor.

When an img has sizes, every srcset candidate must include a width descriptor like 320w, not a pixel density descriptor like 1x. Mixed descriptors are not allowed in the same srcset. Use either:

• Width descriptors with sizes (e.g., 320w, 640w, 1024w)
• Density descriptors without sizes (e.g., 1x, 2x)

The browser uses sizes to map CSS layout width to the best w candidate. Without sizes, density (x) can be used, but not together with sizes.

HTML examples

Reproduce the issue (invalid: sizes + x descriptors)

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Sample photo">

Fix using width descriptors with sizes (valid)

<img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Sample photo">

Alternative fix: remove sizes and use density descriptors (valid)

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  alt="Sample photo">

The sizes attribute works together with srcset to help the browser choose the most appropriate image source for the current layout. It accepts a comma-separated list of entries, where each entry is an optional media condition followed by a CSS length value (called a “source size value”). The browser evaluates these entries to determine the intended display width of the image before it downloads it. Valid length values include viewport-relative units like 100vw, absolute units like 472px, or calc() expressions like calc(100vw - 2rem).

The value auto was not part of the original HTML specification for the sizes attribute. However, the sizes="auto" value has been added to the HTML living standard specifically for use with lazy-loaded images (loading="lazy"). When both loading="lazy" and sizes="auto" are present, the browser can defer size calculation until layout time, since the image won’t be fetched immediately anyway. Some validators may not yet recognize this newer addition, or the error may appear because auto is being used without loading="lazy", or combined incorrectly with other size entries like sizes="auto, 100vw".

This validation error matters for several reasons. First, if the browser doesn’t understand the sizes value, it may fall back to a default of 100vw, which could cause it to download a larger image than necessary, hurting performance. Second, malformed attribute values can lead to unpredictable behavior across different browsers. Third, standards compliance ensures your markup works reliably now and in the future.

How to Fix

You have a few options depending on your situation:

1. Replace auto with a valid CSS length. If you know the intended display size of the image, specify it directly. This is the most broadly compatible approach.

2. Use sizes="auto" only with loading="lazy". If you want the browser to automatically determine the size, ensure you also include loading="lazy" and a width attribute on the image. Note that some validators may still flag this until they update their rules.

3. Remove auto from a comma-separated list. If you have something like sizes="auto, (max-width: 600px) 100vw, 50vw", remove the auto entry entirely.

Examples

Incorrect: Using auto without lazy loading

This triggers the validation error because auto is not a valid CSS length in the traditional sizes syntax.

<img
  src="image.jpg"
  srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
  sizes="auto, 100vw"
  alt="A scenic mountain landscape"
>

Fixed: Using a valid CSS length value

Replace auto with a concrete size or a set of media-conditioned sizes.

<img
  src="image.jpg"
  srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
  sizes="(max-width: 472px) 100vw, 472px"
  alt="A scenic mountain landscape"
>

In this example, when the viewport is 472 pixels wide or smaller, the image takes up the full viewport width (100vw). For wider viewports, the browser knows the image will display at 472px wide and selects the best source from srcset accordingly.

Fixed: Using auto with lazy loading

If you want the browser to determine the display size automatically, pair sizes="auto" with loading="lazy" and explicit dimensions.

<img
  src="image.jpg"
  srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
  sizes="auto"
  width="600"
  height="400"
  loading="lazy"
  alt="A scenic mountain landscape"
>

The width and height attributes help the browser reserve the correct space in the layout, and loading="lazy" allows the browser to defer both loading and size calculation until the image is near the viewport.

Fixed: Using calc() for dynamic sizing

If your image sits inside a container with padding, you can use calc() for a precise size hint.

<img
  src="image.jpg"
  srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
  sizes="calc(100vw - 2rem)"
  alt="A scenic mountain landscape"
>

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">

The sizes attribute contains an empty source size, probably due to a trailing comma.

According to the HTML standard, the sizes attribute on the img element must contain a valid source size list. Each size is separated by a comma, and there must not be a trailing comma because that would create an empty entry, which is not allowed.

An example of an invalid sizes attribute:

<img
  src="image.jpg"
  alt=""
  sizes="(min-width: 2200px) 100vw, (min-width: 856px) 461px, (min-width: 784px) 615px, "
  srcset="image-2200.jpg 2200w, image-856.jpg 856w">

To fix the validation error, remove the trailing comma so the size list does not end with an empty value:

<img
  src="image.jpg"
  alt=""
  sizes="(min-width: 2200px) 100vw, (min-width: 856px) 461px, (min-width: 784px) 615px"
  srcset="image-2200.jpg 2200w, image-856.jpg 856w">

Each value in the sizes attribute should be a valid media condition and source size, separated only by commas, with no trailing or empty values.

The sizes and srcset attributes work together to enable responsive images, but they serve distinct roles and use different syntax. The srcset attribute lists available image files along with their intrinsic widths using the w descriptor (e.g., 800w means the image file is 800 pixels wide). The sizes attribute, on the other hand, tells the browser how wide the image will actually be rendered in the layout, using standard CSS length units. The browser combines this information — knowing which files are available and how large the image will appear — to choose the most efficient file to download.

A common mistake is mixing up these two syntaxes, typically by copying a width descriptor like 860w from srcset and placing it into sizes. Since w is not a CSS unit, the validator rejects it. This matters because an invalid sizes value prevents the browser from correctly calculating which image source to use, potentially causing it to download an unnecessarily large image (wasting bandwidth) or a too-small image (resulting in poor quality).

How the sizes attribute works

The sizes attribute accepts a comma-separated list of media conditions paired with CSS lengths, plus an optional default length at the end. Each entry follows the pattern (media-condition) length. The browser evaluates the conditions in order and uses the length from the first matching condition. If none match, it uses the final default value.

Valid CSS length units include px, em, rem, vw, vh, ch, cm, mm, in, pt, pc, and CSS calc() expressions. You can combine units with calc() for more precise sizing — for example, calc(100vw - 2rem).

Examples

❌ Incorrect: using w in sizes

This triggers the validation error because 860w is a srcset width descriptor, not a CSS length:

<img
  alt="A landscape photo"
  sizes="860w"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correct: using px in sizes

Replace the w value with a CSS length that reflects the image’s actual display size:

<img
  alt="A landscape photo"
  sizes="860px"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correct: responsive sizes with media conditions

Use media conditions to specify different display sizes at different viewport widths:

<img
  alt="A landscape photo"
  sizes="(min-width: 1024px) 860px, (min-width: 568px) 430px, 100vw"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

This tells the browser:

• On viewports 1024px and wider, the image displays at 860px wide.
• On viewports 568px and wider, the image displays at 430px wide.
• On smaller viewports, the image fills the full viewport width (100vw).

✅ Correct: using calc() in sizes

When the image width depends on padding or margins, calc() provides precise sizing:

<img
  alt="A landscape photo"
  sizes="(min-width: 768px) calc(50vw - 2rem), calc(100vw - 1rem)"
  srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  src="photo-medium.jpg">

Key takeaways

• The w descriptor belongs only in srcset, where it describes the intrinsic width of each image file.
• The sizes attribute uses CSS length units (px, vw, em, calc(), etc.) to describe how wide the image will appear on screen.
• If your image always displays at a fixed width, a simple value like sizes="300px" is sufficient.
• If your image width varies by viewport, use media conditions with appropriate CSS lengths to give the browser the information it needs to select the best source.

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.

sizes only accepts a valid media condition list (e.g., (min-width: 600px) 50vw, 100vw); malformed media conditions or missing length values trigger this parse error.

Detailed explanation

• Element: source in a picture or audio/video context. For responsive images, use attributes srcset, optional media, and optional sizes.
• Attribute: sizes applies only when srcset contains width descriptors (e.g., 320w, 640w). It is a comma-separated list of:
  • One or more media conditions followed by a length (e.g., (min-width: 800px) 50vw)
  • A final fallback length with no media condition (e.g., 100vw)

Common parse errors:

• Missing parentheses around conditions: min-width: 600px → (min-width: 600px)
• Using invalid units or tokens: 50 (needs a length like 50vw or 50rem)
• Missing length after a condition: (min-width: 800px)
• Trailing commas or malformed separators
• Using sizes while srcset uses pixel density descriptors (1x, 2x); sizes is ignored for x-descriptors and may confuse validators
• Valid media condition syntax mirrors CSS media queries without the @media keyword. Use logical operators and, or, not per CSS Media Queries spec, and ensure spaces and colons are correct.

HTML examples

• Correct responsive image with width descriptors and sizes

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

• Using viewport width units for simpler sizing

  <img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="Sample photo">

• Correct when using pixel density descriptors (omit sizes)

  <img
  src="avatar@1x.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  alt="User avatar">

Fixing common mistakes

• Add parentheses and a length:

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

• Remove stray comma and ensure final fallback:

  <img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px) 60vw, 100vw"
  alt="Banner">

• Minimal valid document example

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Valid sizes Attribute</title>
  </head>
  <body>
    <img
      src="pic-800.jpg"
      srcset="pic-400.jpg 400w, pic-800.jpg 800w"
      sizes="(min-width: 600px) 50vw, 100vw"
      alt="Picture">
  </body>
  </html>

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.

The sizes attribute and the srcset attribute work together as a system for responsive images. The srcset attribute provides the browser with a list of image candidates (typically at different widths or pixel densities), while the sizes attribute tells the browser how much space the image will occupy in the layout. The browser uses both pieces of information together to pick the most appropriate image file to download.

When you specify sizes without srcset, the attribute has no purpose. There’s only one image source (the src attribute), so the browser has nothing to choose from, and the layout hints provided by sizes are meaningless. The HTML specification explicitly states that the sizes attribute must not be present unless srcset is also specified with width descriptors (w). This isn’t just a stylistic concern — it signals to validators and other tools that the markup is incomplete or incorrect, which could indicate a copy-paste error or a missing attribute.

This issue commonly occurs when:

• The srcset attribute is accidentally removed during refactoring, leaving sizes orphaned.
• A developer adds sizes in preparation for responsive images but forgets to add srcset.
• Code is copied from a template and partially modified.

Examples

❌ Invalid: sizes without srcset

<img
  src="photo.jpg"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A landscape photo">

The sizes attribute is present, but there is no srcset to provide multiple image candidates. The browser has no use for the sizing information.

✅ Fix: Add a matching srcset attribute

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

Now sizes tells the browser: “Below 600px viewports, the image fills 100% of the viewport width; otherwise it fills 50%.” The browser combines this with the width descriptors in srcset to select the best image.

✅ Fix: Remove sizes if you don’t need responsive images

<img
  src="photo.jpg"
  alt="A landscape photo">

If you only have a single image source and don’t need responsive behavior, simply remove the sizes attribute.

✅ Using sizes with <source> inside <picture>

The same rule applies to <source> elements inside a <picture> block:

<picture>
  <source
    srcset="photo-dark-400.jpg 400w, photo-dark-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    media="(prefers-color-scheme: dark)">
  <img
    src="photo.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="A landscape photo">
</picture>

Each element that uses sizes also includes a corresponding srcset with width descriptors.

A note on srcset with pixel density descriptors

The sizes attribute is specifically designed for use with width descriptors (w) in srcset. If you’re using pixel density descriptors (x) instead, sizes is not needed:

<img
  src="photo.jpg"
  srcset="photo-2x.jpg 2x, photo-3x.jpg 3x"
  alt="A landscape photo">

In this case, the browser selects based on device pixel ratio rather than viewport size, so sizes would be unnecessary.

The sizes attribute and the srcset attribute are designed to work as a pair for responsive image delivery. The srcset attribute provides the browser with a list of image files and their intrinsic widths (e.g., 480w, 800w), while the sizes attribute tells the browser how much space the image will occupy in the layout at different viewport sizes. The browser combines this information to select the most appropriate image file to download.

When sizes appears without srcset, it serves no purpose. The browser has only the single image specified in the src attribute, so there’s no decision to make about which image to load. The HTML specification explicitly requires that sizes must not be present unless srcset is also specified with width descriptors.

This error commonly occurs when a CMS or templating system outputs the sizes attribute by default, when srcset is accidentally removed during refactoring, or when developers copy markup snippets without including all the necessary attributes.

Beyond standards compliance, leaving orphaned sizes attributes creates confusing, harder-to-maintain code. Other developers (or your future self) may assume responsive images are configured when they aren’t, leading to wasted debugging time.

How to fix it

You have two options:

1. Add a srcset attribute if you want the browser to choose from multiple image sizes based on viewport width. The srcset must use width descriptors (w) for sizes to be meaningful.
2. Remove the sizes attribute if you don’t need responsive images and a single src is sufficient.

Note that sizes is also valid on <source> elements inside a <picture> element — the same rule applies there. Every <source> with a sizes attribute must also have a srcset attribute.

Examples

❌ Incorrect: sizes without srcset

<img
  src="image.jpg"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

The sizes attribute is present but there’s no srcset, so the browser has no alternative images to pick from.

✅ Correct: sizes paired with srcset

<img
  src="image-800w.jpg"
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

Here, srcset provides two images with their intrinsic widths. The sizes attribute tells the browser: “If the viewport is 600px or narrower, the image will display at 480px wide; otherwise, it will display at 800px wide.” The browser uses this information to download the most efficient file.

✅ Correct: removing sizes when responsive images aren’t needed

<img src="image.jpg" alt="A mountain landscape">

If a single image is sufficient, simply drop the sizes attribute.

❌ Incorrect: sizes on a <source> without srcset

<picture>
  <source
    media="(min-width: 800px)"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

✅ Correct: sizes on a <source> with srcset

<picture>
  <source
    media="(min-width: 800px)"
    srcset="wide-480w.jpg 480w, wide-960w.jpg 960w"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

The <source> element now includes a srcset with width descriptors, giving the browser the candidate images it needs to make use of sizes.

A srcset attribute with width descriptors requires a sizes attribute on the img element.

When you use width descriptors (e.g., 400w, 800w) in the srcset attribute, the browser needs the sizes attribute to correctly select the appropriate image source based on the layout size in the viewport. Without sizes, the HTML is invalid, and the browser cannot resolve how large the image will be displayed.

Explanation

The srcset attribute allows you to provide multiple image sources for different screen conditions. There are two types of descriptors in srcset: width descriptors (e.g., 400w) and pixel density descriptors (e.g., 2x). When using width descriptors, you must include a sizes attribute to describe the expected display width of the image in CSS pixels. This helps browsers pick the best matching source.

Correct Usage Example

<img
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Responsive example">

Incorrect Usage Example

<img
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  alt="Responsive example">

(Missing sizes attribute)

Explanation of the correct example:

• The srcset attribute lists two images with their respective pixel widths.
• The sizes attribute tells the browser to use 100vw (100% of the viewport width) if the viewport is 600px wide or less, and otherwise use 600px as the display width.