The jump from 1× to 2× is visible to everyone. The jump from 2× to 3× is visible to almost nobody at normal viewing distance, and costs 2.25× the bytes of the 2× file. Use 3× for icons and line art, not for photographs.
| Device pixel ratio | Devices | Pixels per CSS px | Typical |
|---|---|---|---|
| 1× | 17 | 1 | Steam Deck OLED, Steam Deck LCD |
| 1.5× | 8 | 2.25 | Samsung Galaxy Tab S6 Lite, Samsung Galaxy Tab A9+ |
| 1.73× | 1 | 2.99 | Surface Laptop 7 15″ |
| 1.8× | 1 | 3.24 | Surface Laptop 7 13.8″ |
| 2× | 98 | 4 | iPhone 11, iPhone XR |
| 2.25× | 2 | 5.06 | HP Spectre x360 14, ASUS Zenbook 14 OLED |
| 2.625× | 12 | 6.89 | Samsung Galaxy Z Fold 6, Google Pixel 10 |
| 2.75× | 7 | 7.56 | Google Pixel 5, Google Pixel 4a |
| 2.81× | 3 | 7.9 | Samsung Galaxy S23+, Samsung Galaxy S22+ |
| 2.83× | 2 | 8.01 | Xiaomi 15, Xiaomi 14 |
| 2.96× | 1 | 8.76 | Motorola Edge 50 Pro |
| 3× | 67 | 9 | iPhone 17e, iPhone Air |
| 3.1× | 4 | 9.61 | Xiaomi 14T Pro, Xiaomi Redmi Note 14 Pro |
| 3.2× | 2 | 10.24 | OnePlus 13, OnePlus 12 |
| 3.27× | 3 | 10.69 | Xiaomi 15 Ultra, Xiaomi 14 Ultra |
| 3.28× | 1 | 10.76 | Nothing Phone (3) |
| 3.5× | 5 | 12.25 | Samsung Galaxy S20 Ultra, Samsung Galaxy Note 20 Ultra |
| 3.75× | 3 | 14.06 | Samsung Galaxy S25 Edge, Samsung Galaxy S25+ |
| 4× | 5 | 16 | Samsung Galaxy S20, Samsung Galaxy S10+ |
The arithmetic that decides it
A device pixel ratio is a linear multiplier, but the file is two-dimensional. A 2× asset has four times the pixels of a 1× asset; a 3× asset has nine. That is the whole cost model:
- 1× → 2×: 4× the pixels, roughly 2.5–3× the compressed bytes.
- 2× → 3×: 2.25× the pixels on top of that, for a difference most people cannot resolve.
Human visual acuity tops out around 300 PPI at typical phone viewing distance. A 3× phone panel is already past it. Rendering a photograph at 3× is spending bandwidth on detail the eye discards — while text and vector UI, which the OS renders at full device resolution regardless, keep their sharpness for free.
What to export at which density
| Asset type | Export at | Why |
|---|---|---|
| Icons, logos, line art | SVG | Resolution-independent. There is no density question. Ship SVG unless the artwork genuinely cannot be vectorised. |
| UI raster assets (small, hard edges) | 1× · 2× · 3× | Small files, so the third variant is cheap, and hard edges are where 3× is actually visible. |
| Photographs, hero images | 1× · 2× | Large files, soft detail. The 3× variant is bytes with no perceptual return. |
| Background textures, gradients | 1× | Low-frequency detail. Upscaling is invisible; some are better done in CSS with no image at all. |
| Screenshots of UI | 2× native | Screenshots contain text. Capture on a 2× display and downscale, never upscale a 1× capture. |
Let the browser choose
Hard-coding a density in your markup means every device downloads the same file. srcset with w descriptors hands the decision to the browser, which knows the device pixel ratio, the viewport, and — on some connections — the bandwidth.
<img
src="/img/hero-800.jpg"
srcset="/img/hero-400.jpg 400w,
/img/hero-800.jpg 800w,
/img/hero-1600.jpg 1600w"
sizes="(width >= 64rem) 800px, 100vw"
width="800" height="450"
alt="…">sizes is the part people get wrong: it describes how wide the image will be laid out, not how wide the file is. The browser combines it with the device pixel ratio to pick a candidate. Get sizes wrong and the browser will happily download a 1600px file to fill a 320px slot.
Always set width and height attributes as well. They give the browser the aspect ratio before the file arrives, which is what stops the page from jumping — the single cheapest layout-shift fix there is.
The one case where 3× still matters
App icons and launch assets. Those are rendered at fixed physical sizes on 90 of the devices here, and they are small enough that the file-size argument disappears. See app and icon sizes for the full set.
Questions
What does @2x actually mean?
An image with twice the pixel dimensions of its layout size, so it stays sharp on a display that packs two device pixels into each CSS pixel. A 200 × 100 CSS px slot needs a 400 × 200 px file to be crisp at 2×. The @2x suffix itself is an Apple naming convention, not a web standard.
Do I need @3x images for the iPhone?
For raster UI assets with hard edges, it helps. For photographs it does not — the file is roughly 2.25× larger than the @2x version for a difference that is not visible at arm's length. Ship @2x for photography and use SVG wherever the artwork allows it.
How do I know what device pixel ratio a visitor has?
window.devicePixelRatio in JavaScript, or @media (min-resolution: 2dppx) in CSS. But you rarely need to ask — srcset answers it for you at the point where it matters.
Should I use AVIF or WebP?
Both, with <picture> and a JPEG fallback. AVIF compresses best, WebP has wider support in older tooling, and the fallback costs you nothing because only one file is ever downloaded.