Retina and 2x Images Explained for Web Developers

2x means two device pixels for each CSS pixel, about four times the pixels of a 1x file. Export that many pixels for the box on the page. A camera-resolution file can be sharper than a phone can display inside a narrow column, and serving 2x to every visitor without srcset makes a small phone download about four times the pixels a 1x or 1.5x file would need. Measure the rendered width and build the variants in Resize Image.

Teams sometimes export every asset at about 4000 px for "retina," even when the layout column is only a few hundred CSS pixels. Page weight rises, Lighthouse flags the page, and mobile users on metered data pay for pixels the screen cannot use. The images can be sharper than any phone can display inside a 360 px column.

Retina is a ratio between CSS layout pixels and image source pixels. Browsers ignore the DPI tag for layout. Count pixels.

Device pixels and CSS pixels

CSS says width: 400px. On a standard screen, one CSS pixel is about one device pixel. On a 2x retina display, that 400 px box uses 800 device pixels across. The browser scales whatever image you provide into those device pixels.

Too few source pixels and the browser upscales a soft image. Too many source pixels and the download is wasted. The browser downscales it. It looks sharp enough and weighs more than it should.

The goal is enough source pixels for the density you serve, not the camera's maximum.

What "2x" implies

If an image displays at 600x400 CSS pixels on a desktop:

| Density target | Source dimensions | Notes | |----------------|-------------------|-------| | 1x | 600x400 | Non-retina, or a thumbnail | | 2x | 1200x800 | Usual retina default | | 3x | 1800x1200 | Diminishing returns for photos |

A full-width hero with max-width: 1200px in CSS is covered at 2x by a 2400 px wide source. A 6000 px upload adds seconds on 3G and adds no visible detail.

srcset and sizes

Fixed icon, using density descriptors:

<img
  src="logo.png"
  srcset="logo.png 1x, logo-2x.png 2x"
  alt="Vertex Solutions"
  width="120"
  height="40"
/>

Responsive photo, using width descriptors:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Team at work"
  width="1200"
  height="675"
  loading="lazy"
/>

The browser picks a file from the viewport width, sizes, and the device pixel ratio. You generate the variants once. The visitor does not download all of them.

Build the widths with Resize Image at 400, 800, 1200, and 1600 (this example), then run each through Compress Image.

Export steps

1. Measure the display. In DevTools, read the rendered width of the <img> or the background.
2. Pick a max density. Default to 2x unless the icon has to be sharper.
3. Export width is renderedWidth × 2. Cap it. Heroes rarely need more than 2400 px.
4. Resize the master in Resize Image to that width and keep the aspect ratio.
5. Compress, using image compression for web. Retina doubles the pixels. Set the quality slider by looking at the result.
6. Generate an srcset ladder at 1x, 1.5x, and 2x widths, or at your usual breakpoints.
7. Test on a real iPhone and a budget Android phone. Read the bytes in the Network tab on mobile.

Common resizing mistakes: stretching a small logo to fake 2x creates blur.

DPI metadata

Photoshop's 72 vs 300 DPI export confuses the file size question. Web layout uses pixel dimensions only. Changing the DPI tag without changing pixels does not change file size or sharpness.

Print CSS and images embedded in PDFs do care about DPI. For an <img> on a website, ignore the DPI slogan and count pixels.

Photos, UI, and icons

Photographs: 2x the display width, WebP or JPEG, quality 80 to 88. See WebP vs JPG.

UI screenshots: PNG or lossless WebP. Text has to stay crisp at 2x.

Icons: SVG if you can. If you need PNG, export 1x and 2x bitmaps, or use an SVG sprite.

Favicons are a different job: a multi-size ICO or a PNG set at 16, 32, 180, and 512.

Mistakes

A single huge src makes mobile download the desktop retina file.

2x on everything includes thumbnails that do not need it. An 80 px avatar does not need a 1600 px source.

If you omit sizes, the browser assumes 100vw and may fetch a larger file than the slot needs.

Upsampling a small asset cannot invent detail. Reshoot, or use a vector.

A 2400x1600 PNG photo used as a hero is painful. Use WebP or JPEG.

Forgetting to compress the 2x file matters because the pixel count is about four times the 1x file. The quality setting matters more at that size.

Bytes

Doubling each side is about 4x the pixels, and about 4x the bytes if you leave compression alone. Ways to cut that:

• srcset, so mobile gets 800w and desktop gets 1600w
• WebP from WebP Converter
• Lazy load below the fold
• fetchpriority="high" only on the LCP hero

If the page never finishes loading, the extra sharpness never reaches the reader.

Privacy

Making five srcset variants in the browser keeps the assets on your machine. A cloud bulk resizer sees every variant you upload. That is fine for public marketing and risky for embargoed product shots.

Other options

• SVG for logos and icons, at any density
• CSS image-set() for backgrounds
• A CDN that resizes on request (Cloudinary or imgix style). Watch the cost and the cache
• A 1.5x export, which some teams use to save bytes on mid-tier screens

Pair the widths with image aspect ratios for web so the srcset matches the card layouts.

Limitations

Serving a 2x image to every visitor without srcset forces a low-end mobile connection to download four times the pixels. A 1x or 1.5x variant can look the same on a small screen.

Serve enough pixels for the CSS box times the device pixel ratio, usually 2x, not the camera native size. Measure the display size, export a ladder, use srcset, compress each variant, and let the browser choose. Count pixels. Ship the smallest file that still looks crisp on a phone held at arm's length.