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.
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 hero image is a key element in web design. It serves several purposes on a website, including:
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.
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.
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.
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:
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.
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.
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.
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.
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:
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.
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.
Awards aren't everything. But we are pretty proud to be Perth's most awarded Google Premier Partner agency. Over the years we have been recognised by both Telstra and Google in their award categories, which are highly competitive. Here's a few of our PPC advertising accolades we are particularly proud of.
