Product photography
What is a hero image, and why the term means two different photos
· 5 min read
A hero image is the large, attention grabbing photo an ecommerce page leads with, but the term covers two different jobs. On a homepage it is a wide lifestyle banner that sets brand tone. On a product page it is the first photo a shopper sees, usually a clean packshot that has to answer one question: is this the item I searched for?
RorlAI로 해보세요Product: Clean studio backdrop for anything boxed or bottled.The short answer
Ask a designer for a hero image and ask a product photographer for one, and you will get two different pictures back. Both are correct. Hero image is the industry's catch all term for the biggest, most prominent photo on a page, and ecommerce sites run two of them for two different reasons. A homepage hero image sets tone and invites a click. A product page hero image is the first photo in the gallery, and its job is closer to proof than to persuasion. The same photo is sometimes called a hero photo or a hero shot instead, and all three names point at the same thing: the largest, most prominent image on the page.
Other names for the same photo
Hero image is the most common term, but it is not the only one. A design team may call the homepage version a banner, a carousel slide, or a featured image, especially when several hero images rotate through the same slot. A product team talking about the gallery version may just say the main photo or the lead photo. None of these names change what the image has to do. Whatever it is called, it sits above the fold, it loads before anything else on the page, and it is the one photo most visitors will see even if they read nothing else.
Two different things share one name
| Homepage hero image | Product page hero image | |
|---|---|---|
| Where it lives | Top of the homepage or a landing page | First photo in the product gallery |
| Job | Set brand tone and earn a click deeper into the site | Prove this is the right product, quickly |
| Typical content | A styled scene, a model, a mood | The product alone on a plain background |
| Aspect ratio | Wide, often 16 by 9 | Square, usually 1 by 1 |
Why the mix up costs sellers real time
A seller who briefs a freelancer or an agency for a hero image without saying which kind gets whichever one the other person assumed, and the mismatch usually is not caught until the file lands. A styled lifestyle scene is the wrong shape and the wrong background for a product page, where a plain, accurate photo is what the listing needs. A plain packshot on white is the wrong image for a homepage banner, where empty space for a headline and a call to action is part of the job. The marketplaces add to the confusion by using their own names for the product page version. Amazon calls it the main image. Etsy calls it the primary photo. Both are describing the same thing this article calls a product page hero image, a single required photo that does most of the work of getting a shopper to click into the listing at all.
What a product page hero image needs
On a product page, a hero image is functionally a packshot, so it has to clear the same bar a packshot does:
- A background that reads as pure white or one flat color, not a wall with a visible shadow gradient
- The product filling a consistent share of the frame across the whole catalog, not varying item to item
- True color, since this is often the only reference a buyer has before an unboxing
- Enough resolution to zoom without turning soft, 2048 by 2048 pixels is a safe target for a square product image
What a homepage hero image needs
A homepage hero image is doing marketing work rather than verification work, so the bar is different:
- Room in the frame for a headline or a button, rather than the product filling every inch
- A scene or a person, since a plain product on white in a homepage banner reads as a category page rather than a brand
- A file size light enough to load fast, since a slow hero image delays everything below it on the page
- Roughly 1920 by 1080 pixels at a 16 by 9 ratio covers most desktop screens without heavy cropping
Why a weak hero image costs more than it looks like
A hero image is the first thing most visitors see, so a confusing or cluttered one does not just look unpolished, it raises the chance a shopper leaves before scrolling further. The usual advice holds for both kinds: keep the frame uncluttered, let one subject lead, and leave room for whatever text or button sits over it rather than fighting the photo for attention. On a product page the stakes are more direct, since an unclear or inaccurate first photo is one of the more common reasons a buyer orders the wrong thing and returns it. A returns-focused look at product photography covers that side of it in more detail.
Producing both without two separate shoots
- 1Shoot or upload one clean reference photoThe same photo works as the starting point for both a packshot and a styled scene, so there is no need to plan two shoots around one product.
- 2Generate the product page hero image firstA plain background, centered framing, and a consistent crop across the whole catalog matter more here than anything creative.
- 3Generate the homepage hero image from the same productA styled scene or an on model shot leaves the open space a banner needs for a headline and a call to action.
- 4Keep both current as the catalog changesA homepage hero built around a discontinued item is a common and avoidable miss once a product photo library exists to swap from.
Where this runs into a real limit
Generating a clean product page hero image or a styled homepage scene from an uploaded photo covers the photography half of the job. It does not cover the creative brief. Exact text overlay placement, a specific campaign concept, or a hero image built around a particular model you have already chosen for a shoot are decisions a person still has to make. RorlAI can produce the raw image for either kind of hero image quickly, but the choice of which mood, which model, and which message belongs on the homepage stays a human call.
Common questions
- Is a hero image the same as a packshot?
- On a product page, close enough to be functionally the same thing, a clean shot of the product alone on a plain background. On a homepage, no. A hero image there is a styled banner meant to set tone rather than prove product detail.
- What size should my homepage hero image be?
- Around 1920 by 1080 pixels at a 16 by 9 ratio covers most desktop screens without heavy cropping. Keep the file size compressed, since a slow loading hero image delays the rest of the page for every visitor.
- Does every product need its own homepage style hero image?
- No. A homepage hero image is for the handful of items or the overall brand story you are actively promoting. Every product still needs its own plain, technically correct hero image on its own product page.
- Why do Amazon and Etsy not use the term hero image?
- They call it the main image or the primary photo instead, and both apply requirements close to what a packshot needs: a plain background, the product filling most of the frame, and no added text or props.