5.5 The Hero Image

While browsing websites, over the last few years, I have fallen head over heals for cool websites where the home page has one huge image that takes up the whole page, adorned with links to other pages somewhere on it. I had no idea that you could add a image that size and still be able to have the site load in a decent amount of time and have it render, perfectly.

In the LinkedIn Learning video “HTML: Images and Figures,” everything you’d ever want to know about using HTML to add images to your web design in covered. The instructor, J. David Eisenberg – who is an, author, Computer Programmer and Computer Science Instrutor at Evergreen Valley College in San Jose, Califronia, is pretty thorough, with his explanation of the hero image. I’m hoping that that this is not too far off of the lesson on images.

Sometimes referred to as a “hero header,” a hero image is identified by an oversized banner image at the top of a website, often below the navigation bar and, typically, above the rest of the webpage content. I found more info about this, seemingly, cool web design feature on the Canva.com website – which I use to post my “Thursday Throwback” images on Instagram. The hero image is the very first thing that viewers see when they visit the website. This static or dynamic image tends to cover the full-width of the webpage and can also be a video or an animation, as well. It is created using HTML and CSS.

Hero images are expected to capture attention and present an amplified version of your product or emotion. The ideal hero image size is 1,200 pixels wide, for full-screen background images. For browsing on larger screens, the images would need to scale up to fill the screen. There are also an infinite amount of ways you can make a hero image work for your website.

The Canva website offers examples of hero images on their page, titled Hero Images. 

One of the examples is from George Olaru of Iasi, Romania. He describes himself as “a daydreaming designer with a desire to improve the world.” He’s done several sites with the hero image, but the one that I find absolutely stunning is one he did for – the now defunct – The Rosa Restaurant. The website is no longer active, but the design is posted on Dribble.com (an online community for creative people to share their designs). Click the image (below) to take you to the Dribble design studio for The Rosa.