Retina image size calculator.

Worked example

A banner that shows at 600 × 200 CSS pixels is 600 × 200 at 1x, 1200 × 400 at 2x (0.48 megapixels) and 1800 × 600 at 3x. Many email templates use a 600 px content width as a common rule of thumb, not a published standard; a full-width banner there would be exported at 1200 px wide for 2x screens.

How it works

Export pixels = display CSS pixels × scale. A 2x image has twice the width and twice the height, so four times the pixels and usually a bigger file. Choose 2x for most pages and 3x only where you need it.

The 600 px email width mentioned in the example is a common rule of thumb; check your email template or client for the width it actually uses.

FAQ

What size should a retina image be?

Twice the width and height it displays at. An image shown at 600 × 200 CSS pixels is exported at 1200 × 400 for 2x.

What is the difference between @2x and @3x?

@2x doubles each dimension and @3x triples it. Some phones have 3x screens, but 2x is enough for many layouts.

Does a 2x image make the file bigger?

Usually yes, because it has four times the pixels at 2x, though compression changes the exact size.

What width should an email banner be?

A 600 px content width is a common rule of thumb, not a published standard. Export at 1200 px wide for 2x screens.