Skip to content
What is a Hero Image?
You’ve been asked by your web designer to provide a hero image for your web pages. But what exactly is a hero image? Why is it one of the most crucial design aspects of your website? And more importantly, how do we use them properly? Today, you’ll learn all of this and more.
A hero image is a term used in web design for the oversized banner at the top of a page. Usually full width, and containing captivating copy or calls to action, this image serves as a landing spot for your visitors and must accurately and engagingly convey your website or page’s main goal or theme whilst encouraging the visitor toward your conversion goal.
Within your hero image you can display your business’ USP or special offers and encourage visitors to take your preferred action. With the average user taking just 0.05 seconds to form an opinion about your business it pays to invest a time in getting the hero image right. This is especially crucial considering it’s the first thing your visitors will see.
What are the benefits of a Hero Image?
Hero images are the first elements of a web page that your visitors will see. We all respond extremely positively to visual content and having high quality visual statements at the top of your page reinforces to your visitors that this page contains the service or content they’re looking for and encourages them to dig deeper into your website.
The hero image immediately sends a bold statement to your visitor and grabs their attention. Secondly, it influences your visitors’ decision making early on in your customers journey, ultimately increasing conversions. This is why it is so important to get the perfect hero image and to make sure that it’s performing its function effectively over time with split testing.
A good hero image will increase conversions by instilling trust amongst your visitors and curiosity about your offering. A bad hero image will drive your visitors away.
Hero Image best practises
So we now know that the hero image is the first impression for your visitors. Now we need to know the factors that go into crafting a profitable hero image.
High Quality Images
Today’s internet technology allows us to serve our visitors with high quality, attention grabbing images at quick speeds, provided your site and images are optimised correctly. Let’s use this highly communicative aid to our advantage. Here are some aspects to consider when creating your hero image.
Image size
We recommend keeping the image size around 1,800 pixels wide, this caters for larger screen sizes and ensures your images aren’t stretched or blurred. For a hero image that covers the full height of the screen we recommend a height of 500 pixels. We recommend and aspect ratio of 16:9
Hero image Content
Your hero image needs to accurately represent what your page is about. But here’s the kicker, it doesn’t even have to be an image at all. It could be a video (youtube video links work best) or a slideshow of images.
What should you include?
If you’re selling guitars, take some high quality images of your equipment. Perhaps a photo or video of someone using the setup and conveying their enthusiasm for the product. If you own a membership site on serial killers, show interesting images of the tools or scene of the crime that will compel the reader to read on and seek out the absurdity surrounding the case.
Your image should also convey trust, you can do this via the professionality of your image setup and by having users/customers convey their emotion at using your product, whether that’s enjoyment or the satisfaction of solving a problem or pain point.
Subject focus
keep in mind that your visitors’ screens are going to vary in size. Our websites are responsive by design. This means that your layout and images will change to best suit the viewers screen size. With this in mind we should make sure the subject of our image is well within the frame as the image may appear ‘zoomed in’ on some screen sizes.
Mobile Responsiveness.
We’ve talked about responsiveness between your desktop, tablet and mobile views of your website. Mobile responsiveness is increasingly important as society switches to a more convenient way of consuming content. Some sites we look after have over 90% of their page views on mobile. If you’re not optimising for mobile, you’re losing traffic.
We’ll realign your image to suit mobile phones and tablets. Just make sure the images you provide us have a focus point which would look good when clipped onto a mobile phone screen. Alternatively, you can send us a separate image for mobile view. This image will replace your desktop image when being viewed on a mobile phone. Just make sure to clearly label which image is for which device when submitting your photo.
Image speed optimisation
Load time is a hugely important factor in the success of your website with 40% of users abandoning a website that takes longer than 3 seconds to load.
We’ll take care of this for you within our website packages. This is just one part of our website optimisation services.
Optimisation is the process of making sure your image is served quickly to your visitors without losing image quality. There are various ways we can do this from sitewide caching techniques to resizing, compression and file conversion. Software such as Photoshop and Affinity are powerful tools that can achieve this for you.
If you’re going to be regularly uploading images to your website we can set up on-demand optimisation of your images. This means you just upload your images to your website and your images will be optimised quickly. This improves your workflow and removes the need to buy expensive tools such as PhotoShop.
Should I Leverage Caching and CDNs?
More on the technical side, but again, it’s our job to set this up for our clients if you ask. In its simplest terms, website caching is a technique which developers employ to improve the customer experience by downloading page content to the visitors browser upon first visit.
Subsequent visits will then quickly display the downloaded material to the user instead of connecting to the server and downloading the full page for each visit. Not only does this improve speed for the visitor but it also reduces load on the server which will make every visitor’s experience quicker and smoother.
CDNs or Content Delivery Networks are a great service for speeding up loading times around the world. Again, in basic terms, a CDN is a network of servers based around the globe. A copy of your site is stored on each server around the world. The shorter distance between the server and the user speeds up the time it takes to load your web page.
For example, if your website is hosted in London and a user visits from Florida, instead of them having to access your website information all the way from London they can access an exact copy from a server in Tampa Bay, thus decreasing the load time and improving this users experience.
Engaging Copy
Your hero image should be a split second representation of your offering. You’ve got limited space, as such your copy needs to be clear, focused and punchy. Here are a variety of factors you may need to think about when creating the copy for your hero image.
Evoke trust
One of the key stumbling blocks for many websites is the inability to build trust in their visitors. I’ve mentioned in previous articles how important it is to serve your visitors with multiple trust indicators at various stages of your sales funnel.
Your hero image has a huge impact on the way your visitors and potential customers view your brand or service. You should be authorised and available within your chosen industry. If you’ve won an award, mention it. Put a face behind your website and encourage visitors to learn more about the quality of your service or product with a strong call to action.
Be relevant with your copy
Mention the core benefits of your product or service and how it will alleviate your potential customers’ pain points. Showing value up front will encourage your client to click on your call to action. Remember to be real to your values and evoke emotion where necessary.
Calls to action
Your call to action should be to the most important pages for your visitor to visit on your website. You can include multiple CTAs although we wouldn’t recommend more than 3. Use no more than 5 words including phrases such as “sign up now” or “get your free trial” or “learn more about us”. Don’t let your user get lost in your website, make sure you guide their actions. By using analytics and A/B testing we can gain a real data driven insight into what users want and how they are engaging with your site.
Why should I A/B test Hero Images?
Getting a great hero image in place on your website is just the first step. As part of your ongoing efforts to maximise your website earnings you should be reviewing your analytics and making changes to your website regularly. A/B testing is the perfect method to see what works and what doesn’t.
In a nutshell, A/B testing splits your visitors randomly into 2 or more groups. Each group is served a different version of the web page. This allows us to test which copy is engaging our visitors and generating more clicks, or which images are users more likely to engage with. By constantly testing various elements of your website we can dial in the perfect formulation to squeeze the most conversions out of your visitors and earning you more money.
Where to source your hero images
There are plenty of places to source your images from, but getting the right images will take you time to research and collate.
The best images to use are professional images of your own business or setup. Not only does this convey more trust and authenticity but will accurately convey your services to a degree that stock photos might not be able to replicate.
That being said, you can get some great stock images out there and if you really have to use them then you can use services such as ShutterStock to obtain a large range of professional images. Our Image Sourcing benefit within our website build packages provide you with sample shutterstock images that you can use as inspiration to take your own images or you can simply purchase the licence and we’ll embed the image directly into your website. You can also get good stock images from site like –
How can we help?
Now you’ve learnt what goes into creating the perfect hero image you can get to work crafting and testing your own. We provide help with every aspect of the process mentioned above. Here’s how Cardiff Graphic designer can help you –
- We create your hero image with a proven design layout
- Manage your photoshoots to obtain high quality and representative images
- Source your images and graphics via professional portals
- Optimise your images for desktop, tablet and mobile
- Speed optimise your hero image
- Write engaging copy with our copywriting service
- Ongoing A/B testing of your pages to squeeze conversions.
- We Make full use of your traffic acquisition efforts such as social media, paid marketing or SEO efforts.
If you need assistance with your website design give us a call on 029-2128-6868 or email us at hello@matthewbushen.com we can’t wait to get to know you and your business.
