Performance6 min read·Updated September 5, 2026

Retina Images and WebP: You Do Not Need 3× PNGs

A 3× PNG of a 400 px card is a 1200 px lossless file — often 1 MB. A 800–1000 px WebP at 80–90% looks sharp on retina and stays small. Use srcset if you can; a single mid-size WebP if you cannot.

DPR is not a licence to ship print files

The eye cannot use infinite pixels on a 6-inch phone. 2× of the CSS width is the practical ceiling for photos. UI screenshots can use 2× at high WebP quality.

Why it matters

Figma @3× exports are a common accident.
srcset with a 4000 px 3x candidate wrecks mobile.
WebP's efficiency makes 2× affordable.

How to do it

Note CSS width. Convert at 2× (photos) or 2× / quality 90 (UI).
If you write srcset, offer 1× and 2× WebP, not 3×.
Never use a 3× PNG as the only source.

Settings that work

Card 360 CSS px → 720 px WebP. Hero 430 CSS px mobile → 860–1200 px.

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

For a tiny icon maybe. For photos, no.

Not at 2× and quality ≥80. Test on a real phone.

Keep reading

Performance6 min read

Recommended image sizes

Practical max widths for heroes, content, thumbnails and retina — then convert those files to WebP.

Workflow6 min read

Screenshots to WebP

PNG screenshots shrink dramatically as WebP if you keep quality high enough for text. Recommended settings and max width.