8 min read
Most online stores and theme templates have one major component in common, a large, featured image or series of images prominently displayed on the homepage.
These images are often referred to as hero, banner or carousel images. No matter what you call them, they’re the same and serve a very important role for online businesses.
In this post we’re going to look at the importance of hero images, introduce you to some best practices for using them as well as provide some incredible tools and graphic resources to help you create beautiful and persuasive hero images for your online store.
Let’s dig into it.
A hero image takes the majority of the real estate space on the most seen page of your entire site, the homepage. This is prime real estate in the online world, and means hero images can be a very valuable asset to your business if used correctly.
You can use this valuable piece of real estate for several purposes depending on your business and goals. Let’s take a look at some of the most common approaches for using hero images below:
One potential use of your homepage hero image space is to help build your brand. This method can be particularly effective your business and products have a great story that add to the store. Use your prime real estate for this method involves featuring key information that educate your visitors on your brands story.
Another common approach is to feature answers a commonly asked question. This could be answer your most common objection, or to address a time sensitive questions your visitors may have. For example: “FREE Shipping to USA”.
Perhaps the most important use of this space can be to explain your brand's value proposition. Your value proposition explains exactly to your customers the value your product(s) deliver them. What better place to tell your customers your value proposition than right on your home page where the majority of visitors land.
One of the most prominent uses of this key space is to feature an announcement like a sale. The homepage hero image is a great place for sale notifications since it will reach the most number of visitors.
Finally, another popular uses of hero images is to showcase a product or a particular product line. This can be perfect for when you launch new products and want them to receive the most amount of attention, as well as featuring products with the highest profit margin or products you are trying to liquidate.
No matter what you choose to do with this space, there are several things a good hero image should include. Let’s take a look at the most important elements of a hero image.
There are three elements to making a great hero image. A thoughtful combination of each of these elements can lead to a persuasive hero image that compels the visitor to take the action you want them to, in line with your conversion goal.
Let’s take a look at the three essential elements below:
Eye-Catching Image - The human eye loves big, bold and bright images which is precisely why great product photography is so important. The hero image is no different. Your hero image should feature graphics, images or photos that are high resolution and catch the eye. Almost all themes will have the suggested image resolution listed so you know exactly what size to make your hero images.
Catchy Copy - Your copy is the words you use to communicate your message. Due to the nature of the image and the time you have to communicate your message, your text should be kept very concise and to the point.
Strong Call-To-Action - Finally, all hero images should feature a prominent call-to-action. Text or a button that tells the reader the action you want them to take. Some examples include SHOP NOW, READ OUR STORY, FIND OUT MORE etc.
You’ll notice that many themes and sites will feature a rotating hero image which will rotate several images every few seconds. This feature if typically beloved by designers as it features a big, gorgeous piece of real estate to display their great designs, however usability experts have been frowning upon them for a while due to the distracting nature of the constantly moving images that are generally out of the control of the viewer.
There have been some tests done that show that rotating hero images beyond the first one almost never get clicked. Experts have said that their recommendation was to ditch the rotating banners all together.
The post references one study by Notre Dame University showing that the first image out of five images received 84% of all clicks.
The general consensus is that instead of featuring several hero images on rotation, you should instead focus on one single image. However, rotating images may be right for your business, and with some planning, they may work very well for you.
If you want to use rotating hero images for your store, consider the following:
Use a consistent style across all hero images.
Keep the content simple so they can be digested by your reader quickly.
Keep the images as small in file size as possible so as to not slow down the load time of your website.
Keep the number of slides to a minimum and only feature what’s really important.
Make navigation obvious and controllable for the reader.
Perhaps the biggest hurdle for new, non-design or tech savvy store owners is creating beautiful new hero images on a regular basis. However, in recent years, there has been a variety of tools that have come out that can make this process easy for even the least tech savvy entrepreneur.
There are an infinite number of places to go online to find images for your website hero images. Some are better than others though. To help your search, we’ve listed some of the best sources for you to find your next image:
The Stocks - (Free) The Stocks brings together all the best royalty free stock photos from the top resources in one, clean, easy-to-navigate website. Not everything is searchable, so you may have to spend some time searching through all the resources to find good fits for your brand.
Death To Stock Photo (Free) These free images are only available by email. Because these photos are sent you you by email once per month, it's a good way to start building your own collection of unique images you can use in the future.
Pixabay - (Free) Over 400,000 free photos, vectors and art illustrations.
Graphic Burger - (Free) A great resource with photos and images free for commercial use.
PicJumbo - (Free) PicJumbo is a really good resource for high quality, free stock photos. A huge selection and all categorized makes great images easy to find.
morgueFile - (Free) morgueFile has been around for a long time and has thousands of free stock photos that are all searchable.
If you have a small budget to work with for your hero images, consider some of the better paid resources for higher quality images and photos. Because these are paid for, there are fall less people using them on the web, making your hero images more unique.
Creative Market - (Paid) One of the best marketplaces for images and graphics. The quality standards are high here and prices are reasonable.
500px Prime - (Paid) An incredible resource for high-end, beautiful and unique photos from photographers from all over the world.
Dollar Photo Club - (Paid) Just $1 per image and a great selection of premium photos.
Stocksy - (Paid) Another great resources of curated images from curated photographers. Images range from $10 for small images, $25 for medium sized images and $50 for large images.
Of course, stock photos will always be just that, stock photos. If you have some time and maybe a bit more of a budget, consider shooting your own hero image photography like Amos Brand.
Shooting your own photos doesn't have to be expensive or complicated. You'd be surprised at the quality of photos you can get from your smartphone. To get started, check out one of the free online classes from CreativeLive on photography to understand the basics of photography.
You may also want to consider checking out our guide on taking great photography with your smartphone. Many of the tips in this post can also be used for taking beautiful hero images for your homepage.
Adobe Photoshop ($9.99/month) is the program of choice amongst graphic design artists and photographers, however, it carries a fairly steep price and a big learning curve. The good news is that there are several alternatives that are much more user friendly and free.
Pixlr - (Web-Based, Free) A free web-based and downloadable image editor. If you have some familiarity with image editing, you’ll find Pixlr to be pretty easy and intuitive to pick up. Unfortunately, with no prior experience to image editing, you may still find Pixlr a little difficult to navigate. Try starting with the web-based editor.
Pixelmator - (OSX App $29.99) Pixelmator is a feature rich and powerful image editor for OS X that comes at a nominal cost of $29.99.
Canva - (Web-Based, Freemium) Canva is a fairly new web based image editor app, and it goes beyond simple image editing. Their goal is to make design simple for anyone. The app makes it easy to select the image size you're looking to produce, and includes design elements like built-in including stock photographs (free and paid) and fonts.
PicMonkey (Web-Based, Free) PicMonkey hides its power behind a simple and intuitive interface. Although PicMonkey is free, there is a premium version that provides a lot of extra for a small monthly charge.
There you have it, the reason, purpose and uses of a hero images on your homepage. Changing these images up frequently keeps your store feeling fresh to repeat visitors, keeps it lively and drives visitors to takes the actions that are most inline with your conversion goals.
Here at UniformMarket powered by Sellers Commerce, we provide you with tools such as B2B Program Manager and Retailer Pro, which can connect you with the products and data you need for your employees or business. Whether you are a uniform retailer or an energy company needing to fit your employees with new uniforms and gear, we have the tools and services for you. Contact us for a demo today!
