Product Hunt gallery screenshots: size specs, visual quality, and the launch workflow

Product Hunt gallery screenshot sizes

Use these specs when preparing your launch gallery:

The 1.67:1 aspect ratio is wider than a standard 4:3 photo and narrower than a 16:9 video frame. If you upload a 4:3 image, Product Hunt adds gray bars on the sides. That looks unprepared. Export at 1270×760 and you avoid that entirely.

The size spec is just the starting point

Getting the dimensions right takes ten seconds. The harder problem is making the image look like it belongs on a polished product page rather than a screenshot someone resized in Preview.

Two screenshots can both be 1270×760 and look completely different in the carousel. One has a browser frame, clear padding, and a short label on the key feature. The other is a raw app screenshot stretched to fill the canvas. Visitors scroll past the second one in the time it takes to read this sentence.

The rest of this guide covers those decisions: what to show in each image, how to compose the first image, common mistakes that are easy to avoid, and a browser workflow that handles framing and export without opening Figma.

How to make a 1270×760 Product Hunt screenshot

The goal is not to decorate the screenshot. The goal is to make the product easy to understand at carousel size.

1. Capture the most recognizable screen. Use the screen that shows the core value — not a settings page, an empty state, or a loading screen. If a new user cannot tell what the product does from the image alone, pick a different screen.
2. Add a browser frame. A browser mockup generator gives web products context and makes the image feel intentionally prepared. A raw screenshot without a frame reads as unfinished.
3. Set 10–20% padding. Do not let the UI touch the edges of the 1270×760 canvas. Padding keeps the screenshot readable when Product Hunt scales it in the carousel or in social embeds.
4. Add one annotation. One arrow, label, or highlight pointing at the main feature or outcome is enough. More than one annotation dilutes attention. If you need to explain multiple things, use multiple gallery images.
5. Export as PNG at 1270×760. Export at 2× if your tool supports it, then scale down — this produces a sharper result than exporting at exactly 1270×760 from a low-density display.

For the broader launch workflow across Product Hunt, social, and press, see product screenshots for launch posts. For export size requirements on other channels, see screenshot sizes for social media.

What makes a strong first Product Hunt image

Your first image has one job: answer "what does this product do?" in under two seconds.

• A recognizable UI view. Show the actual product in its most useful state — a dashboard, a key output screen, or the feature that makes it different. Not a marketing graphic with abstract shapes.
• One short headline. 3–7 words that name the outcome, not the feature. "Turn screenshots into polished visuals" works at carousel size. "Screenshot editor with browser mockups and export presets" does not.
• A browser frame. It signals this is a working web product, not a mockup or concept. It also creates natural padding and separation from the carousel background.
• Enough contrast. Product Hunt users scan at speed. Light text on a light background, or a primary content area that is small relative to the canvas, gets passed over.

Avoid screenshots that depend on tiny text or detailed UI that requires zooming. If the content in the image needs explanation, add a label instead of expecting the viewer to read it at thumbnail size.

Common Product Hunt screenshot mistakes

These are the patterns that make otherwise strong products look unprepared on launch day:

• Uploading the same screen at different zoom levels. Each gallery slot is an opportunity to show something different. A second image that is just a zoomed version of the first wastes the slot.
• No browser frame on a web product. Without a frame, a web UI screenshot looks like a flat design mockup. The frame is quick to add and significantly improves how intentional the image looks.
• UI touching the edges. No padding makes the product look compressed against the canvas. It also looks different from polished launch galleries, which makes it stand out for the wrong reason.
• Using a settings page as the first image. Settings pages look like every other settings page. The first image should show the product doing its most valuable thing, not how to configure it.
• Uploading a 4:3 image without checking aspect ratio. Product Hunt adds gray letterboxing on the sides. It is one of the most visible signs of a rushed launch gallery.
• Too many annotations on one image. Three arrows pointing at three things means no clear focal point. One callout per image, placed on the most important element.

Product Hunt gallery checklist

Before uploading, run each image through this list:

• Canvas is 1270×760 px.
• Format is PNG for static screenshots or GIF for short demos.
• File is under 5 MB.
• UI does not touch the edges — at least 10% padding on all sides.
• Text is readable at thumbnail size without zooming.
• All gallery images use consistent framing, padding, and background style.
• First image answers "what does this do?" in under two seconds.
• Each image shows a different product moment.
• No more than one annotation per image.

FAQ

What size are Product Hunt gallery screenshots?

Product Hunt gallery screenshots should be prepared at 1270×760 px. This is a 1.67:1 wide canvas — wider than a 4:3 photo, narrower than 16:9 video. Upload a different aspect ratio and Product Hunt adds letterboxing.

What aspect ratio does Product Hunt use?

1.67:1 — which works out to exactly 1270×760 px. If you have a design canvas at 4:3 or 16:9, check that the content fills the frame without awkward cropping or platform-added padding before uploading.

Should Product Hunt screenshots be PNG or GIF?

Use PNG for static product screenshots. Use GIF only for short demos where motion explains the feature better than a still image. Keep every file under 5 MB — GIFs compress poorly at high quality and can exceed this easily.

How many screenshots should I upload to Product Hunt?

Product Hunt requires at least 2 gallery images before the gallery is visible. 4–6 images is a reasonable target when each one shows a distinct product moment. A weak sixth image is worse than stopping at five.

What should each Product Hunt gallery image show?

Each image should show a different part of the product story. A common structure: first image covers what the product does; second shows the key output or result; third and fourth cover specific features or use cases; fifth shows a before/after or workflow summary. Avoid showing the same screen twice.

Does the first Product Hunt screenshot affect conversion?

Yes. The first gallery image appears in the carousel, in social shares, and in most embeds. It functions like a launch poster. A clear, well-composed first image increases dwell time on the launch page before anyone reads the headline copy — it is the highest-leverage image in the gallery.

Do I need Figma to make Product Hunt screenshots?

No. If your product runs in Chrome, FramedShot can capture the tab, add a browser frame, set padding, annotate the image, and export at 1270×760 px. The whole workflow runs in the browser without uploading anything to a design tool.

Why is my Product Hunt screenshot blurry?

Usually because the source screenshot is too dense, exported at the wrong size, or scaled down from a very large monitor capture. Use fewer UI details, add more padding, and export at the target size. Exporting at 2× and scaling down in the upload produces a sharper result on retina displays.