Key takeaways
- Product Hunt gallery images: 1270 × 760 px, 4:3 ratio, PNG or GIF, 5 MB max per image.
- Your first image is the most important — it's the preview shown when your launch is shared on social media.
- Browser frame + padding + annotations = the three design moves that separate polished from amateur.
- You can go from raw screenshot to export-ready in under 30 seconds without opening a design tool.
- Use consistent framing across all 5+ gallery images — inconsistency signals a rushed launch.
The exact Product Hunt screenshot sizes
The most common question before a launch: what are the Product Hunt gallery screenshot dimensions? Here are the exact numbers — follow them to avoid awkward cropping or blurred pixels.
| Spec | Value |
|---|---|
| Recommended size | 1270 × 760 px |
| Aspect ratio | 4:3 |
| Format | PNG (static) or GIF (feature demos) |
| Maximum file size | 5 MB per image |
Note on the hero image. Your first gallery image is the most important. It appears as the preview when your launch is shared on social media. Make sure it contains your most recognizable UI and a clear, high-contrast headline. Treat it as a launch poster, not a screenshot.
Why raw screenshots hurt your launch
Most launches fail visually for the same three reasons:
- Lack of context. A floating UI rectangle without a browser frame looks unfinished. The Product Hunt community has seen thousands of launches — a bare screenshot reads as an afterthought.
- The scale problem. High-resolution screenshots from a 4K monitor become unreadable when shrunk down to the Product Hunt gallery view. What looks sharp at full size turns into an unreadable blur of UI elements.
- Visual noise. Cluttered bookmark bars and system trays distract from your actual software. Viewers notice the clutter before they notice your product.
How to design gallery screenshots that stand out
Three design moves separate a polished Product Hunt gallery from a raw one.
A. Use browser mockup frames
A browser frame gives your UI instant context. It signals to the Product Hunt community that this is a live, functional web app — not a Figma mockup or a wireframe.
Use the browser mockup generator to wrap any screenshot in a clean macOS or Windows browser frame in seconds. If your UI is light-themed, try a dark mode frame — the contrast makes your UI pop against the gallery background.
For the full step-by-step on frame styles and when to use each, see the guide on adding a browser frame to a screenshot.
B. Apply padding
Don't let your UI touch the edges of the 1270 × 760 canvas. Padding centers your screenshot and creates a premium feel. It also ensures that no critical part of your UI is hidden by Product Hunt's navigation overlays at the edges of the gallery.
A padding value of 10–15% on all sides is a reliable starting point. For hero shots, go higher — 20% or more gives your UI room to breathe and reads as more confident.
C. Annotate for clarity
The Product Hunt community scans galleries quickly. Don't make them guess what they're looking at.
- Use numbered callouts to walk through a "3-step setup" or feature sequence.
- Use arrows to point directly to the "aha moment" of your feature.
- Keep text minimal. If you need a caption, use a high-contrast background so it reads at small sizes.
FramedShot's annotation tools — arrows, highlights, and text labels — are built for exactly this. You annotate directly on the screenshot before export, with no round-trip to a design tool.
The 30-second workflow (without Figma)
You don't need a heavy design tool to prep your launch. Here's the full workflow using the FramedShot Chrome extension:
- Capture. Use the extension to grab your hero feature from your staging or production environment.
- Frame and pad. Toggle the browser mockup frame and set your background to a brand-consistent gradient.
- Resize. Set the canvas to 1270 × 760 px to match the Product Hunt gallery aspect ratio exactly.
- Export. Download as a 2× PNG for Retina-quality sharpness — no blur when Product Hunt resizes the thumbnail.
Launch day checklist
- Your first image is a high-impact hero shot with your most recognizable UI.
- Consistent framing across all 5+ gallery images — same background, same padding, same frame style.
- Text on screenshots is readable on mobile devices.
- GIFs are under the 5 MB limit.
FAQ
What size are Product Hunt gallery images?
The recommended size is 1270 × 760 px at a 4:3 aspect ratio. Keep each file under 5 MB.
Should I use PNG or GIF?
PNG for static screenshots — it handles UI detail clearly without compression artifacts. GIF for short feature demos, but watch the file size: keep GIFs under 5 MB or Product Hunt will reject them.
How many screenshots can I upload?
Product Hunt supports multiple gallery images. Most successful launches use 5 or more, each covering a distinct feature or benefit. More images give the community more to engage with.
Do I need Figma or Photoshop for this?
No. A Chrome extension like FramedShot handles browser frame, background, padding, and export at the correct dimensions — from capture to download in under a minute. No design tool required.
Why does the first gallery image matter most?
Your first image is what appears when your launch is shared on social media. It's the preview image the entire internet sees before clicking through. It should be your strongest visual — high contrast, clear UI, immediately legible at a small size.
Polish your Product Hunt gallery in under a minute
FramedShot is a free Chrome extension. Capture, frame, annotate, and export at 1270 × 760 px without opening Figma. No account required.
Install FramedShot free