Retina Display Images: Serve Sharp Graphics on High-DPI Screens

Last updated: June 28, 2026

Retina and high-DPI screens pack more pixels into the same physical space, so an image sized for a standard screen looks soft and pixelated on them. Serving sharp images on these screens means preparing higher-resolution versions and telling the browser when to use them. This guide covers the 2x and 3x workflow, the srcset markup that delivers the right file, and the balance between crispness and page weight.

Quick answer: how do you make images sharp on retina screens?

Create a version of the image at twice (and for phones, three times) the display pixel dimensions, then use the srcset attribute to offer both versions. The browser loads the high-resolution file only on screens that can show it, so standard displays do not download the extra bytes. A photo displayed at 400 pixels wide needs an 800-pixel (2x) source for retina. Export both at appropriate compression — the 2x file is larger but not double, because compression efficiency improves with resolution.

What is a retina or high-DPI display?

A retina display is a marketing term for a screen with high enough pixel density that the eye cannot distinguish individual pixels at normal viewing distance. Apple coined it, but the concept applies to most modern phones, tablets, and laptops. The practical measure is device pixel ratio (DPR) — how many physical pixels represent one CSS pixel.

Device class	Typical DPR	What it means
Standard desktop monitor	1x	1 CSS pixel = 1 device pixel
Retina laptop, iPad	2x	1 CSS pixel = 4 device pixels
High-end phone	3x	1 CSS pixel = 9 device pixels
4K desktop monitor	~2x	Varies with scaling

• A 2x screen needs twice the linear pixels (four times the total) to look sharp.
• A 3x phone screen needs three times the linear pixels.
• Standard 1x screens download the base image and waste nothing.

The Mozilla guide to device pixel ratio documents how browsers report and use DPR, which is the foundation of every retina image strategy.

How do you create 2x and 3x image versions?

Start from a high-resolution source and resize it down to each target rather than upscaling a small file. A photo destined for a 400-pixel-wide display slot needs a 400px (1x) and 800px (2x) version, and a 1200px (3x) version for phones.

1. Start from a source at least as large as your largest target (3x).
2. Resize down to 1x, 2x, and 3x widths.
3. Compress each version — the 2x and 3x files compress better per pixel.
4. Export as WebP for the smallest high-quality files.
5. Serve all versions and let the browser choose.

• Never upscale a small image to 2x — it stays soft and just gets heavier.
• The 2x file is usually less than double the 1x bytes because of better compression.
• 3x versions matter most for phones with small, dense screens.

How do you serve the right version with srcset?

The srcset attribute on an <img> tag tells the browser which file to load based on the screen's DPR. The browser handles the selection, so you provide the options and the markup.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• The 1x, 2x, 3x descriptors map files to device pixel ratios.
• The browser loads only the version that matches the screen.
• Always include width and height to prevent layout shift.
• The src attribute is the fallback for older browsers.

For responsive images that also change dimensions across screen widths, combine srcset with the sizes attribute and width descriptors (400w, 800w) instead of DPR descriptors. The responsive images guide covers that more advanced pattern, and the image SEO guide explains how sharp, correctly-sized images also help search performance.

When to use SVG instead of raster

For logos, icons, and illustrations with flat shapes, you can sidestep the entire 2x/3x problem by using SVG. Vector graphics scale infinitely with no resolution penalty — the same SVG file is razor-sharp on a 1x monitor and a 3x phone, because it is drawn from math rather than stored as pixels.

Asset type	Use SVG or raster?	Why
Logo, icon	SVG	Sharp at every DPR, tiny file
Illustration, flat art	SVG	Scales without multiple versions
Photograph	Raster (WebP)	SVG cannot represent photos
Textured graphic	Raster	Detail needs pixels

SVG is the right answer whenever the image is made of shapes rather than photographic detail. The trade-off is that SVGs need to be optimized — unused metadata and editor cruft bloat them — and the SVG to PNG guide covers the workflow when you do need a raster fallback for an environment that cannot render vectors. For a brand site with a logo in the header, an SVG eliminates the retina question entirely for that one element.

Testing your retina images

Generating the files is half the work; verifying they actually load correctly is the other half. A few checks confirm the setup is working rather than silently serving the wrong file.

1. Open the page on a retina device or set the browser DPR to 2x in dev tools.
2. Inspect the image element and confirm the loaded currentSrc is the 2x or 3x file.
3. Switch to a 1x DPR and confirm it loads the 1x file instead.
4. Check the network tab to verify only one version downloads per screen.
5. View at 100% on the retina screen and confirm the image is crisp, not soft.

The browser dev tools device pixel ratio override lets you test without physical devices, though a real retina screen is the final proof. A common failure mode is a markup typo in the srcset that makes the browser fall back to the base src, which looks soft on retina without throwing an error. The network tab catches this immediately — if you see the 1x file loading on a 2x screen, the srcset is not wired correctly.

Balancing sharpness and page weight

The trap with retina images is serving high-resolution files to every screen, which doubles or triples the page weight for users who cannot see the difference. The srcset approach avoids this, but only if you actually generate the smaller versions and reference them. A single 3x file served to everyone is the most common mistake.

Mistake	Consequence
Serving only 3x to everyone	3x page weight on 1x screens
Upscaling to fake 2x	Stays soft, just heavier
Missing width/height	Layout shift while images load
Ignoring compression	2x file is needlessly large

The web.dev guide to responsive images documents the performance impact of getting this right, and the Core Web Vitals guide connects image weight directly to the LCP metric that affects ranking. The goal is crispness where it shows and restraint everywhere else — let the browser pick, and generate every version so it has something good to pick from.

Frequently asked questions

How do I make images sharp on retina screens?

Serve 2x (and optionally 3x) versions of raster images at the display size, using srcset so the browser picks the right file by device pixel ratio. A 1x image on a retina screen looks soft; the 2x variant restores sharpness.

Do I need 2x images for every graphic?

For sharp graphics and hero photos, yes — retina screens show softness otherwise. For decorative or below-the-fold images, a single 1x file is often enough. Serve both with srcset so non-retina devices do not download the large file.

When should I use SVG instead of 2x raster?

For logos, icons, and flat graphics, yes — SVG is resolution-independent and stays sharp at any size with no extra files. For photographs, raster (with 2x variants) is still the right choice. See the SVG to PNG guide.

How do I serve retina images?

Use srcset with 1x and 2x (and optionally 3x) sources, letting the browser pick by device pixel ratio. Ship the 1x as the default src so older browsers fall back cleanly. The browser downloads only the variant it needs.

Does srcset slow down the page?

No — the browser downloads only the one variant it needs, so a small screen gets the small file. Without srcset, every device downloads the largest file. srcset saves bytes, it does not add them.