What Is A Hero Image?

Wikipedia defines hero image as “a large web banner image, prominently placed on a web page, generally in the front and center.”

It usually dominates a home page, and can be linked by the visitor to the company or organization’s image. Because of that, if you’re going to use a hero image, hero slider, or even a hero video, it’s important to select the right one, or “ones” if using a slider, so you are displaying the right image.

Why you SHOULD use a hero image

• It captures an image the website should project. A corporate website will show happy workers, insurance companies will show patients or people getting help from doctors, sports teams will show fans and the team in celebration, a WordPress agency like BeBizzy will show computers, websites… things like that. These visuals are meant to draw out desired emotions from the visitors.
• I’ve also heard it described as an opportunity to display the unique value proposition of the company. This is marketing jargon for how you plan on solving the customer’s problem.
• Hero visuals can also simply be a visual tool that adds some color to an otherwise boring or stale topic. No one like to read about car insurance, but drawing visitors in with compelling photos will make the read easier.

Why you SHOULD NOT use a hero image

• They take up valuable space on a website. Hero visuals are usually full width, and can be also run to the top of the website “fold.” So if your visitors aren’t drawn down the page everything below the hero can be lost.
• Given that the hero will be viewed in so many screen resolutions and positions, hero images can be cropped or bleed over the borders of these displays, possibly missing the desired best looks, call to action copy, or even a button or link.
• Large images, and especially videos, can take a long time to load so it can cause the page to look odd during loading, or even to jump as some elements are loaded. But even worse is when a low resolution image is tried to be used a full-width hero image and it causes pixelization, stretching, and other visual issues.

How to properly use hero images.

If you are going to use hero images, and I’m not saying you shouldn’t, there needs to be some thought put into how to properly use them.

• Make sure the resolution is high enough to be visually appealing. Most image programs like Use JPG instead of PNG and other bulky formats. Photoshop, GIMP and others have a compression feature that can help tighten up the file size without losing too much sharpness so experiment with compression to see the breaking point. The same can be done with most video and slider formats if you have access to some tools.
• Take a look at how the hero will display in mobile or portrait format. Adjustments can usually be made on how the image is displayed with an aimpoint (center, bottom left, etc) that will ensure the most desired portion of the image is show on different devices. In some cases it may also be decided to remove the hero image on mobile just do to load times, position of the CTA, and maybe even straight up visual appeal.
• If a text overlay is displayed check to see it can easily be read. Sometimes an overlay filter an help by lightening/darkening, colorizing, or even using some advanced filters like polarization will help the text “pop.” Be sure to use an easy to read font that conveys the emotion you want the visitors to feel. Impact font shouldn’t be used on a yoga website.
• Motion is good if you can execute this properly. Some sliders have a built-in “Ken Burns Effect” that pulls a photo away from the user. Others have moving dots, spider webs, or lights to keep a visitor engaged.
• Compress and size the visual as much as possible while still keeping it’s appeal. A typical 16:9 laptop and monitor will be roughly 2000 pixels wide, so plan accordingly with your image and video.
• And finally, strategize if you can get your message and CTA across to your visitor WITHOUT it. Just because 9 out of 10 sites in your vertical has a hero, does YOUR SITE need it? Will a big red “BUY NOW” button work better? Can you easily A/B test with and without to see what converts better? You know who DOESN’T have a large hero image? Google, Facebook, Amazon, CNN, State Farm Insurance, ESPN and many more leaders in many verticals.

Hero images are a great way to brand your site and your business with a look and feel you want to embrace. But it can cause long load times, difficulty in responsive modes like tablets and phones, and if the wrong image is selected, not what you want your customers to know you buy.

Choose wisely, get rid of them if it’s not helping, and if you choose ultimately to use them, follow the rules mentioned earlier.

Do you have questions, experiences or questions related to this topic? Head over to @Bebizzy on Twitter and send them there. I’m not a huge DM user, so just mention me in your comment. Then click in your podcast player to subscribe and leave us a review. Then you can sit back, relax, and leave the technical stuff to us.

WordPress News

• Google is going to be moving to Mobile Indexing in March 2021. This has been rumored/threatened for years, and it’s finally going to happen. So get your sites ready quickly, it’s coming and it will also be a podcast here soon, so stay tuned.
• WordPress 5.6.1 is out. I’ve installed it on several sites with no issues, but run your backups and update.
• And finally, WhiteHouse.gov is back on WordPress! And if sounds like the government is recruiting in the source code. Line 9 of the code reveals “If you’re reading this, we need your help building back better. https://usds.gov/apply ” Happy job hunting, WordPress users.