How a browser picks one image out of many

Web browsers can be smart about images. Given a set of variants at different sizes, each tagged with which display density it is meant for, the browser looks at the display, picks exactly one file, and downloads only that one. The others are never fetched over the network. This demo shows the choice happening live.

The original master

Source: Perseverance Dust Devil Selfie - NASA/JPL-Caltech/MSSS, Photojournal PIA26574, captured May 10, 2025 (sol 1,500) in Jezero Crater
File: mars-original.jpg (8.38 MB)
Dimensions: 12,033 × 7,168 pixels (86.3 MP, aspect 1.678:1)
Format: Baseline JPEG, RGB, 8-bit (24-bit color)
Color profile: sRGB IEC 61966-2.1 (web-standard, renders the same in every browser)
Resolution: 72 DPI (irrelevant on the web - only matters for print)

What srcset actually does (live)

The <picture> element below carries three variants tagged with density descriptors. The browser reads what it knows about the display, matches a variant, and downloads only that one file. The other two are skipped entirely - never fetched over the network.

Perseverance dust devil selfie (browser-selected variant)

The browser selected detecting... from the srcset above.

What the browser sees

Pixel density (the important one)

DPR ? reported by the OS to window.devicePixelRatio

Viewport (the browser window)

Width ? read from window.innerWidth

Height ? read from window.innerHeight

Physical screen (the whole monitor)

Resolution ? read from window.screen.width / .height

Color depth ? read from window.screen.colorDepth

Platform

OS ? parsed from navigator.userAgent - click the BROWSER INFO tab on the right for the full local report

How the browser picked

The developer labels each URL

The browser has no way to know what mars-2x.jpg means from the filename. The code tells it by writing a density descriptorspec ↗ after each URL in the srcset:

srcset=" mars-1x.jpg 1x, // for 1x displays mars-2x.jpg 2x, // for 2x displays mars-3x.jpg 3x // for 3x displays "

The filenames themselves are irrelevant. Naming them a.jpg, b.jpg, c.jpg would work identically - only the 1x / 2x / 3x labels matter.

The browser reads the display's DPR

The OS reports the physical pixel density to the browser via window.devicePixelRatio. Right now that value is ?.

The browser matches labels to the DPR

It walks through the srcset, finds the URL labeled ?, and picks it - per the algorithm in HTML spec 4.8.4.2.1.

Downloaded the winner, skipped the rest

Only one HTTP request went out. The other two files were never fetched.

What the browser knows locally

The srcset decision happens entirely on this machine - your computer, tablet, or phone. Nothing about the display, viewport, or pixel density is sent to the server. The server never sees any of the values below. They are read by JavaScript from the browser's live state at page load. This is everything this browser knows locally that could inform image, layout, or media decisions.

Pixel density (the one that drives srcset)

From window.devicePixelRatio. The only value that determines which 1x / 2x / 3x variant the browser downloads.

Viewport (the browser window content area)

From window.innerWidth / innerHeight. Used by srcset with w descriptors + sizes.

Window (browser window including chrome)

From window.outerWidth / outerHeight. The full window frame including the URL bar and tabs.

Physical screen (the monitor itself)

From window.screen.width / .height. Reported by the OS, which got it from the monitor's EDID chip on connect.

Available screen (minus taskbar / dock)

From window.screen.availWidth / .availHeight.

Color depth

From window.screen.colorDepth. 24-bit = 8 bits per RGB channel.

Screen orientation

From window.screen.orientation. Rotates on tablets and phones.

CSS media query matches (what CSS sees right now)

From window.matchMedia(...). These are the same booleans a stylesheet's @media queries see.

Timezone

From Intl.DateTimeFormat().resolvedOptions().timeZone.

Languages (preference order)

From navigator.languages. Also sent to the server as the Accept-Language HTTP header on every request.

Platform / OS (the only field from the User Agent string)

Parsed from navigator.userAgent. Unlike everything else above, this is sent to the server in the User-Agent HTTP header.

Where do these values come from at the lowest level? The physical monitor reports its resolution via an EDID (VESA standard) ↗ chip over HDMI / DisplayPort / USB-C on connect. The GPU driver reads that and hands it to the OS's display server (Quartz on macOS, DWM on Windows, Wayland / X11 on Linux). The browser process asks the OS via native APIs, then exposes what it learned to JavaScript through window.*.

The HTML that made this decision possible

<img
  src="https://periscoped-website-images.s3.us-east-1.amazonaws.com/demo/responsive-imaging/mars-1x.jpg"
  srcset="
    https://periscoped-website-images.s3.us-east-1.amazonaws.com/demo/responsive-imaging/mars-1x.jpg 1x,
    https://periscoped-website-images.s3.us-east-1.amazonaws.com/demo/responsive-imaging/mars-2x.jpg 2x,
    https://periscoped-website-images.s3.us-east-1.amazonaws.com/demo/responsive-imaging/mars-3x.jpg 3x
  "
  alt="Perseverance dust devil selfie"
  width="800" height="476">

Three files listed with density descriptors. The browser handles the rest per the HTML Living Standard section 4.8.4.2.1.

The other options (shown without srcset)

All three variants displayed side-by-side using plain <img src> - no srcset. The browser only downloaded one of these in the picker above, but all three are shown here for comparison. The variant the browser selected is highlighted in green.

mars-1x.jpg 1x

Dimensions1,200 × 715

Total pixels0.86 MP

File size250 KB

ForStandard 1x displays

mars-2x.jpg 2x

Dimensions2,400 × 1,429

Total pixels3.43 MP

File size862 KB

ForMacBooks, iPhones, most laptops

mars-3x.jpg 3x

Dimensions3,600 × 2,144

Total pixels7.72 MP

File size1.88 MB

ForiPhone Pro Max class

Size comparison at a glance

File	Dimensions	Total pixels	File size	vs master
mars-original.jpg	12,033 × 7,168	86.3 MP	8.38 MB	-
mars-3x.jpg	3,600 × 2,144	7.72 MP	1.88 MB	22% of master
mars-2x.jpg	2,400 × 1,429	3.43 MP	862 KB	10% of master
mars-1x.jpg	1,200 × 715	0.86 MP	250 KB	3% of master