How the browser picks the right pixel version of an image based on the screen it's looking at. Compares real-world displays, defines the terms in plain language, and shows the decision the browser makes on every page load.
How it works
1
Browser opens
User loads the page on a phone, laptop, or big monitor.
→
2
Detects screen resolution + DPR
Browser reads how wide the viewport is and how dense the pixels are (1x, 2x, 3x).
→
3
Picks the right image
From the sizes we uploaded, it downloads the one that fits - crisp on Retina, small on phones, no wasted bytes.
Specification reference
This behavior is defined by the HTML Living Standard, section 4.8.4.2 (attributes for embedded content and images):
4.8.4.2.2 Sizes attributes - how the browser is told which size the image will occupy on the page, so it can pick the right file.
Source: html.spec.whatwg.org - the WHATWG HTML Living Standard, the authoritative specification implemented by every major browser.
What 1x, 2x, and 3x actually look like
Same 100 CSS pixels of screen space, three different displays. Higher DPR means the browser has more physical pixels to work with, so images look sharper without the layout changing size.
1x display
100 x 100 physical pixels10,000 pixels total (baseline)
2x display
200 x 200 physical pixels40,000 pixels total, but only 2x sharper
3x display
300 x 300 physical pixels90,000 pixels total, but only 3x sharper
Each grid cell = 10 physical pixels. All three boxes represent the same 100 x 100 CSS-pixel image, but the higher-density displays have more physical pixels available to render the detail. Note the gap between pixel count and perceived detail: the 3x display packs 9x the total pixels, yet the image only looks about 3x sharper - because sharpness tracks the linear dimension, not the total pixel count.
Your HP 27er and the "bad" Dell E1916H have the same PPI (about 82) - because a 27" 1080p spreads pixels thin, and a 19" 1366x768 does the same math. Your monitor is "big and low-density."
The iPhone 16 Pro Max has the highest PPI on the list (460), more than 2x the Apple Pro Display XDR. That's why phone photos look shockingly sharp.
The Apple Pro Display XDR is the only monitor here that hits every metric - Retina, wide gamut, 10-bit, real HDR.
For a case-study hero image (roughly 1024 px CSS container): on your HP 27er anything at least 1024 px wide looks crisp. On the iPhone at 3x you want the image at least 3072 px wide to be truly crisp - which is why uploading at 1920 x 1080 or higher is worth it even though your desktop can't see the difference.
Scoring key
A Best-in-class on all metrics.
A- Elite specs but constrained (small physical size or one weak metric).
B+ Prosumer tier. Great for design work, weak on HDR or 3x density.
B Mid-tier. Better than 1080p, not as sharp as 4K, marketing-label HDR only.
D Old, low-res, low bit depth. Fine for documents, poor for images.
The HDR flavors, all in one place
"HDR" is not one thing. There are two questions to keep straight: what format is the content encoded in (HDR10, Dolby Vision, HLG, HDR10+) and what tier is the display certified to (DisplayHDR 400, 600, 1000, 1400, True Black). Both have to be capable for you to actually see HDR.
1. Content formats (what the video or image is encoded in)
Designed so the same signal plays as SDR on non-HDR TVs. Live-broadcast focused.
2. Display certifications (what your monitor is rated to deliver)
VESA runs the DisplayHDR program. A monitor's box may say "HDR" without any certification (marketing only) or it may carry one of these tiers. The number equals the peak nit requirement.
400 / 500 / 600 nits peak, with near-zero black (0.0005 nits)
10-bit
>90% DCI-P3
Yes - for OLED, deep blacks compensate for lower peak
Rule of thumb: for a real HDR experience you need both the content encoded in an HDR format and a display rated DisplayHDR 600 or better (or an OLED at True Black 400+). Anything less is HDR in name only.
Glossary
Pixel density / DPR (Device Pixel Ratio)
DPR stands for Device Pixel Ratio. It tells the browser how many physical pixels equal one CSS pixel. On a 2x screen, a 100 x 100 CSS-pixel image actually renders across 200 x 200 physical pixels - four physical pixels for every one CSS pixel. On a 3x screen (top-tier iPhones) the browser triples it: 300 x 300 physical pixels for that same 100 x 100 CSS image, so the picture looks even tighter and sharper. That's why DPR exists - the CSS layout stays the same size on every device, but the hardware provides the extra detail underneath without you changing any code. One caveat worth knowing: a 3x screen has nine times the physical pixels of a 1x screen, but the image only looks about three times as sharp, because detail scales with the linear dimension, not the total pixel count. Ref
CSS pixel
The unit you actually write in your code when you type 100px. It's not a physical pixel - it's a "reference pixel" defined by W3C so the same layout looks the same size across every device. On a standard 1x screen, 1 CSS pixel equals 1 physical pixel. On a 2x screen, 1 CSS pixel is drawn using four physical pixels (a 2x2 grid). On a 3x screen, it's drawn using nine physical pixels (a 3x3 grid). You never write "physical pixels" in CSS - the browser handles the translation using the display's DPR. Ref
Retina
Apple's marketing name for a display so dense that a person with normal vision can't see the individual pixels at a normal viewing distance. In practice it means the display has a pixel density of 2x or higher. Ref
HiDPI
Short for "High Dots Per Inch." It's the generic industry term for the same idea Apple markets as Retina - a display dense enough that the operating system doubles pixels to draw sharper text and images. Ref
PPI
Pixels Per Inch. A physical measurement of how tightly the pixels are packed on the actual glass - a standard office monitor is around 100 PPI, and Retina-class starts around 220 PPI. Ref
Total resolution
The full pixel count of the screen, width multiplied by height - a 3840 x 2160 panel has a total resolution of about 8.3 million pixels. It's the headline number on a spec sheet, but on its own it oversells sharpness: doubling the total pixel count only makes an image look about 1.4x sharper, because perceived detail tracks linear resolution, not area. See linear sharpness. Ref
Linear resolution
The number of pixels measured along a single edge of the screen or image, as opposed to the total resolution of the whole area. A 300 x 300 grid has a linear resolution of 300 pixels per edge but 90,000 pixels total. Linear resolution is the number that actually governs how sharp an image looks, because the eye reads detail along lines and edges, not by counting area. See linear sharpness. Ref
Linear sharpness
The rule that perceived sharpness scales with linear resolution (pixels along one edge), not with the total pixel count. Going from a 1x to a 3x screen turns a 100 x 100 block into 300 x 300 - that's 90,000 pixels, nine times as many, but the image only looks about three times as detailed, because detail scales with the linear dimension. This is why "9x more pixels" oversells what your eye actually gains: the honest number is 3x. The same math runs the other way - to double how sharp an image looks you need four times the pixels, not two. Ref
HD (High Definition)
1366x768 or 1280x720 pixels. The baseline "high definition" spec from the mid-2000s - fine for text and email, visibly soft for anything with detail. Ref
FHD (Full HD, "1080p")
1920x1080 pixels. Doubles the pixel count of HD and became the standard for TVs, phones, and most laptops through the 2010s. Ref
QHD (Quad HD, "1440p")
2560x1440 pixels. Four times the pixels of standard HD (hence "Quad") - a common mid-tier resolution for monitors and gaming. Ref
4K / UHD (Ultra HD, "2160p")
3840x2160 pixels. Four times the pixels of Full HD - the current standard for premium TVs, high-end monitors, and 4K video streaming. Ref
5K
5120x2880 pixels. About 25% more pixels than 4K, used mostly on Apple's iMac and Studio Display for razor-sharp text and image editing at typical viewing distances. Ref
6K
6016x3384 pixels. The resolution of the Apple Pro Display XDR - even sharper than 5K, aimed at professional video editors and colorists working with 6K camera footage. Ref
Color gamut
The range of colors a display can physically reproduce - a wider gamut means more vivid reds, greens, and blues. In this report we normalize every display to "% DCI-P3 coverage" because DCI-P3 is the film-industry standard, it's the yardstick every serious panel review uses, and it lets us compare Apple's marketing labels ("Display P3") against third-party monitors on the same scale. Ref
sRGB
The baseline color range every screen has supported for decades - the default of the web, standardized by IEC 61966-2-1. When a display is "72% sRGB" it can only show 72% of that baseline, so colors look muted. Ref
Display P3
Apple's wider color range used on iPhones, MacBooks, and Pro Displays. Defined by Apple as DCI-P3 primaries with an sRGB gamma curve and D65 white point - functionally nearly identical to DCI-P3, and roughly 25% more colors than sRGB. Ref
DCI-P3
The wide color range defined by Digital Cinema Initiatives (DCI) for the film industry. Very similar to Apple's Display P3, and the yardstick used by serious monitor reviews and the spec sheets of every professional panel. Ref
Bit depth
How many shades of each color the display can show. Higher bit depth means smoother gradients (like a sunset sky with no visible bands). Ref
6-bit dithered
An older, cheap panel that can only show 262,144 colors natively. It fakes the missing colors by rapidly flickering pixels (Frame Rate Control), which mostly works but shows banding on smooth areas. Ref
8-bit
The standard for most monitors and phones - 16.7 million colors. Fine for everyday work, but can show visible banding on smooth gradients like skies. Ref
10-bit
The pro standard - over one billion colors. Gradients look completely smooth and photo editing is more accurate. Ref
HDR
High Dynamic Range. A display capability that allows much brighter highlights and deeper blacks than a normal screen - you need both a bright panel (1,000+ nits) and HDR-encoded content to actually see the effect. Ref
SDR
Standard Dynamic Range. The normal brightness range every display has supported for decades, topping out around 100 to 400 nits. Everything on the web that isn't specifically HDR is SDR. Ref
Nit
The unit for how much light a display puts out (formally: candela per square meter, cd/m2). A dim laptop screen is around 100 nits, a bright modern monitor is 400 nits, and an HDR display can hit 1,000 nits or more. Ref
Sustained brightness
The brightness level the display can hold across the whole screen for a long time without dimming to avoid overheating. This is the number that matters for reading and normal use - VESA calls this "long-duration" luminance in the DisplayHDR spec. Ref
Peak brightness
The maximum brightness the display can hit briefly on a small portion of the screen, like a sunlit window in a photo. Peak is always higher than sustained and only matters for HDR content - VESA calls this "peak 10% flash" luminance in the DisplayHDR spec. Ref
HDR 400
The entry-level VESA DisplayHDR 400 certification. The display can accept HDR signals and hit 400 nits peak, but that's not bright enough to deliver a real HDR experience - it's mostly a marketing label. Ref
HDR10
The most common HDR format for video and games (defined by the Consumer Technology Association in CTA-861). A display with an "HDR10 tag" can decode HDR signals, but without high brightness (1,000+ nits) the actual picture won't look dramatically different from SDR. Ref