side by side of cut out image and headline before and after each other
Does the order of the headline and photo make a difference?

Timeless Advice?

I always assumed that it was better to put images after their related headers in blog posts. My reasoning was that people would want to read the header first then they see the photo related to it after.

It seemed backward to do the opposite—to put the image before the header. That way, people wouldn’t understand what the photo’s there for until they read the header.

But then I read Ogilvy on Advertising.

In his copywriting classic, David Ogilvy claims that headlines below illustrations are read by 10% more people than if above the illustration.

Ogilvy certainly knows more than me, so maybe my reasoning was off. On the other hand, he wrote his book 35 years ago and his findings related to print advertising, not online blogs. They’re different… right?

It was time to run an experiment to find out.

The Experiment

Using Google Optimize, I sent half the traffic to a version of our Medellin hiking guide where the images were after each header, like this:

Screenshot of image after header And the other half of visitors to see the hikes with the image before the header, like this:

Image before header screenshot

What’s Your Guess?

What do you the effect of putting the image before the header will have on:

  • Session duration?
  • Scroll depth?
  • Bounce and exit rate?

The Results

Session Duration

Session duration Google Analytics screenshot

Average session duration with the photos after the header was 339 seconds. Putting the photo above increased the average to 374 seconds. That’s a…

10% increase!

It’s just a coincidence, but that’s the same percentage that Ogilvy claimed in his book.

Scroll Depth

Scroll depth Google Analytics screenshot

The increase in scroll depth from putting the image before the header was more definite than the effect on session duration.

With the photos after the headers, 25.7% of readers scrolled down past the three-quarters mark of the post. With the photos before the header it jumped to 32%. That’s a 25% improvement.

Bounce and Exit Rate

bounce and exit rate analytics screenshot

When the images were before the headers, bounce rate decreased by 17% and exit rate by 11%.

This means they viewed more pages on our site, which is ultimately what we want from this particular post.

Why Does Putting the Image First Work Better?

Here’s my hypothesis:

Seeing the image first creates curiosity to scroll down and read the header after. This gets the readers’ momentum going and leads them to view more of the post itself. And seeing more of the post increases the odds they find something else on our site they like, which decreases bounce and exit rate.

Do you have any better explanations for the results?

Why This Matters to You

This experiment combined with David Ogilvy’s timeless wisdom should be enough to convince you to put your images before your headers on your blog posts.

The effects aren’t enormous but it requires zero extra work so it’s a no-brainer.

Improve Your Site

For more insights and ideas to improve your site, head to my experiments archive.

Disclosure: Whenever possible, we use special links that earn us a cut if you pay for stuff we'd recommend anyway. It costs you nothing, so we’d be crazy not to.

Speak Up!

Your email address will not be published. Required fields are marked *