Hero images

Hero images are prominently placed visuals—like images, videos, or other graphic resources (such as photos or infographics)—that appear at the top of a website and immediately catch the visitor’s attention.

Their main purpose is to highlight a product, strengthen the brand image, or quickly convey the company’s essence.

1. Use of hero images

Hero images are primarily used on a website’s homepage, but over time, they’ve also become common in key sections of a site, like landing pages, where they help recapture the visitor’s attention.

• They help tell stories. They’re a powerful tool for storytelling and overcoming objections—whether through testimonials, social proof, or as the visual thread of a specific experience, a strong hero image makes your message resonate with visitors.
• In special offers. In ecommerce, brands commonly use hero images to spotlight specific products and services. Brands can use this strategy to run clearance promotions, draw attention to new products, gather visitor data, and more.
• Improving conversions. One of the most common uses of hero images is to place a highly targeted CTA, since they naturally draw the visitor’s attention and provide the ideal space to drive key campaign goals.
• To highlight information and improve understanding. Our brain processes visuals faster than text, and since most users tend to avoid reading lengthy descriptions, hero images are a great way to emphasize and summarize key messages clearly.

2. Hero images in online stores

Given their importance, online stores heavily rely on hero images to grab visitors’ attention. As a result, it’s common to see real product images displayed in ways that differ from what we’re used to.

These images highlight key product details with the goal of encouraging visitors to add the item to their shopping cart.

In this case, hero images must clearly and attractively display all essential information for the buyer, including five key elements:

• Brand or manufacturer.
• Product category.
• Product content.
• Appearance/real representation.
• Supporting typography.