I have to admit, I can’t resist a good clickbait article either! While scrolling through social media, I often find myself captivated by those silly articles - you know the ones - “Have you ever seen a one-day-old baby otter?” No, but I’m about to. They always lead me down a rabbit hole of even more articles and videos featuring late-night comedians, adorable animals, and mouthwatering food.

However, I do have my limits! The moment I click through an article and arrive on the page, I can instantly tell if I’ve entered a desolate wasteland. A quick glance at the image and copy at the top is all it takes. If it doesn’t grab my attention or looks even remotely suspicious, I hit the back button without hesitation.

That’s why the hero image, along with its accompanying copy or call to action, is so incredibly important! To help you make the most of this crucial element, I’ve put together a compilation of best practices and inspiring examples to guide you in creating visually appealing hero images that will captivate your audience.

Decoding the Hero Image

Now, you might be thinking, “Well, duh, it’s an image of a hero.”

Okay, maybe not the type of heroes we typically envision. But hey, they’re the heroes we need in the digital realm!

On a serious note, a hero image is the primary photo or graphic that greets visitors at the top of a webpage or email. Its purpose is to instantly grab attention and provide a glimpse into the essence of your site and content. Selecting a high-quality photograph or graphic that embodies the overall theme of your page is key.

The Rise of Hero Images in Web Design

Hero images have skyrocketed in popularity within the realm of web design, and for good reason. They’re visually striking, aesthetically pleasing, and incredibly effective at keeping visitors engaged. These captivating elements come in various shapes and sizes, ranging from prominent headers and full-screen banners to featured content.

As websites have evolved from basic HTML to incorporate JavaScript, Flash, and CSS, web design has harnessed the power of these tools to create more visually immersive experiences. The focus has shifted from mere functionality to crafting captivating landing page experiences. We’re talking about going beyond practical utility and delving into the realms of seamless flow and captivating style.

This evolution led platforms like Facebook, Twitter, and WordPress to embrace featured images at the top of their pages. Retail websites started moving away from showcasing category pages as their primary content, opting instead for a more visually enticing gateway to their products or services. And thus, the marvel that is the Hero Image was born and continues to thrive.

Best Practices for Heroic Hero Images

During my time in email marketing, the hero image reigned supreme. It was the star of the show, the visual linchpin that held the power to make or break a campaign. A fantastic sale could fall flat if the image and copy failed to effectively communicate the discount or showcase the enticing selection.

Think of the hero image as your first impression in the digital world. Someone was intrigued enough to open your email or visit your webpage, eager to see what you have to offer. It’s like a blind date—appearances matter!

Prioritize Image Quality

This might seem obvious, but it’s crucial to ensure your hero image is visually sharp and crystal clear. With the advent of high-resolution computer and phone screens, any blurriness or pixelation will be glaringly obvious to your audience.

To avoid the dreaded fuzz, remember this golden rule: resize your images DOWN, never UP.

The ideal pixel width and height for your image will depend on the specific message you want to convey. If you envision your hero image spanning the entire width of the page, make sure its width is set to 100% of the container tag using VW or VH (more code knowledge here).

When using stock images (more on this later), remember to customize them! As a general rule of thumb, opt for backgrounds that aren’t overly busy, especially if you plan to overlay text. Aim for a visually appealing color contrast.

Notice the subtle blur effect where I placed the white text on the image. Contrast is your friend!

A crucial factor to consider when working with large, high-quality images is their impact on loading times. Studies by Google research have shown that even a seemingly small increase in loading time—from 0.4 to 0.9 seconds—can result in a significant 20% decrease in traffic.

Here are some general best practices to keep in mind:

• Resize images yourself: Don’t rely on the browser to do the heavy lifting.
• Compress images: Use tools like Photoshop, an online online compressing tool, or even basic software like Paint to reduce file size.
• Experiment with different file types: Test out PNG vs. JPG to find the optimal balance between quality and load times.
• Embrace page caching: Leverage caching mechanisms to store frequently accessed data, reducing the need for repeated downloads.

If page speed is a major concern, tools like GTmetrix can be incredibly helpful.

Show, Don’t Just Tell (But Maybe Tell a Little)

It goes without saying that your hero image should accurately reflect what you’re promoting. Selling unique umbrellas? A captivating image of umbrellas shielding people from the rain would be perfect! However, a sunny beach scene with an umbrella-adorned cocktail might not be the most relevant choice.

While your hero image can also advertise a sale or highlight a catchy slogan, keep the text to a minimum. Remember, a picture is worth a thousand words, so make sure any additional text is concise and impactful.

Keep in mind that captions beneath images are, on average, read 300% more than body copy. That’s a staggering statistic! Ensuring your caption is accurate, targeted, and complements the hero image is paramount.

Hero banners, like the one showcased below from the Dollar Shave Club, are incredibly popular. They combine high-quality imagery with concise text and a clear call to action.

However, it’s important to note that hero images don’t have to be limited to banners. Michael Soriano offers insightful tips on how to seamlessly integrate copy, imagery, and a compelling CTA in his blog post, “Ultimate Guide to Stunning Hero Images”.

Test, Analyze, and Optimize

As with any element you incorporate into your marketing strategy, remember to continuously test and optimize your hero images. At nexus-security, our team is constantly running tests to ensure our website is performing at its best, including rigorous homepage testing.

A B

We once tested a version of our homepage featuring a hero image we affectionately dubbed “Rocket Kid.” We were quite fond of this new image and had high hopes for its impact.

However, we were in for a surprise! The homepage hero image test, which ran for 15 days, revealed that Homepage B had a stronger conversion rate. This came as a shock to most of us, considering the captivating high-quality photograph of the adorable child on Homepage A.

This is just one example of the many tests we conduct. You won’t truly know what resonates best with your target audience until you put it to the test!

Unveiling the Treasure Trove of Hero Images

Not everyone has the luxury of professional photography or infographic design services—and that’s perfectly fine! Thankfully, a plethora of websites offer free (or very affordable) stock photos that you can customize and transform into compelling hero images.

I recently started using Canva, and it’s been fantastic! They offer a vast selection of stock images, along with intuitive editing tools that allow you to add text or even upload your own photos to work with. With a library of over 75 million images that are easily searchable and categorized, Canva is an excellent resource. While it might not be the ideal solution for webpage hero images, it’s a goldmine for crafting captivating email heroes.

Similarly, platforms like Creative Market and Stocksy provide a wide array of stock photos, templates, graphics, and fonts. While most of their offerings require a purchase, the prices are quite reasonable. Investing $20 in a bundle to enhance your website’s branding sounds like a worthwhile investment to me.

Image courtesy of Unsplash. Is anyone else suddenly feeling hungry?

For those seeking high-quality photographs as hero images, I highly recommend exploring Unsplash or Pexels. Both platforms offer stock photos licensed under the Creative Commons Zero (CC0) license, which permits the free distribution of potentially copyrighted works. While there might be some overlap between these platforms as they’re both driven by photographers, the sheer volume and diversity of their photography libraries make it unlikely that you’ll run out of options!

Pexels, fueling my travel dreams one stunning photo at a time.

If authenticity is paramount but hiring a photographer isn’t feasible, don’t underestimate the capabilities of your smartphone camera. Pair it with a lens accessory and a user-friendly quick internet tutorial, and you’ll be amazed at the results you can achieve.

Drawing Inspiration: Examples of Exceptional Hero Images

In need of some hero image inspiration? Look no further! I’ve gathered a collection of my favorite examples to spark your creativity.

Let’s start with the music streaming giant, Spotify. They excel at leveraging color contrast to make their offer pop off the page. Plus, they provide the option to scroll through multiple hero images, keeping things fresh and engaging.

TaskRabbit also employs the power of multiple hero images, each featuring a different “We’ll help…” caption accompanied by a convenient search bar below. Since not all visitors might be familiar with TaskRabbit’s services, they’ve cleverly incorporated static subheaders that provide context without overshadowing the main hero image.

Grain & Mortar, a creative studio, takes a unique approach with a series of hero images that are actually short videos. These videos strike a perfect balance—they’re engaging without being overly distracting from the accompanying text. I encourage you to visit their website and explore their use of hero images throughout their pages; they’ve truly mastered the art of high-quality photography.

The Infatuation, a popular platform for “foodie” restaurant reviews, boasts an engaging hero image that prominently highlights their key offering while also making it easy for users to navigate away from the main page. This is crucial! Sometimes, hero images can be so immersive that they trap you in a vortex of visual delight, making it difficult to figure out where to click next. You get lost in the beauty of the photography, forget why you’re there, and retreat to the familiar safety of the back button.

Flywheel keeps things clean and concise with a simple blue graphic adorned with white text. They manage to explain their core offering in a single sentence while also providing two clear CTAs.

Do you have any shining examples of great hero images or burning questions about how to harness their power? Share them with us!