Our 7 Favorite Homepage Hero Images (That Also Convert!)

Last updated: Web Design 5 min read
Heroes aren’t just for Marvel anymore! Hero images have been a consistent web design trend must over the past few years, and they aren’t going anywhere anytime soon. What is a hero image? According to Optimizely, a hero image is “an oversized banner image at the top of a website.” This image gives website visitors a first glimpse of your company and products/services. Considering that the hero image on your homepage is most likely your number one visited page, you can understand why the design is so important. You want to captivate and engage your visitors as soon as they land on your site. To do this, you’ll need more than just some clever text. You need to step back and look at what your business really is, who your customers are, and what they are looking for. How can you relate to them? Are you selling a service or a product? A product should be front-and-center, while your service may need an emotional image that conveys the trouble or solution your customer has/needs. Not sure what this looks like? Below we’re sharing our 7 favorite (and converting) homepage hero images.
Best Converting Homepage Hero Images - Blog

Our 7 Favorite Homepage Hero Images (That Also Convert!)


1. Apple.com

While you may prefer an Android device over Apple, nobody can deny Apple’s effective website design. The king of white space and minimal design, Apple has always put their products first. They’re so focused on this that their entire homepage, for every product section, essentially consists of GREAT hero images.
Apple Hero Image Example
Below is a subpage for Apple Music. So. Many. Hero. Images. It’s very effective!
Apple Hero Animations

2. Pepsi.com

So, Pepsi failed me when it came to their contact page in my last article when I compared them to Coca Cola, but they absolutely win the homepage hero battle. The homepage video fits perfectly with the text, as it truly makes the product look delicious and refreshing.
Pepsi Homepage Hero Video

3. Smashmallow.com

Smashmallow uses very subtle animations to keep your eyes moving around. If a hero image can keep your attention then it has worked. The longer you stay on the site, the more likely you are to engage and buy in. In fact, give me a moment while I buy some Mint Chocolate Chip marshmallows from this site. Brb.
Smashmallow Homepage Hero

4. AirBnB.com

When creating your homepage, think about the emotion you want to evoke. AirBnB has invested most of the hero real estate to the image, showing the customer that they, too, can stay at an incredible location. Beautiful scenery and trips are not just for Instagram influencers!
AirBNB Hero Image

5. allbirds.com

allbirds’ homepage layout draws the eye from the top of the page, straight down to the shoes, followed by the shop buttons. The image itself has just enough motion, from the angles of the feet and the skirt, that we stay on the page a little bit longer to learn about their products.
allbirds.com HERO image

6. CatScarf.com

Even if the internet did not love cats more than your crazy aunt, this hero image would still evoke emotion. And for your customer, this can help push them to browse your site, and ultimately buy something. Their homepage hero is such a simple image, but it’s just too precious to ignore.
catscarf.com HERO image

7. YoungbergFamilyLaw.com

This family law attorney gets you right in the feels. If you’re going through a divorce or any issues involving your children, an image like this is much more captivating and relatable than an image of lawyers or a cityscape. Youngberg Family Law did a great job creating a homepage hero that speaks to their target audience’s challenges when going through a divorce.
youngbergfamilylaw.com HERO image

A Few Final Notes

Your homepage’s hero image is the first thing a visitor is going to see, so we recommend you take the time to really think about the right message you want to convey.
  • Emotion is a big factor. Evoking the right emotion can instantly build trust with your customers or push them away. Do not put just any ole stock image in the hero. Think about what feeling that image evokes and will it be felt by someone viewing your brand/website.
  • Stock photos don’t work for every business. For example, if you specialize in custom clothing you should show your actual work and not stock images. However, if you are a dry cleaning company, a stock image of clothing is perfect.
  • Hiring a professional photographer to take photos for your homepage is worth the investment. Maybe you’re a local baker, but you do not have the images you would like for your website. In this scenario, stock photos could result in a customer looking for that item in your shop. If they don’t see it they could get upset (and nobody wants a bad Yelp review).

One More Thing!

You may have added a landing page to your site, and if that’s the case I hope you have considered the imagery there as well. If not, see why landing pages are important here.

Like these homepage hero images and want something similar for your website and brand? Let us create a visually interesting hero for your website! Contact the web designers at TheeDigital in Raleigh, NC at 919-341-8901 or schedule a consultation.

Tags: Web Design

Richard Horvath

Owner / President

Richard Horvath is the founder of TheeDigital, a Raleigh based award-winning web design and digital marketing agency. He is proud of his team and the results that they provide to their clients.

Related Posts

Top 404 Page Examples
Our Favorites 4 min read

Some of Our Favorite 404 Error Page Designs

We're sharing our favorite 404 page examples that are on-brand, funny, and engaging. See our favorites to…
Richard Horvath

Latest Web Design Trends and Standards
Web Design 11 min read

24 Top Web Design Trends 2024

Check out the latest web design trends and standards for 2024.
Christopher Lara

Graphic of a person reviewing text that says law firm website design trends.
Legal Marketing 7 min read

Best Law Firm Website Design Trends of 2023

You understand the power of representation. Make sure your website represents your legal team with the best…
Elyssa Coultas

How to Choose Your Web Design Agency - Featured
Web Design 15 min read

How to Choose a Web Design Company

Looking to overhaul your website? Here are 4 tips to help you choose your web design agency…
Christopher Lara

Schedule a Consultation