The sizes Attribute — Telling the Browser How Big Your Image Will Be

Understanding the sizes Attribute

The sizes attribute is the missing piece that makes srcset truly effective. It tells the browser how wide the image will be displayed at various viewport widths — before the image is downloaded.

Syntax

The sizes attribute accepts a comma-separated list of media conditions paired with length values:

sizes="(max-width: 640px) 100vw,
       (max-width: 1024px) 50vw,
       33vw"

This reads: "Below 640px viewport, the image is 100% of viewport width. Below 1024px, it's 50%. Otherwise, it's 33%."

How the Browser Uses sizes

1. The browser evaluates each media condition left to right
2. The first matching condition's length is used
3. The last entry (without a condition) is the default
4. This length, combined with the device pixel ratio, determines which srcset image to download

Common Patterns

Layout	sizes Value
Full-width image	100vw
Two-column grid	(max-width: 768px) 100vw, 50vw
Three-column grid	(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw
Fixed-width sidebar	(max-width: 768px) 100vw, calc(100vw - 300px)
Card in grid	(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw

Common Mistake

The most common mistake is omitting sizes entirely. Without it, the browser defaults to 100vw, which means on a 1440px desktop viewport with 2x DPR, the browser would look for a 2880px-wide image — even if the image only displays at 400px wide. This wastes enormous bandwidth.

Using calc()

You can use calc() for more precise values:

sizes="(max-width: 768px) calc(100vw - 2rem), calc(50vw - 3rem)"

This accounts for padding and gutters in your layout.