SavePage
·SavePage Team

Retina Screenshots: Understanding Device Scale Factor

retinaresolutionguide

Modern displays pack more pixels into the same physical space than their predecessors. A standard 1440x900 screenshot looks sharp on a 1080p monitor but blurry on a 4K display or a Retina MacBook. The device scale factor controls this.

What device scale factor means

The device scale factor (also called device pixel ratio or DPR) is the ratio between physical pixels and CSS pixels. A 2x display renders 4 physical pixels for every 1 CSS pixel (2 wide, 2 tall).

| Display Type | Scale Factor | CSS 1440x900 becomes | |-------------|-------------|---------------------| | Standard (1080p) | 1x | 1440x900 pixels | | Retina (MacBook) | 2x | 2880x1800 pixels | | Ultra HD (4K) | 3x | 4320x2700 pixels |

When you set scale=2 in the API, the browser renders the page as if the viewport is 1440x900 CSS pixels, but the output image is 2880x1800 actual pixels. Text, icons, and vector graphics are rendered at the higher resolution, resulting in crisp output on high-DPI screens.

When to use 2x scale

Marketing and portfolio sites. If screenshots will be displayed on a website where visitors likely have Retina displays, 2x captures look noticeably sharper.

Print materials. Print requires higher resolution than screen. A 2x screenshot at 1440px wide gives you 2880 pixels, which prints well at common sizes.

Design documentation. Style guides and component libraries benefit from crisp screenshots that show fine details like 1px borders, subtle shadows, and anti-aliased text.

Presentations. Presentation displays are increasingly high-DPI. 2x screenshots look professional on modern projectors and screens.

When 1x is sufficient

Automated testing. Pixel comparisons are faster with smaller images. 1x captures are adequate for visual regression testing.

Thumbnails. If the screenshot will be displayed at a small size (200px wide), the extra resolution of 2x is invisible.

Large-volume captures. 2x images are 4x the file size. For archival or monitoring workflows processing thousands of screenshots, 1x keeps storage costs reasonable.

File size impact

The increase is not proportional. A 2x image has 4x the pixel count but not 4x the file size, thanks to compression:

| Scale | Dimensions | PNG Size | JPEG Size (q80) | |-------|-----------|----------|-----------------| | 1x | 1440x900 | ~400 KB | ~120 KB | | 2x | 2880x1800 | ~1.2 MB | ~350 KB | | 3x | 4320x2700 | ~2.5 MB | ~700 KB |

The file size increase is roughly 2.5-3x for each step up in scale factor.

API usage

Set the scale factor with the scale parameter:

# Standard resolution
/v1/?url=https://example.com&scale=1

# Retina (2x)
/v1/?url=https://example.com&scale=2

# Ultra HD (3x) - Pro plan
/v1/?url=https://example.com&scale=3

Note that higher scale factors use more memory during rendering. The Free plan supports scale 1 and 2. Pro plans support up to scale 3.

Serving the right resolution

If you are displaying screenshots on a website, serve the appropriate resolution based on the viewer's device:

<img
  src="screenshot-1x.png"
  srcset="screenshot-2x.png 2x"
  width="720"
  height="450"
  alt="Website screenshot"
/>

This tells the browser to use the 2x image on Retina displays and the 1x image on standard displays. The CSS width (720px) keeps the image at the intended visual size regardless of pixel density.

All posts