Hero Banner

What is a hero banner?

A hero banner (or hero image) is an oversized picture at the top of a website. It’s the first thing a visitor sees when your homepage loads.

Hero banners usually feature splashy, colorful, or otherwise eye-catching images and a short headline that introduces crucial information.

Why use a hero banner?

People are highly visual, so having a high-quality hero image at the top of your page can help create a positive first impression. When your website looks great, it helps build credibility and trust in your brand.

A hero banner is also a great way to direct visitors toward your call-to-action, promote current discounts and new arrivals, or display your unique selling proposition.

How to create the perfect hero image

Great hero image design is attention-grabbing and dramatic, giving visitors an impression of what your brand is all about and showcasing the most important content on your website.

There are two major things to be aware of when creating your hero banner:

  • Optimize your hero images: Large images can take a long time to load if they aren’t properly optimized. Hero images lose their effectiveness if they take too long to load.
  • Make a point: Make sure that the image actually adds value to your website rather than simply looking good. This means it should either convey (or support) your value proposition or show off your core offering(s). Try not to use stock photos.

Hero image examples

1. Allbirds

Allbirds’ hero image features two related images that represent both their products and their brand identity. The message is reinforced through the headline: “Keep It Light.” 

ObyBoPkLUhbzlvatyKfH725xYn3FnoORJq8RFw2in8FdCHosHIzqXtOXPdwL4je4gv7NKelQnOJsjNSoYK2vOH0lDBrWJeZ0XUNYaPBBcPtBRpmvlCUxR6P2Ue IvO6w6rJyW294F0u kfZltHFqrRY4tSV4TQQrEdIBUiBUs K4YT C3Gytq2FLzA - Hero Banner

2. Warby Parker

Warby Parker’s hero image is dedicated to explaining their unique selling proposition: the chance to try on five different frames without committing to making a purchase.

Kpk7HT3heObX174mIJ8oxkvSVp eJ0I9gJT3DsKDnLQkduVDAFYtBAT gzXPaVJaOZ85O tGmTZyGFk HxF8AdCYy FGaH31AS542DZzRY7gHiXNNflDIfETrl7kmPY sIwVdcvzYpD7qy69xwSOH9gKzqJDK1Srz4 RFyKVGQ2 wyz1xCKXCd3n6g - Hero Banner

3. Glossier

Glossier’s hero image isn’t the most flashy, but does a good job of highlighting their top products, which goes perfectly with their “Shop Bestsellers” call-to-action.

k4gX1JKHoPTlqozKcneqGn133Bg3CLzXGD9n3ctxAEN006d6EDytFNE3Mdi7VTor3n8gRdMvCEB9f6dZmtBw  hKnVpXkcEpbhESVQVALEZnjucHbC8yE5PmhBrI6hB3NJCgE J 59jlGpdlhkzN3EFZKMJhqCfnhPdY1VpGUnZoaHojscK PeO3jQ - Hero Banner

4. ASOS

The banner image on asos.com is a beautiful hero image that customers can’t help but notice. It presents their clothes in a great light.

sOri8B1YuRFKw4X2ogtHKfz tV Sil258DEU UURLB3yIdkkAPUhgGj9w3JRCzWbZr951CGVY DybUAhUDCznI4Lct0J2vhheE2y BPPSvdTmI H3fVsTUVkTEaJ2sbKLvInpXT2gnHGDAJF ReejSa94fq8b8ghq7aXMw jkNpNOFX0sVnziz Z Q - Hero Banner

5. Gymshark

This hero image from Gymshark features new arrivals to a popular product line (the “Adapt Family”). Returning visitors will appreciate the information.

zlR5L1kGIjI Jwe9zNoh0UmMWSlGx5nSNyeOkuE4JiEl rIqLwcjz6mAc6OOZxQhLAhBWG7fJQ9zsCF58cEJNDqYEisCcEIblJM2Cdn6Y3GIOZaHgSrjlBLszw8uXihG OFVLi3pPA8LzgBrOeZVelUMWIXfGYP9aAxhKXBSVxocSVpCVmGoJ8BSHA - Hero Banner