Article:

Photography & web design: Hero image best practices

Did you know it only takes 50 milliseconds for a user to form an opinion about your website? When we have so little time to make a good first impression, it’s crucial that we get the design right. One overlooked element of modern design is the hero image.

The hero image dominates the above the fold area, yet it’s often hastily chosen without any consideration for its effect on the user experience or conversion rates. Here’s our top tips for selecting the right kind of hero image to grab attention, convert users and complement your design.

What is a hero image?

One of the most popular web design trends today is the use of hero images. According to Wikipedia, a hero image is a…

“…large banner image prominently placed on a web page, generally in the front and centre. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site’s most important content.”

If you were to break down a conventional website’s structure, the hero image would dominate the first half of the screen (the above the fold area). This area is critical for engagement and conversions – after all, it’s the first thing visitors see when they land on your site.

As the introduction to your content, the hero image needs to be carefully selected and have a purpose. It should tell a story and welcome your visitors and more often than not, encourage people to take action. This image can be static or dynamic (videos and animation) and should directly relate to the content.

The benefits of a hero image

The hero image is a key element in web design. It serves several purposes on a website, including:

  • Sprucing up the design of a web page
  • Building depth into page content
  • Immediately grabbing the visitor’s attention
  • Establishing their trust
  • Enticing them to explore your site further

Most users want a clear understanding of what a website is all about. A hero image can help you deliver this understanding more effectively because people tend to respond more positively to visual content. By adding an image that relates to your content along with a succinct message and clear call-to-action, your visitors can immediately tell if your product or service is what they’re looking for.

Using hero images on your website

Good design is an absolute must for a website these days. It’s the first factor that influences a visitor’s opinion of your company and plays an important role in increasing conversions. In fact, one study found that 94% of the reasons cited by respondents for mistrusting a website were design-related. This calls for a complete rethink of the way we use hero images. Here’s our top tips for getting the most out of your hero image and making sure it fulfills its purpose.

Image size

Aesthetics aside, when it comes to visually representing your brand, optimisation is not only imperative, but is a necessity. You want the hero image for your website to be large enough for any size screen but not so large that it will significantly slow down the load time on your page.

Use the right dimensions

With web images, you want to strike the right balance between size and resolution. So start by making sure the image is correctly sized (width and height) as well as having the correct pixel density for the image size. In terms of size, there are 3 main measurements to pay attention to:

  1. File size: The number of bytes the file takes up on your computer, measured in kilobytes
  2. Image size: The actual dimensions of your image, measured in pixels
  3. Resolution: The quality or density of an image, measured in dots per inch (dpi)

The minimum resolution on most computer screens is 1024 x 768 pixels, so we recommend a hero image of around 1600 x 500 pixels so you can maintain a 16:9 ratio as a good rule of thumb. Then depending on how it responds and looks on mobile, you might need to switch out the hero image for a smaller screen to 800 x 1200 pixels.

Use the right compression

Once you know the height and width of your image, you’ll want to shift your focus on compressing your image to make it the smallest possible size without making it pixelated. As a general rule, try to reduce the size of your image to around or smaller than 400 kb.

  1. Use the right format

Photographs should also be saved and uploaded as JPEGS. This file type can handle all of the colours in the photograph in a relatively small, efficient file size. And by using JPEGs, you won’t end up with the enormous file you might get if you saved the photograph as a PNG.

Image layout

Ensure the image is responsive

Once you’ve added the image to your site, make sure it’s responsive and doesn’t appear blurry or cut off on smaller screens. Photos should be framed and composed with their intended web application taken into account and as a general rule, important content should be centred in photos where possible so not to be cropped out when viewed on these smaller screens.

For the best results, check that the image takes up 100% of the containing element. This starts with the basic principles of photography. For example, take a wide shot so you don’t cut off the top and bottom of your image. If your hero image features people, there’s nothing worse than a cut off head.

Set a focal point

A focal point is important to lead the viewer to the target you want them to focus on. This could be either your product / service or an interesting feature in your image. This helps to better align hero images, so things are not hiding behind the content area or the navigation.

Not only does an unfocused image give your website an unprofessional look and feel, it misrepresents your brand and can lose trust in your company. So make sure your image is captured in the centre of the shot. That way, you can ensure that it’s the focal point of the hero image and eliminates the chance it will be chopped off when uploaded to the site.

When it comes to framing your photograph, our top 2 tips are:

  1. Crop any unnecessary background space in the image so the emphasis is on the product, service or people
  2. Go for a landscape image rather than a portrait, as these will work best for modern computer monitors

Image position

Use bold typography

If you’re planning on using a text-on-image design, ensure that the main part of the image is visible and understandable when text is placed. Design for contrast by choosing bold, easy to read typefaces that mesh with the visuals but stand apart from them. Also make sure to keep buttons, text and other design elements from covering important parts of the photo, like people’s faces or products.

Go easy on the colours

Where images will be used as backgrounds to text areas (e.g. top banner), try to place consistent colours/textures behind areas where text will sit to maximise contrast and readability. If your images is bright and colourful, consider using black or white text. Ghost buttons are also popular on hero images, instead of coloured buttons. Optionally, you can add a subtle darker gradient or overlay to the image to make the text easier to read.

Don’t let your hero image play the villain. At Bang Digital, our team of passionate and professional web developers can help you develop a website that’s not only fully functional, but contains all the elements you wish to have including an attention grabbing hero image. Get in touch today to discuss.

About Brad Farleigh

Brad developed a taste for the web and after studying Multimedia and later went on to study a Diploma of IT (Web Development); fine tuning his skills not only in class, but whilst undertaking work experience at a Perth based international web firm. Brad is excited about the advances in social media and how it’s allowing companies to target their markets in new and innovative ways.