Skip to main content

Hero images – pros and cons

Posted in Content

Hero images are those big images at the top of a web page. They can be used on homepages, about pages, contact pages, you name it; but I’m going to focus on blog posts, where they present a pretty unique problem.

As with any design, there are pros and cons, but the thing you should keep in mind as you read this article is: do you need an image at the top of your blog post? A big, bold, typographically interesting, and well written heading can do a lot of the work an image might otherwise have done.

It’s also worth mentioning that I’m not talking about images you might use throughout your article to illustrate various points your making – it’s that big one at the top that, together with the heading, sums up the contents of your article.

The advantages of hero images

A hero image has some extremely compelling upsides:

  • They’re a visually engaging way to open an article
  • They help guide the eye downwards from the heading, to the image and on to the article itself
  • They can (should!) be carried through to social media, so that when an article is posted/tweeted it’ll be more visible in people’s feeds/timelines
  • They help reinforce your brand
  • They make each post a visually unique
  • They are great for blog post listings pages, helping readers pick out articles that look interesting

The disadvantages of hero images

The immediate downsides are to do with serving that hero image:

  • It will take extra time to load in the reader’s browser
  • It could eat into your readers’ data allowance, if they’re not on wi-fi
  • It might not load if the reader is somewhere with a sketchy mobile connection

On balance, the upsides could well be compelling enough to make it worth serving an image; there are ways to ensure images are as light-weight as possible, alleviating these downsides even more. But there’s one big hurdle that I’ve seen time and time again that prevents website owners posting a good blog post.

Finding the right image

It takes time, effort and creativity to find the right image before you hit ‘publish’. Remember, in order to be effective, the image has to be:

  • engaging
  • unique
  • on-brand

Not only do you have a blog post to write, which is a lot of work in itself, but there’s the added pressure of finding the right image to go with it. I’ve seen this time and time again and have even hit up against it myself. The temptation is to:

  • procrastinate over writing the post in the first place, knowing that there’s extra work to do with the image
  • put off publishing the blog post
  • reach for a generic stock image that says more or less what you want it to

None of these is a great solution.

A great way around this is to outsource or delegate the sourcing of blog hero images to your brand manager or designer. This means you have to pay someone—something that should be factored into the ongoing cost of your website—but it allows you to post that article you’ve taken time to write, knowing that it’s going to look great.

What to do

Using an image at the top of every blog post has some strong positives, but these shouldn’t blind you to the negatives.

I toyed with hero images on my own blog for a while, but quickly ditched them as time constraints meant images were often pretty generic-looking, adding nothing to the article. I even tried drawing icon-style illustrations for each post, but this proved too much effort and posts were sitting unpublished for way longer than they should have.

It’s possible to use hero images for some articles, as A List Apart do, but it starts to raise questions in your readers’ minds: why was one post worthy of an image but not the other?

Of course, it could be that it’s worth the extra expense to pay someone to draw/source your hero images.

Choosing one particular design over another should always be done with as much information as possible. If you’re considering a hero image on each of your blog posts, hopefully you’ll now be in a strong position to make the right call.

Hire me

If you like what you’ve read and think we’d work well together, I’d love to hear from you.

Contact me now

More resources

Here are a couple more resources for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.