Definitions >

Hero Image

What is a Hero Image?

Nope, this has nothing to do with capes, bodysuits, or wearing underwear outside your pants. (Sorry). Think of the big, eye-catching banner image at the top of a site that spans the entire width of the screen. That’s our hero image.

hero image cover

A hero image, also called a hero header, is a great opportunity to make a bold impression. Humans are visual creatures. Use a high-quality image to make an instant emotional connection, so you can reel readers in and let them know what your business is all about.

What You Need to Know About Hero Images

Hero images appeal to our visual nature more than standalone text. Use them to showcase your brand’s vibe and aesthetic; and, concisely communicate your brand’s mission, USPs (Unique Selling Points), and even a CTA (Call To Action) in the form of a button or link.

1. The Importance of a Hero Image

Importance of a hero
(Source)

It only takes 50 milliseconds to form your first impression of a website. The right image can make or break a reader’s first impression. Use an image to establish trust, demonstrate your site’s (and brand’s) identity, and make your visitors want more of what you’ve got to offer.

2. Hero Images Can Be More Than Images

More than images hero
(Source)

Bored with the single image model? Set up a slideshow that automatically rotates through multiple, contrasting photos. Showcase a bold font, an intricate texture, or an informative illustration that represents your brand. Put up a video, or let an awesome mockup of your product speak for itself. Include a call to action: maybe a Book Now! or a Learn More button. Think about examples you’ve seen in the wild—the possibilities are endless.

3. Possible Disadvantages of a Hero Image

Before you get too excited: there are a couple of things that could go wrong. A bulky hero header (like a video, GIF, or multiple high-res pictures) can slow site loading times, especially on mobile devices. You don’t want customers and clients waiting on you. Make sure the image you choose adds value to your site experience. Boring, cheesy stock photos break trust and fail to communicate your brand’s identity. Plus, they’ll drive potential clients away.

4. How to Test Hero Images

How to test hero images
(Source)

Stuck on which image to pick? No worries. Test them both out before you make a decision. Pick your top two choices and run an A/B test. Show half of your visitors the site with the “A” photo, and the other half the site with the “B” photo. Track which version of the site converts more leads into customers over a set period of time. Boom: you have a winner!

How to Use Hero Images in Modern Design

Picking the perfect hero image for your site is simple if you know exactly what you’re looking for. Your ideal image is high-quality, goal-oriented, colorful (or texture-rich), and emotionally evocative. Your site needs to POP. And the payoff is immense. You’ll build trust, broadcast your brand, and entice people into exploring (and wanting) all that good stuff you have to offer.

1. Focus on Your Website’s Goal

Hero Charity Water
(Source)

If you haven’t already, think about what you’re offering, and what your ideal visitor will do on your site. Will they subscribe to your newsletter? Donate to your cause? Book a room? Buy your product? Once you’ve got your goal pinned down, highlight it with a short text feature. You can even put a button right in your hero image with a link to your conversion page.

2. Experiment with Colors, Textures, and Images

Hero Atlassian
(Source)

Not every hero image has to be a photograph. Use the power of type, color, and texture to your advantage! Good type, the right color scheme, and a rich, sensory texture can help evoke on-brand emotions. If you’re not sure what works best… use an A/B test!

3. Use High Quality Images

If you do choose to go with a photo or an image, make sure it’s high quality. A hero image is the centerpiece of your website and a casual visitor’s first impression. Not only will a blurry or low-res photo look unprofessional, it can also misrepresent your brand and drive away potential customers. After all, if quality isn’t an important part of your brand image, why would potential customers think it’d be part of your product?

4. Appeal to Emotions

Hero Kindeo
(Source)

Imagine what you want visitors to feel when they learn about your company. For example, a hotel might want visitors to feel comfortable and relaxed. These feelings will help a reader trust you before they read a word you’ve written. Just think twice about using a stock photo: boring stock photos can have the opposite effect on readers. Be sure you’re not creating a flat, bland experience that drives readers away.

  1. Mood Board, noun: Feel like your design process is...missing something? A mood board might just be it. Read the full definition »
  2. Raster Graphics, noun : A definite design staple. If you don’t know about raster graphics yet, you’re missing out. Read the full definition »
  3. Vector Graphics, noun: The vector is the yin to the raster graphics’ yang. Know both to become unstoppable. Read the full definition »

Thanks for taking the time to learn about hero images. If you’re on the hunt for more practical design knowledge and useful tips, check out the above links. (See you there!)

Try Figma for free.