Over the last few years web designers have decided that every website should have a giant background image or video covering the screen, the entirety of the first impression. Sometimes known as banners, the hero images dominate the visual landscape on most website homepages. Maybe this design fad is an interim replacement for the slider, which has fallen out of favor due to sliders hindering performance? But most hero images also load slowly. And hero videos make me want to strangle every web designer who has never experienced rural internet connection speeds.

Marketers claim that engaging, storytelling hero photos will draw visitors into your site, or at least get them to scroll down to find the actual content. But how quickly will the visitor leave if that huge image loads slowly? And do you really have a photo that can spell out your mission and what’s on your website without words? Why not just use words and a smaller photo?

Hero Images and Website Performance

So you have a 2000 pixel wide by 1500 pixel tall image at the top of your site, nearly 2MB of data to send over the wire. The unreadable white header text loads as the background image slowly reveals itself line by line. Not only is this agonizing to watch on a desktop, but you’re also delivering the same 2000 pixel wide photo to mobile phones with 350 pixel wide screens. This is a common problem with hero image topped websites, designers fail to send smaller images to smaller screens — or important elements of the giant photo get cropped out of the phone view. Do you want decapitated people welcoming visitors to your site? Designing hero images properly, so they don’t hinder performance or look silly, takes research, planning, and some coding.

To research which devices people are using to access your existing website, check your Google Analytics (see Screen Resolutions under the Technology tab.) Keep in mind that people are less patient on phones. So if you have a slow pig of a site your smaller screen resolution numbers are lower than they would be if you had a fast site.

To inspect your hero image and see what your site looks like at different resolutions, use the Chrome browser and hit F12 on any website. These are Chrome’s DevTools. Refresh the page in DevTools mode and you can select different device resolutions. Hit F12 again to go back to your standard view.

While there are many tools to make the hero image an acceptable choice, e.g. tools to create different size images for different size screens, it’s a time-consuming choice, of questionable effectiveness.

The Video Hero

Quebec’s tourism office does an amazing job marketing the province’s outdoor activities with targeted Facebook ads that I often click. However, when I go to their website I’m faced with a whole lot of loading circle.

Video Hero

As a geographic neighbor to Quebec and frequent visitor, their ad targeting worked. However, they should also know their audience in rural Maine has slow internet connections. Google PageSpeed Insights gives QuebecOriginal.com a 12 out of 100 for mobile performance. While the speed problems are not all about the video header, it’s clear Tourisme Quebec spent a lot of money on a website that at least some of their target audience will leave before viewing any actual content.

Unless you’re a videographer or promoting a movie, there is no good reason to force video on people, or to lose the chance to deliver a message at the top of your site. Let people choose to watch videos — embed YouTube videos on blog posts, then you’re not hosting the data, Google who owns YouTube sees the content the video relates to, and people can engage with the video (like or comment on YouTube and/or on your blog post.)

Video headers are almost as obnoxious as the TV screens shouting ads at gas pumps. Who thought that was a good idea?!

Hero Images and Call-to-Action Buttons

As menus became hamburgers and people started tuning them out, the need to create means of navigating within website content grew. And a top centrally located call-to-action button became standard. This button, somewhere in the top center of your homepage, is the most likely place people will click, and should go to the page you most want people to go to. The pro of the hero image is that it can help a call-to-action button stand out, as exemplified by CharityWater.org.

Hero Images and Call to Action Buttons

CharityWater.org shows how to choose a “storytelling” photo, place an engaging message on top of the photo, and highlight an inclusive call-to-action button. So is this a hero done right?

The problem is their website is stuck in the mud, scoring 25 out of 100 on Google PageSpeed Insights.

Websites Without Hero Images

Are there any? Heifer.org does a nice job balancing text and image on the top of their site with a prominent call-to-action button, but it’s still a heifer of a website.

Web Design without Hero Images

Since first getting involved in this wide web world I’ve been on a quest for simple, fast, elegantly designed websites. Help me out because I can’t find any.

Know any fast, simple, effective websites? Hook us up in the comments!

Leave a Reply