HTML sizes Attribute

Introduction

The sizes attribute tells the browser how wide an image will be displayed in the page layout at different viewport widths. It works together with srcset on <img> and <source> so the browser can download a file that matches the rendered size—saving bandwidth and improving performance on phones, tablets, and desktops.

Unlike the form size attribute on <select> and <input>, sizes is part of the responsive images feature set. It does not set CSS dimensions by itself; it is a hint for resource selection when multiple image files are available.

What You’ll Learn

Purpose of sizes

The primary purpose of the sizes attribute is to describe the rendered width (the “slot”) of an image in your layout. When you provide several files in srcset with width descriptors such as 400w and 800w, the browser needs to know how large the image will appear on screen to pick the best candidate—especially on high-DPI (Retina) displays.

Without sizes, browsers assume the image spans the full viewport width (100vw), which can cause unnecessarily large downloads when your CSS actually shows a smaller image (for example, a 300px sidebar thumbnail).

📝 Syntax

Pair sizes with srcset width descriptors on <img>:

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

Syntax Rules

• Value is a comma-separated list of media condition + length pairs, plus a final default length.
• Each entry: (media-query) length — e.g. (max-width: 600px) 100vw.
• The last item has no media query and acts as the fallback slot size.
• Lengths can use px, vw, vh, em, rem, or % (relative to the viewport for percentages in this context).
• Use with srcset containing w width descriptors for responsive selection.
• Also valid on <source> inside <picture> when that source has srcset.
• If omitted, the default is 100vw.

💎 Values

The sizes attribute accepts a source-size list. Common patterns:

• (max-width: 600px) 100vw — Full viewport width on small screens.
• (max-width: 1200px) 50vw — Half the viewport on medium layouts (e.g. two-column grid).
• 300px — Fixed 300px slot as the final fallback on large screens.
• (min-width: 900px) 33vw, 100vw — One-third width on wide screens, full width otherwise.
• auto — On <source>, can defer to intrinsic sizing in some cases (use with care).

<!-- Mobile full width, tablet half, desktop fixed -->
sizes="(max-width: 600px) 100vw,
       (max-width: 1200px) 50vw,
       300px"

<!-- Card grid: 1 col mobile, 3 cols desktop -->
sizes="(min-width: 1024px) 33vw, 100vw"

Applicable Elements

size vs sizes vs srcset

Examples Gallery

Responsive img with srcset, dynamic JavaScript updates, and picture with source sizes.

👀 Live Preview

sizes with three srcset candidates. Resize the window to change the layout slot:

Below 600px the slot is 100vw; up to 1200px it is 50vw; above that, 120px. The label on the SVG shows which file the browser selected.

Example — Responsive img with sizes

Define layout slots so the browser picks an appropriate file from srcset:

sizes.html

Copy

<img
  src="hero-800.jpg"
  alt="Hero banner"
  srcset="hero-400.jpg 400w,
            hero-800.jpg 800w,
            hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           300px">

View Output Try It Yourself

📤 Output:

• Viewport ≤ 600px → image slot = 100vw (full width)
• 601px–1200px → slot = 50vw (half width)
• > 1200px → slot = 300px fixed

How It Works

The browser evaluates media conditions top to bottom. The first match sets the slot width. It multiplies by device pixel ratio and compares against srcset widths to choose the smallest adequate file.

Dynamic Values with JavaScript

Update img.sizes when layout changes at runtime:

dynamic-sizes.html

Copy

<img id="dynamicImage" src="photo.jpg" alt="..."
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="800px">

<script>
  var image = document.getElementById("dynamicImage");
  function updateSizes() {
    if (window.innerWidth < 600) {
      image.sizes = "100vw";
    } else if (window.innerWidth < 1200) {
      image.sizes = "50vw";
    } else {
      image.sizes = "300px";
    }
  }
  updateSizes();
  window.addEventListener("resize", updateSizes);
</script>

View Output Try It Yourself

📤 Output:

When the sidebar opens or the grid reflows, updating sizes lets the browser re-evaluate which srcset file to use.

How It Works

The sizes IDL attribute reflects the content attribute. Changing it after layout shifts (resize, panel toggle, orientation change) keeps downloads aligned with the actual display size.

Example — picture and source

Use sizes on a <source> inside <picture> for art direction or resolution switching:

picture-sizes.html

Copy

<picture>
  <source
    media="(min-width: 700px)"
    srcset="banner-wide.jpg 800w, banner-wide@2x.jpg 1600w"
    sizes="(min-width: 1200px) 800px, 50vw">
  <img src="banner-narrow.jpg" alt="Promotional banner">
</picture>

View Output Try It Yourself

📤 Output:

Wide viewports match the source and use its sizes hint; narrow viewports fall back to the img.

How It Works

media on source picks which candidate set applies. sizes on that same source then guides width-based selection within the matched set.

♿ Accessibility

• Always include alt text — sizes affects which file loads, not accessibility text. Every <img> still needs a meaningful alt.
• Do not hide content in smaller files — If you serve different crops via picture, ensure essential information is available at all breakpoints.
• Respect user zoom — Layout slots should account for text zoom and high-DPI screens; test with increased font size.
• Avoid layout shift — Set width and height (or aspect-ratio in CSS) so images reserve space while loading.
• Decorative images — Use alt="" for purely decorative responsive images; sizes works the same.

💡 Best Practices