What does a hero image look like, exactly?

A hero image is a large banner image placed at the top of a webpage. The hero image does the heroic task of communicating crucial information about a website to visitors as soon as they land on that page. 

Depending on the goal of the website you’re creating, the hero image might be overlaid with a CTA encouraging visitors to click through to browse products or learn more about a brand.

The hero on your website doesn’t have to be a static image — video also makes for an exciting hero banner that instantly grabs attention.

Hero images add visual interest to a website

Which feels more exciting to you: landing on a website that leads with a title and a block of text, or landing on a website with a captivating image at the top of the page? 

Using a hero image in your web design is a simple way to add more interest to any website, no matter the subject matter. 

The most obvious choice for a hero image might be a visual that depicts a product or service offered. But thinking outside the box can also make for a more intriguing design — and if the brand behind your website doesn’t sell something tangible, you’ll need to get more creative with your image choice. This is where stock photography (and videography!) comes in to save the day. 

Images of people, scenes from nature, and abstract textures are all popular stock photo choices for hero images for many types of websites. Of course, it can be all too easy for this sort of visual content to have a cookie-cutter look to it. Choosing stock images inspired by your brand can help you avoid that classic “stock image” look. We’ll get into just how to do that below.  

Where to find a great hero image on a budget

So, what if you don’t have beautiful photos at hand for your website hero image? Maybe you’re designing for a client with an SaaS company that doesn’t have any product imagery available. Or perhaps you’re creating a website design for a wedding planner who’s just starting out and doesn’t yet have photos to use. 

Even if you’re in need of imagery that shows a specific type of product or service, there’s a plethora of free and low-cost stock photography libraries out there — at least one of them will probably have what you’re looking for. Pexels is just one useful option for high-quality, free to use photos and videos. 

How to select the perfect hero image 

You’ll want to be pretty picky about the hero image you use. After all, it’s the very first thing people will see when they arrive at your website. 

Here are some key tips to keep in mind as you begin the search for the perfect hero image.

Think about the mood of your website

Do you want to make people feel excited and amped up? Relaxed and reassured? Curious and intrigued? Take some time to consider what feeling you want the website you’re designing to communicate, and keep this in mind as you search for a hero image. 

A high contrast image with bright colors will feel more punchy, while an image with less contrast and more muted tones will have a more peaceful feel to it. Your choice of hero image will set the tone for the website that follows it, so think through what you want that tone to be before you begin your image hunt.

Get things moving with a hero video

Using video for your hero image can really add some excitement to your website, instantly making a page feel more compelling. The best videos for a hero tend to be ones that aren’t too complicated or action-packed, and as with photos, people make a great addition to hero videos.

Select a strong focal point

A hero image with a captivating focal point can help lead the eye wherever you want it to go — for example, to your CTA button directing people to start shopping. A beautiful mountain vista certainly makes for a nice hero image, but a mountain landscape including a hiker helps direct the viewer’s gaze to the perfect location for some text or a link. 

Use the hero image to send a message

Even if you’re not depicting a product for sale within your hero image, you can still use it to quickly convey crucial information about your brand. Choosing an image with people in it tends to have a more relatable and dynamic feel. 

For example, if you’re creating a website for a landscaping company, instead of a close up of some leaves, you might choose a header image depicting a family relaxing in a beautiful garden, helping visitors associate satisfaction and happiness with your brand.

Leave space for title and text

This one is optional, as you might choose to lead with a hero image without any text overlay at all. But if you do want to add a title, button, or any other elements over your hero image, you’ll want to keep this placement in mind as you look for the right image. It might be hard for people to read text overlaid on a hero image that’s full of detail and texture. 

Stay on brand with color

This one might be a no-brainer, but it bears mentioning that the hero image is an ideal place to emphasize the colors of your brand and really play up your website’s color scheme. A black and white hero image can also be a good option for a website that has a more classic or minimalist feel. Many stock photo libraries allow you to search by color, making it easy to find images that match or complement the exact hex codes in your website color scheme. 

Choose the right image sizing

Naturally you want your hero image to be high quality, clear, and focused. But keep in mind that an overly large image size may slow down your page load time significantly. 16:9 is the most standard monitor resolution, so this is typically going to be the best ratio to choose for hero image size; 1600 by 500 pixels is a good recommendation. You may also want to compress the image file to ensure it’s not too big.

Make sure it’s responsive

Your hero image might need to be adjusted to fit smaller screens. Keep mobile screens in mind when selecting a hero photo or video, as the image may be cropped significantly on mobile, potentially cutting off some of the visual interest. Images with the focal point to the left or right of center might not be the best hero option for this reason. Or, you might need to ensure that the image will be cropped to correctly show the focal point on mobile devices.

Keep accessibility in mind

As with any images and videos on a website you create, accessibility is important. Remember to add the appropriate alt tags and descriptions for your hero images.