Oversized Hero & Background Images: Unfounded Fad or Conversion Booster?

by 17 05/20/2014

You see them everywhere these days—oversized images used for product hero shots, or a large photo as a background image in lieu of whitespace. Using images as background is one of the hottest trends in web design.

Over the last 6 months, this trend has gained major traction.  Some of the biggest companies have already implemented this design style. If you aren’t sure what I am referring to, here are some examples of sites that currently use the mega image design:

KinderCare

KinderCare's Homepage

Google Analytics

Google Analytics' Homepage

Criquet Shirts (A more subtle background silhouette)

Criquet's Homepage

Highrise

Note: Highrise was a very early adopter of this style

Highrise

But, trendy web design does not always equal high converting web design. For example, web designers love adding slideshows to homepages—even though slideshows generally reduce response rates over static images.

So, when we at WhichTestWon noticed this image-as-background trend emerging, we immediately started digging for A/B split test data from everyone who was using it. Are oversized images helping or hurting conversion rates?

Why it’s popular

It is easy to see why this is becoming a regular practice among websites, it gives your site a very sexy look.

A good looking website is one of the first aspects of your site that your visitor responds to, both consciously and subconsciously. The background image, when used appropriately, is an easy way to give your site a sleek look without compromising major real estate.

A well-known conversion killer is stock photography, and the mega image trend requires companies to invest in quality, original photography. With a renewed focus on how photography impacts conversions, the mega image trend has eliminated one of the long-time conversion faux pas.

Mega-Image Split A/B Test data

We’ve researched some great examples from sites that tested their old page layout against the page with a mega image. Here are a few examples from our Case Study Library that will help you decide whether or not to test a mega-image for some of your own pages.

Contact Page Redesign Test

Dell wanted to increase the submission rate on their ‘Contact us’ page. The team had completed countless tests on the form itself, including form fields, step indicator inclusion, step indicator design, etc…

They got to the point where they needed a bigger idea to move the needle.  So they decided to A/B split test a radical redesign of their champion landing page design (see below).

Dell's Old Champion Variation

As you can see this page is well optimized. Dell’s testing and optimization efforts should be applauded, as this was a design that was developed and tweaked over various testing iterations during the already rigorous Dell testing schedule.

As you can see the page meets many of our industry’s best practices including no navigation, bullet points, no scrolling, and an easy to identify and complete form.

So, all in all it was already a very well optimized form page. Now, here’s the radical redesign Dell tested against it:

Dell's Mega Image Winner

There were some very major changes made to this page, including adding prose in lieu of bullet points, using ‘knock-out’ white text on a dark background (not something we recommend), adding the mega image background, and re-stylizing the form.

All of these changes paid off. The tested variation decreased bounce rates on this page by 27% and increased form completions by 36%!

This test inspired Dell to try other background image tests on other pages, to which they have reported some major successes.

French Ecommerce Background Image Test

Saloman is a snowboarding ecommerce site based in France. The team wanted to freshen up the look of what was a fairly standard ecommerce site design. They opted to try out the mega-image approach and, needless to say, they were not disappointed.

First, here’s a look at the original, control design. It’s fairly clean and compelling.

Salomon's Control Variation

The original layout used colors to set visual hierarchy for content, i.e., the content with lighter background are around the most important areas on the page. (For those who don’t know, eye tracking studies have shown that the eye is drawn to lighter areas.)

Although this page used a slideshow to present multiple images in the same space, they did not implement an auto-rotation. (Although many sites use it, auto-rotation is not a best practice from a conversion standpoint.)

From a merchandising perspective, the page focused on allowing visitors to navigate by six key categories—rather than calling out specific products or too many categories.

This also is a best practice. On a home page it is important to limit the number of decisions your customer has to make. Had they gone product-centric with a laundry list of products, this design likely wouldn’t have been as effective.

OK, now let’s look at the radical redesign version the site split tested against this control:

Salomon's Winning Mega Image Version

Even though the control variation fit many best practices (much like the Dell test), the new mega-background image made a huge difference. This variation increased sales by French shoppers by 39.8% and sales by global shoppers by 29.7% both at a 99.9% confidence rate.

Aside from the mega-image, other (smaller) changes included a more succinct and visible call to action, an altered top navigation design, and the button design in the merchandising grid.

Obviously all of these changes had to have some impact on change in conversion.  So, next the team  needs to run further test iterations, each focusing on split testing just one single element, to find out what made the biggest impact.

KinderCare’s Home Page Redesign

Although you may not have realized it, KinderCare is a heavily tested and conversion optimized site. Nearly every aspect of the site—from the number of fields on lead generation forms to geotargeted page paths—has been tested, with help from testing firm ISITE design.

So, naturally, when mega-images became the big new thing, KinderCare decided to test the idea on its home page using both A/B and multivariate tests to craft the most compelling imagery, buttons, and CTAs.

First, here’s the control homepage, which had already been conversion optimized with a number of tests.

KinderCare's Control Variation

Now, here’s the mega-image challenger variation.  As you can see, it eliminated much of the white space in the background, used geotargeting to tell you how many centers were around you, used colored text boxes, and moved the search box to the bottom right instead of the top left.

KinderCare's Winning Mega Image Version

This new homepage increased leads by 18%. Much like the other examples in this article, many elements changed during the design process. So, we can’t be sure how much of the overall lift was due to the mega-image versus the other changes.

Happily, KinderCare has the traffic volume to run more extensive follow-up tests to find out what elements should remain the same and what elements need to be tweaked further.

Conclusion: Four Mega-Image Rules

Fascinating fact: All of our Case Study examples above share another trend. The tests were run on pages that had already been conversion optimized and were performing well. The mega-image tests were not a last ditch attempt to save a badly performing page. Nor, were mega images added just because they’re trendy now.

Instead, the teams tested mega-images as part of their ongoing optimization programs.

As web design trends shift in future, we fully expect these sites to continue testing new trends and design tactics to improve conversions. If you visit any of these sites today, you may not see the design we show here, In fact, you may find yourself in part of a testing segment for a new idea!

This should remind you that you should revisit pages that have seen major lifts in the past; there is always room for opportunity!

Full disclosure, I am very comfortable with the radical redesign followed by further iterations approach. Some of my testing peers detest this methodology and advocate for a more ‘self-evolving site’ approach. Insofar as you aren’t drawing major conclusions until you test future iterations, I say test away!

Now, I know this article has been very ‘pro mega-image backgrounds.’ However, I do not recommend just blindly implementing this design schema without testing it first! We can’t guarantee this will help lift conversions, but it has been shown to have a proven track record.

Finally, if you decide to go this route, make sure you keep the following four rules in mind:

  1. Your photo should scale down responsively.
  2. Use a unique photo—no stock photography.
  3. Make sure your photo doesn’t cause eye tracking confusion.
  4. Test page design (I can’t stress this enough).

Good luck updating your site to keep up with the ever-changing design landscape. As always, if you have a finding you want to share feel free to comment or contact me directly!

About 

Justin Rondeau leads the testing initiatives, editorial, training workshops, and event programming for WhichTestWon the top weekly publication in conversion optimization. More than 75,000 marketers each month visit WhichTestWon to research its extensive Case Study library featuring creative samples and results data for more than 450 A/B and multivariate tests.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

17 COMMENTS

Zach Edwards

I’ve definitely seen similar results from my tests. Big, beautiful images tend to pull people into the site and have decreased my bounce rates almost universally.

From my perspective though, the MOST important decision when testing this concept is the choice of image for the background/hero. I did a version where I tested a guy smiling and looking towards my opt-in area (my hypothesis was that it would perform the best), compared to a version with a woman who looked sort of indifferent, and then also a control that was basically a product image and text. The control ended up outperforming the indifferent woman, but losing quite considerably to the happy guy. // It wasn’t the most fair test (and I later conducted one with a better picture of a woman), but it definitely helped me see the value in choosing and testing the right images when they are the central visual of a landing page.

May 21, 2014 Reply

    Kathryn Aragon

    Zach, we really appreciate you sharing your test results. Cool discoveries that are worth further testing.

    May 22, 2014 Reply

    neil

    Zach, like any marketing strategy having stunning visuals will never hurt you. It’s all about making things visually stunning so people will be more inclined to stay on your site. Doing all the right things can make a big difference :)

    May 22, 2014 Reply

Justin Rondeau

Zach –

I am a huge advocate for genuine photography on websites. Though this methodology can be costly in comparison to stock photography, it creates a better looking site and makes you look far more legitimate.

I am really hoping that more sites invest in genuine photography on their site in the coming years.

May 22, 2014 Reply

    neil

    Justin, with all the copyright and intellectual issues I am sure people will focus more on better images.

    May 23, 2014 Reply

Dale

Hi Zach, I agree with the better photos mantra. But, I take exception to the Stock v Real photos language. Stock photos are real photos, and real photos can often be stock photo’s. Not every small business can afford to commission a good photographer for a specific hero shot, nor do they know how. Every small business can afford $10-20 for a great stock hero photo from a reputable stock photo supplier.

Maybe you should put the knife to businesses that use photos found on Google image search with dubious copyright ownership. And, we all need to spend more time laughing at “man in suit thumbs up”, “shaking hands” and “girl wearing shorts halter top tool belt holding screwdriver” as the comic sans’ of the photo world.

I’m currently redesigning my site and though I don’t have the time or skills to put into rigourous testing i do appreciate your advice and other content writers as well as the wide range of service that are now becoming available to help me compete way above my one man band weight on the web.

Dale

August 5, 2014 Reply

    Kathryn Aragon

    Good points, Dale. I think the key is to be aware of what we communicate with our design choices and to try to be as authentic as possible. Love the reference to some stock photos as the comic sans of the photo world!

    August 5, 2014 Reply

    Kathryn Aragon

    Well said, Dale. I love your comment about some stock photos being the comic sans of the photo world. You had me laughing.

    August 5, 2014 Reply

      Dale Rogers

      Thanks Kathryn, I’m glad. There is some truth to the comment as well. I’m really impressed at the awareness that typography has gained in the community in general. Almost anybody, even the aesthetic blind, will frown on comic sans. Once, not so long ago, it was the go to font for friendliness and casual, particularly in my industry, the trades and services.

      Posts like this one can help promote good photography to the same extent. By the way great hero shot on your site. It’s difficult to portray the essence of marketing and make your hero shot contextual for a marketer and you did it well by avoiding all cliche. Although I am dissapointed not to see “thought map, funnel shaped, young woman in black suit and white shirt, bun hairstyle, sharpy, writing on glass wall, post-it notes, social media icons” ;)

      August 5, 2014 Reply

        Kathryn Aragon

        Haha! I had to hold myself back. Thanks for the great feedback. I spent a whole day looking for images that could express what I do without getting trite.

        August 6, 2014 Reply

Paul

Great article. One question though, how do these guys keep their images sharp and the file size low enough not to trigger Googles speed penalty algorithm? Photoshop wouldn’t do the trick.

September 12, 2014 Reply

Chad

I feel that at least two of these test cases underwent redesigns that vastly improved the site’s look and feel; sure the background image deserves all the credit for the better conversions. This just in – better looking websites convert better!

October 21, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>