Your Product Hunt gallery is the first thing hunters see after your tagline. Raw screenshots signal an unfinished product. Framed browser mockups with consistent backgrounds signal polish — and top launches consistently use all 6–8 gallery slots to tell a story.

Product Hunt Image Specs (2026)

| Asset | Dimensions | Notes | | --- | --- | --- | | Gallery image | 1270×760 px | Landscape, up to 8 images | | Gallery thumbnail | ~240×180 px | First image only — design for this size | | Logo | 240×240 px | Square, clear at small size | | Tagline | 60 characters max | Shown under product name |

The first gallery image doubles as the feed thumbnail. If your headline is unreadable at 240×180, redesign before launch day.

The 6-Slide Gallery Formula

Top launches follow a predictable arc:

Hero shot — Product in a browser or MacBook frame, 3–5 word headline.
Key feature #1 — One benefit, one screen, minimal text.
Key feature #2 — Different angle or device for variety.
Key feature #3 — Workflow or integration highlight.
Social proof — Testimonial, user count, or press logos (if you have them).
Pricing / CTA — What happens next after they click through.

Each slide should pass the squint test: blur your eyes — can you still tell what the product does?

Design Rules That Convert

Device frames beat raw screenshots. Chrome or Safari frames add context hunters expect.
Consistent backgrounds across all slides — same gradient or solid color family.
Large type — minimum 24 px at final size; 3–5 words per headline.
Safe zone — keep critical content in the center ~1013×760 px; edges may crop.
Fresh captures — do not reuse last quarter's UI; stale dashboards hurt credibility.

Step-by-Step with KromaStudio

1. Capture a clean product screenshot

Take a fresh full-resolution capture of your canonical screen — no debug modals, no personal data. Crop to the feature you want to highlight.

2. Open the browser mockup generator

Go to the browser mockup generator and upload your screenshot.

3. Choose a frame

| Product type | Recommended frame | | --- | --- | | SaaS dashboard | Chrome light + muted gradient | | Developer tool | Arc or Safari dark on near-black background | | Design-focused app | Safari light + minimal solid background | | Mobile companion | iPhone or iPad device frame |

Match the frame theme to your UI — a light dashboard inside a dark Safari frame looks disconnected.

4. Set background and export

Pick a brand-aligned gradient or solid color. Export at 2× or 4× for retina sharpness, then resize to 1270×760 in your design tool if needed.

For transparent frames (compositing onto custom hero sections), export PNG with background removed.

5. Add minimal text overlays

Use Figma or Canva for headline text on top of the mockup. Keep copy short — the mockup should do the talking.

6. Test at thumbnail size

Shrink your first slide to 240×180. If the headline vanishes or the UI becomes a blur, simplify.

Beyond Static Images

For launch threads on X, pair gallery images with an animated code screenshot or a short founder demo video in slot 1 — video can outperform static heroes when authentic and under 60 seconds.

Launch Day Checklist

[ ] 6–8 gallery images at 1270×760
[ ] First image readable at 240×180 thumbnail
[ ] Consistent frames and backgrounds across slides
[ ] Fresh screenshots captured at native resolution
[ ] OG / social share image prepared
[ ] Logo at 240×240 uploaded

Related guides

Create your first launch mockup — no Figma or Photoshop required.