The sizes Attribute for Responsive Images

Technical Deep Dive & Specifications

The Specification Anatomy of the sizes Attribute

According to the WHATWG specification, the sizes attribute consists of a comma-separated list of source size entries, ending with a default fallback size:

sizes="(media-condition-1) source-size-1,
       (media-condition-2) source-size-2,
       default-fallback-size"

                     +---------------------------------------+
                     |            sizes ATTRIBUTE            |
                     +---------------------------------------+
                                         |
     +-----------------------------------+-----------------------------------+
     |                                   |                                   |
     v                                   v                                   v
[Media Condition 1]             [Media Condition 2]                 [Default Fallback]
(min-width: 1200px) 33vw        (min-width: 768px) 50vw             100vw
"On screens >= 1200px,          "On screens >= 768px,               "On all smaller
 image takes 33% of viewport"    image takes 50% of viewport"        screens, takes 100%"

How the Browser Evaluates sizes and srcset

Let's trace the browser's exact runtime mathematical calculation:

Example Markup:

<img 
  srcset="product-400.jpg 400w,
          product-800.jpg 800w,
          product-1200.jpg 1200w"
  sizes="(min-width: 1024px) 33.3vw,
         (min-width: 640px) 50vw,
         100vw"
  src="product-800.jpg"
  alt="Wireless Noise-Cancelling Headphones"
  width="1200"
  height="800"
>

Evaluation Steps on a Desktop Screen ($1440\text{px}$ Viewport, $2\times \text{DPR}$):

1. Match Media Conditions in Order:
   • (min-width: 1024px) evaluates to TRUE ($1440 \ge 1024$).
   • Browser stops checking further media conditions.
2. Compute Slot Width: $$\text{Slot Width} = 33.3% \times 1440\text{px} = 480\text{ CSS px}$$
3. Multiply by Device Pixel Ratio ($2\times$): $$\text{Target Physical Pixels} = 480\text{px} \times 2 = 960\text{ physical px}$$
4. Select Candidate from srcset:
   • product-400.jpg ($400\text{w}$) $\rightarrow$ Too small ($400 < 960$).
   • product-800.jpg ($800\text{w}$) $\rightarrow$ Too small ($800 < 960$).
   • product-1200.jpg ($1200\text{w}$) $\rightarrow$ Selected! ($1200 \ge 960$).

Valid Units & Functions Inside sizes

[!CAUTION] You cannot use percentage units (%) inside sizes (e.g. sizes="50%" is invalid). Percentages refer to parent element widths, which require CSS layout computation. Use vw (viewport width) instead.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 57–59 (srcset="... 400w, ... 800w, ... 1200w"): Provides three discrete resolution candidates.
• Line 60 (sizes="(min-width: 1024px) 380px, ..."): On desktop screens where the maximum container is capped at 1200px in a 3-column grid, the image slot never exceeds approximately 380px. Declaring 380px prevents the browser from downloading unnecessary 4K images on wide desktop monitors!
• Line 61 ((min-width: 640px) 50vw): In 2-column tablet mode, allocates 50% of the viewport width.
• Line 62 (100vw): On mobile screens, allocates the entire viewport width.

Expected Browser Render Output

+-------------------------------------------------------------+
| Smart Audio Collection                                      |
|                                                             |
| [ 1-Col Mobile (<640px) ]    [ 2-Col Tablet (640-1023px) ]  |
| +-------------------------+  +------------+  +------------+ |
| | [ HEADPHONE IMAGE ]     |  | [ IMAGE ]  |  | [ IMAGE ]  | |
| | Slot: 100vw             |  | Slot: 50vw |  | Slot: 50vw | |
| +-------------------------+  +------------+  +------------+ |
| Acoustic Pro Max - $349      Acoustic Pro    Studio Earbuds |
+-------------------------------------------------------------+