Product Hunt Gallery and Header Image Sizes Plus 6 Templates That Get Upvoted (2026)

Product Hunt gallery images are 1270 x 760 pixels. The first image becomes the thumbnail (auto-cropped to 240 x 180 at a 4:3 ratio). The logo is 240 x 240. Up to 8 gallery slots are allowed. Top-5-of-the-day products in 2025 and 2026 share a tight set of visual patterns: 6 specific gallery templates show up over and over in the listings that actually rank.

Here are the exact 2026 dimensions and the 6 templates worth copying.

Product Hunt Image Dimensions

Gallery Images

Key points:

• Upload at 1270 x 760 px for best quality
• Images are displayed at various sizes in feed
• First image becomes your thumbnail
• Up to 8 gallery images allowed

Logo/Icon

Your logo appears next to your product name. Keep it simple and recognizable at small sizes.

Maker Image

This is your personal avatar that appears with your maker profile.

Gallery Best Practices

Your First Image Matters Most

The first gallery image:

• Shows as the thumbnail in feeds
• Gets cropped to 4:3 for some views
• Is the first thing people see

Design for this: Put your most important content in the center, with breathing room around edges to survive cropping.

Recommended Gallery Structure

For a strong launch, include these images:

1. Hero shot - Your product in action with a device mockup

2. Key feature #1 - Your main differentiator

3. Key feature #2 - Secondary value prop

4. Key feature #3 - Another benefit

5. Social proof - Testimonials or user stats (if you have them)

6. Pricing/CTA - What happens next

You don't need all 8 slots. 4 to 6 strong images beat 8 mediocre ones. For a complete preparation workflow, see the Product Hunt launch checklist.

6 Gallery Templates That Get Upvoted

Studying the top 5 ranked products across 2025 and 2026 reveals 6 templates that recur in almost every winning gallery. These are not designs; they are recipes. Use them as a starting structure for each of the 6 slots.

Template 1: The hero shot (slot 1)

Layout: Device mockup centered on a soft gradient background, brand-colored. Headline above or below the device, 3 to 5 words, large weight. Subtle product logo in the corner. What to put in it: The single screen of the product that makes its purpose obvious. No menus open, no modals, just the canonical view. The headline names the outcome: "Tasks that schedule themselves," not "AI scheduling." Why it works: Slot 1 is also the thumbnail. In the daily feed it renders roughly 240 x 180 px. A clean device shot with one headline reads instantly at that size. Cluttered hero shots disappear in the feed.

Template 2: The animated first frame (slot 1 alternative)

Layout: Same as Template 1 but with motion: a 2-to-4-second loop showing the product in use, exported as GIF or WebM. What to put in it: A single short interaction. Typing into a search box, sliding a setting, watching a chart update. Loop length under 4 seconds, paused frame as the static fallback. Why it works: Animated first frames consistently out-convert static ones on Product Hunt because they catch the eye in a scrolling feed. The Product Hunt gallery generator exports animated GIF and WebM at 1270 x 760 px in one step.

Template 3: The feature spotlight (slots 2 to 4)

Layout: A large UI screenshot taking 60-70% of the canvas, with a benefit-led caption at the top or side. Background still in the same brand gradient as slot 1 for consistency. What to put in it: One feature, shown in actual use. Caption pattern: "[Verb] [outcome]." Examples: "Capture every receipt." "Find quiet places nearby." "Replay any meeting." Why it works: One feature per slot means each image makes a single, memorable promise. Mixing 3 features into one image dilutes the message and makes the gallery feel cramped.

Template 4: The before/after (slots 3 to 5)

Layout: Split-screen 1270 x 760 canvas. Left side: the painful "before" state (a chaotic spreadsheet, a cluttered inbox, manual workflow). Right side: the product's clean "after" state. What to put in it: A direct visual contrast that needs no caption to understand. If the product replaces a known status-quo tool, show that tool on the left and the product on the right. Why it works: Before/after compresses the value prop into one glance. Particularly effective for productivity, finance, and tools that automate manual work. Less useful for net-new categories with no obvious "before" state.

Template 5: The social proof card (slot 5 or 6)

Layout: Bold typography across the full canvas. A single large number (user count, rating, hours saved) or a 1-line testimonial in quotes. Press logos in a row at the bottom (optional). What to put in it: Concrete numbers, not adjectives. "Used by 12,000+ indie makers." "4.9 stars from 2,000 ratings." "Featured in Lifehacker, The Verge, Fast Company." If real testimonials exist, one short quote with attribution beats a generic blurb. Why it works: By slot 5, browsers who are still reading are evaluating credibility. A concrete number or recognizable name is the single best credibility signal. Generic adjectives ("loved by thousands") underperform specific numbers ("loved by 12,847 makers").

Template 6: The pricing or CTA close (slot 6 to 8)

Layout: Clean canvas, large headline restating the value prop, one line of pricing context, soft visual cue toward the website link. Optionally show the pricing table or first-week-free callout. What to put in it: A close. Restate what the product does, anchor the price ("Free to try. Pro from $4.99/mo."), and invite the user to visit. Avoid hard "BUY NOW" language; Product Hunt browsers respond to soft CTAs. Why it works: The close consolidates the gallery into a clear next step. Without it, the gallery ends on a feature spotlight and the user has nothing to do next. Pricing reassurance reduces the friction of clicking through.

These 6 templates can be combined: a typical 6-slot gallery uses Template 1 or 2 in slot 1, Template 3 in slots 2 to 4, Template 4 or 5 in slot 5, and Template 6 in slot 6. The Product Hunt gallery generator ships pre-built versions of each template at the correct 1270 x 760 size.

Design Tips

Use consistent styling:

• Same background colors/gradients across all images
• Same fonts and text sizing
• Same device frames if showing mockups

Keep text readable:

• Large fonts (minimum 24px at final size)
• High contrast against backgrounds
• 3-5 words per headline max

Show, don't tell:

• Actual screenshots beat illustrations
• Real UI beats placeholder content
• Device mockups beat raw screenshots

How to Create Product Hunt Images

Quick Method: Product Hunt Gallery Generator

1. Take screenshots of your product

2. Upload to a Product Hunt gallery generator like Screenhance

3. Add device frame and gradient background

4. Export at 1270 x 760 px

Total time: ~2 minutes per image.

Design Method: Figma

1. Create artboard at 1270 x 760 px

2. Add your screenshot in a device mockup

3. Add headline text and background

4. Export as PNG

More control, but takes longer.

Thumbnail Optimization

Since your first image gets cropped to 4:3 for thumbnails:

Safe zone: Keep critical content within the center 1013 x 760 px area. The edges may get cropped in some views. Test it: Before launch, preview how your first image looks at small sizes. Squint test: can you tell what it is?

Common Mistakes

Busy first image

Too much text or detail that becomes unreadable at thumbnail size.

Inconsistent styling

Each image looks like it's from a different product.

Wrong dimensions

Images that look stretched or have black bars.

No device context

Raw screenshots without frames look unprofessional.

Text too small

Headlines that can't be read without zooming.

File Requirements

Format: PNG or JPEG (PNG recommended) Max file size: 3MB per image Color space: RGB

Optimize your images before upload to ensure fast loading.

Related Reading

• How to Create Product Hunt Launch Visuals That Stand Out - Complete launch guide
• How to Create Product Hunt Mockups That Get Upvotes - Mockup strategies
• Screenshot Size Guide: Dimensions for Every Platform - All platform dimensions
• How to Make a Mockup: Complete Beginner's Guide - Mockup basics

Frequently Asked Questions

What size should Product Hunt gallery images be?

Product Hunt gallery images should be 1270 x 760 pixels with a 1.67:1 aspect ratio. This size displays well across desktop and mobile, and survives the various crop ratios Product Hunt uses in different views.

How many images can I upload to Product Hunt?

You can upload up to 8 gallery images. However, quality matters more than quantity. 4-6 strong, cohesive images typically perform better than 8 rushed ones. Focus on your hero shot and key features.

What makes a good Product Hunt thumbnail?

Your first gallery image becomes the thumbnail, cropped to 4:3. Keep important content centered, use high contrast, and ensure any text is readable at small sizes. The thumbnail should instantly communicate what your product does.

Should I use device mockups in my Product Hunt gallery?

Yes, device mockups significantly improve the professional appearance of your gallery. They help users visualize using your product. Use consistent device frames (all iPhones, all MacBooks) throughout your gallery for cohesion.

Can I update my Product Hunt images after launch?

Yes, you can update gallery images after launch. However, your thumbnail is locked once voting begins. Make sure your first image is finalized before launch day.

Conclusion

Product Hunt success starts with strong visuals. Use 1270 x 760 px for gallery images, make your first image count (it's your thumbnail), and keep styling consistent.

Spend the extra 30 minutes getting your images right. On launch day, you'll be glad you did.