Responsive Images with srcset Attribute

Technical Deep Dive & Specifications

Understanding Device Pixel Ratio (DPR)

Device Pixel Ratio is the ratio between physical hardware pixels on the screen and logical CSS reference pixels:

$$\text{DPR} = \frac{\text{Physical Hardware Pixels}}{\text{CSS Logical Pixels}}$$

• 1x Standard Screen (Legacy desktop monitors): $1 \text{ CSS px} = 1 \text{ Physical px}$
• 2x High-DPI Screen (Apple Retina, modern laptops): $1 \text{ CSS px} = 4 \text{ Physical px}$ ($2 \times 2$ grid)
• 3x Ultra-High-DPI Screen (Modern flagship smartphones): $1 \text{ CSS px} = 9 \text{ Physical px}$ ($3 \times 3$ grid)

   1x Standard Display (DPR = 1.0)           2x Retina Display (DPR = 2.0)
   +-----------------------------+          +--------------+--------------+
   |                             |          | Physical px  | Physical px  |
   |     1 CSS Logical Pixel     |          +--------------+--------------+
   |     (1 Physical Pixel)      |          | Physical px  | Physical px  |
   +-----------------------------+          +--------------+--------------+
                                            (4 Physical Pixels per 1 CSS Pixel)

Paradigm 1: Pixel Density Descriptors (1x, 2x, 3x)

Use pixel density descriptors when the image maintains a fixed CSS display width on all screens (e.g., an author avatar that is always fixed at $64\times 64\text{px}$):

<img 
  src="avatar-1x.jpg" 
  srcset="avatar-1x.jpg 1x,
          avatar-2x.jpg 2x,
          avatar-3x.jpg 3x" 
  alt="Dr. Aris Thorne"
  width="64" 
  height="64"
>

How the Browser Evaluates Pixel Density:

1. The browser checks window.devicePixelRatio.
2. On a standard desktop monitor (DPR = 1), it downloads avatar-1x.jpg (64×64px).
3. On a MacBook Pro Retina (DPR = 2), it downloads avatar-2x.jpg (128×128px).
4. On an iPhone Pro (DPR = 3), it downloads avatar-3x.jpg (192×192px).

Paradigm 2: Width Descriptors (w) for Fluid Responsive Layouts

On responsive websites, images rarely have fixed pixel dimensions; they scale fluidly (e.g., width: 100%). A fixed 2x descriptor fails here because a $2\times$ screen on a tiny phone requires fewer physical pixels than a $1\times$ screen on a massive 4K monitor.

Width descriptors declare the intrinsic natural pixel width of each source file using the w unit:

<img 
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  alt="Alpine mountain valley"
  width="1600"
  height="900"
>

   Image Candidate File       Natural Width       Width Descriptor in srcset
   --------------------       -------------       --------------------------
   hero-400.jpg               400 pixels          400w
   hero-800.jpg               800 pixels          800w
   hero-1200.jpg              1200 pixels         1200w
   hero-1600.jpg              1600 pixels         1600w

[!IMPORTANT] The w descriptor describes the actual file width in raw pixels, NOT the CSS display width! Never append px inside srcset (e.g., 400px is invalid; use 400w).

The Browser Candidate Selection Formula

When the browser encounters srcset with width descriptors:

1. It determines the target display slot width (in CSS pixels). (Without a sizes attribute, it assumes 100vw by default).
2. It multiplies the slot width by the screen's devicePixelRatio: $$\text{Required Physical Pixels} = \text{Slot Width (CSS px)} \times \text{DPR}$$
3. It scans the srcset list and selects the smallest candidate file whose natural width is $\ge \text{Required Physical Pixels}$.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 46 (src="...w=80..."): Standard fallback source URL. Ensures ancient or non-compliant browsers still render an image.
• Line 47–49 (srcset="... 1x, ... 2x, ... 3x"): Comma-separated list of image URLs paired with density descriptors.
• Line 51–52 (width="80" height="80"): Declares the intrinsic bounding box, reserving layout space and matching CSS display geometry.

Expected Browser Render Output

+-------------------------------------------------------------+
| Pixel Density Switching (Retina Optimization)               |
|                                                             |
| +---------------------------------------------------------+ |
| |  ( 👤 )  Sarah Chen                                     | |
| |  [80px]  Principal Infrastructure Architect             | |
| +---------------------------------------------------------+ |
|                                                             |
| (Retina screen downloads the 160px asset, rendering         |
| with razor-sharp physical clarity)                          |
+-------------------------------------------------------------+