What is the right resolution to export screenshots? (1×, 2×, 3× explained)

You composed a great screenshot, hit export, dropped it on the landing page — and the next morning someone says “it looks soft on my MacBook.” The composition is fine. The problem is pixel density. Every retina laptop, every modern phone, every iPad renders web images at roughly twice the logical resolution, and a 1× export simply doesn’t have enough pixels to keep up.

Picking the right scale — 1×, 2× or 3× — is the difference between “my product looks crisp” and “I should probably redesign that.” Here’s a pragmatic, no-jargon guide to which to use, and when.

The TL;DR

• 1× — drafts, internal docs, Slack messages. Anywhere nobody is judging your craftsmanship.
• 2× — the default for anything public. Landing pages, blog posts, OG cards, Product Hunt galleries, X timelines. Always 2× unless you have a specific reason not to.
• 3× — hero images on marketing pages, gallery hero shots, print, anything that may be zoomed.

What “×” actually means

A 1× image is exported at the same pixel size as the canvas you see in the editor. A 2× image is twice as wide and twice as tall, so it contains four times as many pixels. A 3× image is three times wider and taller — nine times the pixel count.

Retina screens take a 1200-pixel image and stretch it across 2400 physical pixels of glass. CSS does the math automatically, but it can’t invent the missing data — so your beautifully padded 1× shot ends up slightly soft, exactly the way an early-2010s PowerPoint deck looks on a modern laptop today.

The numbers, side by side

For a 1.91:1 OG-style canvas (the most common size), here’s what each scale produces:

Notice how the weight jumps at 3×. That’s the real cost: 3× hero shots run about 8× heavier than 1×, which is why most teams reserve them for moments when the image is the centerpiece of the page.

When to use 1×

1× is the right choice in exactly three places:

• Quick drafts. You’re iterating on a concept, sending a Slack DM, looping in a teammate. Speed beats sharpness.
• Internal documentation. Confluence, Notion, engineering wikis. The audience is smaller and the file weight adds up across hundreds of embeds.
• Email signatures and inline icons. When the screenshot will be rendered tiny, 1× is fine and keeps your email under the attachment limit.

Anywhere else, 1× is the wrong default. It will look subtly soft on the one device you didn’t test on (almost certainly the device of the person you’re trying to impress).

When to use 2×

2× is the right answer for ~90 % of public-facing screenshots. Specifically:

• Marketing-page screenshots, feature illustrations, in-line blog images.
• OG cards, link previews, social-feed images.
• Product Hunt detail screenshots and changelog illustrations.
• Documentation that ships to customers (help center, knowledge base).

A 2× export is the smallest scale that looks crisp on a modern retina display, and it stays small enough that you don’t pay much in page-weight cost. If you can only export at one scale, this is it.

When 3× actually pays off

3× is genuinely overkill for inline images — the human eye won’t tell the difference between 2× and 3× at typical reading distance. But it starts to matter in three specific places:

• Hero images on landing pages that span the full viewport on a 4K display. 2× starts to look soft above ~2400 px wide.
• Product Hunt galleries, where users frequently zoom in on screenshots to read UI text.
• Print or ads. Billboards, conference banners, press kits — anything that physically scales up.

For most indie products, 2× covers everything and 3× is reserved for one or two hero shots per page. Going 3× by default is a fast way to bloat your site without any visible benefit.

What “high DPI” doesn’t fix

A 3× export will not save a screenshot with bad composition, no padding, or a hard PowerPoint shadow. Pixel density is the last 10 %. The first 90 % is still the basics — padding, shadow, corner radius, the right aspect ratio. Get those right at 1× first, then upgrade the scale for distribution.

One more thing: file format matters too

Even at the right scale, the wrong format quietly ruins a screenshot. Two rules:

• PNG — solid backgrounds, sharp UI, anything with text inside the screenshot. Lossless, slightly heavier, always crisp.
• JPG — photo-rich backgrounds, gradients with no sharp edges. Compresses harder, but introduces visible artifacts around UI text, so keep it for photographic scenes.

Modern formats like WebP and AVIF cut weight further, but support varies depending on where you embed. PNG at 2× is still the safest universal default.