Updated on January 7, 2019
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.
And the other half of visitors to see the hikes with the image before the header, like this:
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?
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…
It’s just a coincidence, but that’s the same percentage that Ogilvy claimed in his book.
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
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.