Retina Screenshot

A retina screenshot is a screenshot captured on a high-DPI (Retina) display, resulting in an image with 2x or 3x the pixel dimensions of the visible viewport — sharper but larger in file size.

Related workflow terms: Viewport Screenshot.

Why Retina screenshots are larger

On a standard-density display, one CSS pixel corresponds to one physical pixel. A browser window that is 1440 CSS pixels wide produces a 1440-pixel-wide screenshot.

On a Retina display with a device pixel ratio (DPR) of 2, each CSS pixel is rendered with a 2x2 grid of physical pixels. The same 1440-CSS-pixel-wide window produces a screenshot that is 2880 pixels wide. At DPR 3 — common on high-end mobile devices — the output is 4320 pixels wide.

The result is a sharper image with more detail per visual unit, but the file is significantly larger. A 2x Retina screenshot contains four times as many pixels as a 1x capture of the same viewport (2x width times 2x height). File size scales accordingly — a PNG that would be 500 KB at 1x may be 1.5-2 MB at 2x.

This catches many users by surprise. A screenshot of a seemingly small portion of the screen produces a large, high-resolution image because the physical pixels far outnumber the logical pixels visible on screen.

Where it matters

• Web display — embedding a 2x screenshot at its full pixel dimensions in a web page makes it appear twice as large as intended. Use CSS width/height or the width attribute to display it at the correct logical size, where it will appear extra-sharp on Retina screens.
• Print — the extra pixels from a Retina capture are an advantage. A 2x screenshot has enough resolution to print at 300 DPI at a reasonable physical size, while a 1x capture of the same viewport may appear pixelated in print.
• Documentation — Retina screenshots in documentation look crisp on high-DPI screens but can be unnecessarily large for web delivery. Resizing to 1.5x or using responsive images balances sharpness and file size.
• File storage — batch capturing hundreds of pages on a Retina display produces significantly more data than the same batch at 1x. Factor in the multiplied file sizes when planning storage and bandwidth.

How to control capture resolution

Most capture tools and headless browsers let you set the device pixel ratio explicitly.

In Puppeteer and Playwright, the deviceScaleFactor option controls the DPR. Setting it to 1 produces a standard-density capture. Setting it to 2 produces a Retina-equivalent capture, regardless of the actual display hardware.

On macOS, the built-in screenshot tool (Cmd+Shift+3 or Cmd+Shift+4) always captures at the display's native DPR. On a Retina MacBook, this means 2x. Third-party capture tools may offer an option to capture at 1x instead.

On Windows, the Snipping Tool (Win+Shift+S) captures at the system's display scaling factor, which may be 100% (1x), 125%, 150% (effectively 1.5x), or 200% (2x) depending on the display and settings.

Some automated capture tools let you specify the exact DPR for each capture, making it possible to generate both 1x and 2x versions in a single batch run.

In repeatable screenshot pipelines, "Retina" is really shorthand for "capture with an explicit device pixel ratio." Once that is controlled in code, teams can choose whether they want small, review-friendly 1x images or sharper 2x outputs for marketing, print, and archive work.

Common mistakes

• Displaying Retina screenshots at full pixel dimensions on the web. A 2880-pixel-wide screenshot displayed without CSS sizing takes up 2880 CSS pixels on a standard display — far wider than intended. Always set display dimensions explicitly.
• Not accounting for file size in batch workflows. Capturing 500 pages at 2x instead of 1x roughly quadruples total storage. Decide whether Retina resolution is needed for the use case before running a large batch.
• Downscaling with a poor resampling algorithm. Reducing a 2x image to 1x with nearest-neighbor resampling produces jagged edges. Use bicubic or Lanczos resampling for smooth downscaling.
• Assuming all captures are Retina. If team members use different hardware, some captures will be 1x and others 2x, producing inconsistent image sizes. Standardize the capture DPR across the team or use automated tools that set it explicitly.