The Retina trap

Your image looks crisp on an old office monitor but soft on a MacBook, an iPhone or most current smartphones. The reason: high-DPI ("Retina") displays pack 2–3 device pixels into a single CSS pixel. An image displayed at 200 CSS pixels wide therefore needs 400–600 actual pixels to look sharp — otherwise the display upscales it, and upscaled means blurry.

What a "2×" image means

The rule of thumb: for a crisp Retina image, the file needs roughly twice the pixel dimensions of its display size. Displayed at 200 px → provide a 400 px file (a "2×" image) and set it to 200 px via CSS or the width attribute. On a 2× display each device pixel then maps to one image pixel, and the result is sharp.

The dilemma: don't ship huge files to everyone

Here's the catch: a 2× image is four times the data (double width × double height). Sending that to every visitor — including phones with slow connections and non-Retina screens — wastes bandwidth. So the goal isn't "always serve the biggest image", but "serve the right image to each device."

The clean solution: srcset

Responsive images with srcset and sizes solve this automatically. You offer several widths, and the browser — knowing the display width and the device's pixel density — picks the fitting one:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 400px"
  alt="Description">

A Retina phone at 400 CSS px and 2× density automatically loads the 800w variant; a non-Retina desktop at the same size loads the 400w one. You don't manage @2x files by hand — the browser does the math. The full mechanics are in Responsive images with srcset and sizes.

Special case: logos and icons

For logos and icons, the best Retina answer isn't a bigger raster image — it's SVG. A vector graphic is razor-sharp at any pixel density by definition, so it needs no 2× variant at all. Reach for SVG for anything that must stay crisp across devices; use 2× raster images only for photos.

The practical checklist

  • Photos: provide a 2× variant and let srcset pick per device.
  • Create the widths by scaling the original down (resize tool) and compressing each.
  • Logos/icons: use SVG — no Retina variants needed.
  • Don't over-serve: never ship one giant image to everyone; that hurts mobile most.

In short

Retina displays need about twice the pixels to look sharp — but only Retina devices should download them. srcset delivers the right size to each device automatically, and SVG sidesteps the whole issue for logos and icons.