# Product Hunt gallery images: a sequence that tells the story

[Canonical HTML page](https://gradiently.design/guide/product-hunt-gallery-images)

Your gallery is the first thing a hunter scrolls through. Treat it as six frames of one story, not six screenshots, and people understand your product before they read a word of the description.

## The short version

- Product Hunt recommends 1270×760 pixels for gallery images and a square 240×240 thumbnail under 3 MB.
- A launch needs at least two gallery images before the gallery shows, but five or six give you room to tell a full story.
- The strongest gallery runs in order: a hook, the problem, the product, the features, how it works and a closing call to action.
- Every gallery image should share one background, one type style and one caption position, so the set reads as a single product.
- Product Hunt's video field takes a public YouTube link, so a short screen recording of the product doing its job belongs there.

**Product Hunt gallery images** are uploaded at 1270×760 pixels, a wide frame close to 5:3, and the separate square thumbnail is 240×240. You need at least two for the gallery to appear, and you can drag them into any order. The size is the easy part. What wins the scroll is the sequence: six frames that tell one story, hook first, call to action last, all in the same look so a visitor never wonders whether the next image belongs to the same product.

## Product Hunt image size: gallery, thumbnail and video

These are the numbers Product Hunt's own launch page gives today. Check the upload form on launch day in case they change.

| Asset | Size | Rules worth knowing |
| --- | --- | --- |
| Gallery image | 1270×760 px (or larger, same shape) | At least two required. GIFs allowed. Drag to reorder. |
| Thumbnail | 240×240 px, square | Under 3 MB. A GIF only animates on hover, so its first frame must work alone. |
| Video | A YouTube link | Optional. Public video, full URL, no shortened links. |

Product Hunt image sizes as listed on its launch preparation page. Export gallery images at exactly 1270×760, or at 2540×1520 for sharper screens.

- Gallery image 1270×760: 1270 × 760
- Thumbnail 240×240: 240 × 240
- Open Graph 1200×630: 1200 × 630

The gallery frame next to the thumbnail and a link preview, drawn to scale. The gallery is a little taller than an [Open Graph image](https://gradiently.design/guide/open-graph-image-size), so a link preview cannot be reused without re-cropping.

## A gallery sequence that tells the story

Most launches upload screenshots in the order they were taken. A visitor then sees a settings panel before they know what the product is for. Plan the gallery like a short deck instead: each image has one job and one line of words, and together they answer what it is, who it helps and why now.

| Slot | Job | What goes on it | Example line |
| --- | --- | --- | --- |
| 1. Hook | Say what it is in one line | Product name, the promise, one clean visual | Invoices that chase themselves. |
| 2. Problem | Name the pain your reader feels | One sentence, big type, no screenshot | Late payments eat your Fridays. |
| 3. Product | Show the main screen | The real interface, cropped to the part that matters | Every invoice, one calm list. |
| 4. Features | Three things it does | Three short lines or three small crops | Reminders, receipts, CSV export. |
| 5. How it works | Make it feel easy | Three numbered steps | Connect, send, get paid. |
| 6. Call to action | Tell them what to do next | The offer for hunters and your URL | Try it free at paperweight.example |

A six-slot sequence for an imaginary invoicing app. Swap the lines for your product; keep the order.

Slot one carries the most weight, because it is the image people see first on your launch page. Put the promise there, not a logo on its own. Keep slot four free of proof you have not earned: no invented user counts, no customer logos you do not have, no star ratings. Features stated plainly are more convincing than numbers nobody can check.

A 1270 by 760 Product Hunt gallery image reading Invoices that chase themselves, for an app called Paperweight

Slot 1, the hook: name, promise and a supporting line. Readable at a glance.

A 1270 by 760 gallery image stating the problem, Late payments eat your Fridays, on the same background as the first image

Slot 2, the problem: one sentence on the same ground, so it reads as the next frame.

A 1270 by 760 gallery image explaining how the app works in three steps: connect, send, get paid

Slot 5, how it works: three steps in plain words.

A 1270 by 760 closing gallery image reading Try it free today with the product's web address

Slot 6, the call to action: what to do next and where to go.

## Keep one ground across every gallery image

A gallery is seen as a strip of frames, and the eye notices the odd one out before it reads anything. Use the same background, the same heading font, the same caption position and the same margin on every image. Screenshots then sit on that ground like objects on a table, rather than each one bringing its own white page. Same discipline as a [carousel](https://gradiently.design/guide/carousel-pages): one design, many pages.

### Avoid

- Raw screenshots with different window sizes and white edges
- A new background colour on every slide
- Captions that jump from top to bottom between images
- Six fonts because each slide was made on a different day
- A logo-only first image that says nothing

### Do

- One background behind every image, screenshots placed on it
- One heading style and one caption position throughout
- The same margins, so crops line up as you click through
- A promise on slot one, a next step on slot six
- The thumbnail cut from the same ground, so feed and page match

The simplest way to hold this together is to build the whole gallery as pages of one design at 1270×760. In Gradiently every page wears the same Mark, so the background, light and type voice stay identical from slot one to slot six, and changing one setting changes the whole set.

## Captions people can read at gallery size

The gallery is shown smaller than you design it, and the thumbnail is tiny. Write captions of six words or fewer, set them large (aim for a cap height of at least 40 px on a 1270×760 frame) and keep one line per image. Strong [visual hierarchy](https://gradiently.design/guide/visual-hierarchy) beats clever layout here.

Words over a gradient fail where the colours behind them change from light to dark across a single line. Pick a calm area for text, or let the background make room. In Gradiently, Auto ink picks light or dark type per line from the Mark's own palette, so a caption stays readable wherever it sits. More on the technique in [text on gradients](https://gradiently.design/guide/text-on-gradient).

> **The squint test** Shrink the gallery image to the width of your thumb on screen. If you can still read the line and tell what the product does, it works. If not, cut words before you shrink the type.

## Where a video or screen recording fits

Product Hunt's video field takes a public YouTube link, not an upload. Keep it short and show the product doing its main job from start to finish, with captions burned in for people watching without sound. A plain screen recording often explains more than a polished animation. See [screen recording tips](https://gradiently.design/guide/screen-recording-tips) and [product demo video](https://gradiently.design/guide/product-demo-video) for the recording itself.

For motion inside the gallery, a GIF is the option, since gallery slots accept animated GIFs. Keep it to one short loop of a single interaction, framed on the same ground as the still images, and make sure the first frame works on its own.

## How to make Product Hunt gallery images, step by step

1. **Write the six lines first** Fill in the sequence table above before you open any design tool. If a slot has no clear line, the product story has a gap to fix.
2. **Set up one 1270×760 design** Create a custom size of 1270×760 and choose the background, heading font and caption position once. Add six pages to the same design.
3. **Capture clean screenshots** Hide personal data, use realistic fictional content, and crop each screenshot to the part that proves the line next to it.
4. **Place one idea per page** Line, optional detail, one visual. Same margins on every page so the frames line up as visitors click through.
5. **Check legibility small** View every page at thumbnail scale. Fix any caption that sits over a busy patch or a light-to-dark change.
6. **Make the thumbnail from the same ground** A 240×240 square with your icon or a short word on the same background. Keep it under 3 MB.
7. **Export and upload in order** Export PNG at 1270×760, name files 01 to 06, upload, then drag to reorder if needed. Add the YouTube link last.

Once the gallery is done, the same pages give you the rest of launch day: an X post, a link preview and a header. [Indie hacker launch graphics](https://gradiently.design/guide/indie-hacker-launch-graphics) covers that wider kit, and a [waitlist page](https://gradiently.design/guide/waitlist-page-design) built on the same look keeps people who arrive early in the same world.

## FAQ

### What size are Product Hunt gallery images?

Product Hunt recommends 1270×760 pixels for gallery images. You can upload larger images in the same proportion, such as 2540×1520, for sharper display on high-density screens.

### What is the Product Hunt thumbnail size?

The thumbnail is a square, recommended at 240×240 pixels and under 3 MB. A GIF thumbnail only animates on hover, so its first frame needs to work as a still image.

### How many gallery images does Product Hunt need?

At least two before the gallery shows on your launch page. Five or six let you tell the full story: hook, problem, product, features, how it works and a call to action.

### Can I add a video to my Product Hunt gallery?

Product Hunt has a separate video field that takes a public YouTube link with the full URL. For motion inside the gallery itself, upload an animated GIF.

### What should the first Product Hunt gallery image show?

Your product's name and its promise in one line, on the same background as the rest of the gallery. A logo on its own wastes the most viewed slot.