What is Hero image?

A hero image is the single most prominent image on a page — the first visual in a product gallery, the banner at the top of a landing page, or the thumbnail representing a listing in search results. It carries disproportionate weight because it is processed before any text and often decides whether the rest of the page is read at all.

On marketplaces the hero image is usually constrained: Amazon requires a pure white background, the product filling roughly 85 percent of the frame, and no added text, logos, or props. On a brand's own site there is no such constraint, and the better-performing pattern is usually contextual rather than isolated — the product in use, at a scale a shopper can judge. The most common failure is optimising the hero for aesthetics rather than for legibility at thumbnail size, where most impressions actually occur. A hero that reads beautifully at full width and turns to mush at 150 pixels loses the click before the page ever loads.