Your Product Hunt gallery is the pitch most visitors actually read — the first image shows in the feed before anyone clicks. This guide covers the 1270 × 760 format, the story arc that keeps browsers swiping, and how to render each frame from a device mockup in under an hour.
Updated
recommended gallery image size on Product Hunt
— Product Hunt launch guidelines, 2026
your first gallery image doubles as the feed thumbnail
— Product Hunt product page layout, 2026
Plan 4-6 frames as a pitch, not a screenshot dump: frame 1 states the value proposition, frame 2 shows the core workflow, frames 3-4 show differentiating features, the last frame shows pricing or a call to action. Write the one-line caption for each frame first — the image illustrates the caption, not the other way around.
From Figma, export each screen in your storyboard as PNG at 2x. For a web app, export the full browser-width frame; for a mobile app, export the phone frame. You want at least 1600 px on the long edge so the screen stays sharp inside the mockup render.
Drop each export into a MochiMockup scene — a laptop for web apps, a phone for mobile. Keep the same scene family across all frames so the gallery reads as one set. Landscape studio scenes work best because the 1270 × 760 canvas is landscape.
Place each render on a 1270 × 760 canvas, device on one side, caption on the other. Set the caption in large type — gallery images are viewed at half size in the carousel, so text below 40 px effectively disappears. One claim per frame.
The first gallery image is also your feed thumbnail, competing in a list of 20 launches. Test it at 25% zoom: if the value proposition isn't readable and the device isn't recognisable, simplify. Big headline, one device, high contrast.
Export each frame as PNG, compress to under 3 MB each, and upload to your Product Hunt draft in storyboard order. Preview the launch page on mobile — the carousel crops slightly on small screens, so confirm no caption sits at the very edge.
Product Hunt recommends 1270 × 760 pixels for gallery images. The first image doubles as your thumbnail in the launch feed, so treat it as the single most important asset of the launch — a headline plus one recognisable device render at high contrast.
4 to 6. Fewer than 4 reads as low-effort; beyond 6, completion drops. Structure them as a pitch: value proposition, core workflow, one or two differentiators, then pricing or a call to action.
Both, deliberately: device mockups for the hook and context frames (1 and 2), tighter UI crops for feature detail frames. A raw full-page screenshot at gallery scale is unreadable; a mockup gives the eye a device to anchor on.
Yes. Gallery frames are 1270 px wide, well inside the free tier's 2K export. Render the device scene in MochiMockup, then add captions in Figma or any canvas tool before uploading.