Device Pixel Ratio (DPR) and How It Affects srcset Selection

Device Pixel Ratio and srcset

Device Pixel Ratio (DPR) is the ratio of physical pixels to CSS pixels on a device. It fundamentally affects which image the browser selects from srcset.

Common DPR Values

Device	DPR	Physical Resolution	CSS Resolution
Standard desktop	1x	1920×1080	1920×1080
MacBook Pro	2x	2880×1800	1440×900
iPhone 15	3x	1179×2556	393×852
Galaxy S24	~2.6x	1080×2340	~412×892

How DPR Affects srcset Selection

When the browser encounters:

<img
  srcset="photo-320w.jpg 320w,
          photo-640w.jpg 640w,
          photo-1024w.jpg 1024w,
          photo-1536w.jpg 1536w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Photo"
/>

On an iPhone 15 (393px viewport, 3x DPR):

1. sizes evaluates to 100vw = 393 CSS pixels
2. Multiply by DPR: 393 × 3 = 1179 physical pixels needed
3. Browser selects photo-1536w.jpg (smallest image >= 1179w)

On a MacBook Pro (1440px viewport, 2x DPR) with 50vw:

1. sizes evaluates to 50vw = 720 CSS pixels
2. Multiply by DPR: 720 × 2 = 1440 physical pixels needed
3. Browser selects photo-1536w.jpg

DPR-Based srcset (x Descriptors)

An alternative to width descriptors is the x descriptor:

<img
  src="photo.jpg"
  srcset="photo.jpg 1x,
          photo@2x.jpg 2x,
          photo@3x.jpg 3x"
  alt="Photo"
/>

Width descriptors (w) are preferred because they account for both viewport width and DPR, while x descriptors only account for DPR. Use x descriptors only for fixed-size images like icons or logos.

Saving Bandwidth on High-DPR Devices

You don't always need to serve full DPR images. Studies show that at 2x DPR, serving a 1.5x image is virtually indistinguishable from 2x. You can reduce your highest srcset width:

• Instead of 3x: serve 2x (saves 30-50% bandwidth)
• Instead of 2x: serve 1.5x (saves 20-30% bandwidth, slight quality loss)