How to Use Images on Your Website to Boost Conversion Rates
Our brains are incredibly adept at processing visual information.
Neuroscientists from MIT found that the brain can process entire images in as little as 13 milliseconds, faster than the 100 milliseconds as previously recorded in earlier studies. Another surprising finding is that the brain continues to process those images longer after they disappear. The data points to the brain’s incredible ability to derive meaning from images even as they quickly flash across the screen. Consider the following example:
Our brains are able to process the image on the left as a “square” far faster than the text on the right. That’s because there are regions of the brain that are specifically designed for object recognition—A part of our evolution that has allowed our early ancestors to distinguish threats in their environments and respond accordingly.
Visual aids then are able to communicate messages far faster than other formats like text. So what does this have to do with website design? Simply that adding clear visuals helps communicate your brand’s message and better connect with your audience.
But there’s another reason to make visual aids more of a priority: Conversion rates.
Attention spans are notoriously short on the web. The average online user leaves a web page in 10 to 20 seconds according to data from the NN Group. Visitors simply don’t have the time or patience to wade through text-heavy content and are more much likely to bounce out instead.
Incorporating images makes your content come to life and increases engagement—Both of which have a positive impact on conversions. If your site is lacking in visuals, you could be leaving potential sales on the table.
Here we look at how you can use images to their full potential and increase conversions on your website.
Keep it Relevant
Using large background images is a growing trend in web design that adds a unique visual element. But adding images that are not directly relevant only adds visual bloat to your pages and serves no real purpose. Eye tracking studies have found that users pay attention to information-carrying images but ignore those that are purely for decorative purposes.
The following shows tracking points on an application page that users focused on:
The image shown is simply used as filler and seems out of place. Adding a more relevant image or even removing it entirely would be preferred as users on this particular page are there to learn more about the school’s application process.
Another example shows a stark contrast between areas that users paid attention to on two ecommerce sites:
Pottery Barn’s pages are better optimised with images that are directly relevant to the product. These thumbnails were examined closely as seen from the eye tracking results. In contrast, users on Amazon’s page spent less time on the images and more on the descriptions.
Both examples show that users pay more attention to information-carrying images to accomplish the task at hand. Put this into practice by using images that are directly relevant to your products or services.
Use High Quality Images
Countless studies have shown that purchases are driven by emotional factors. Using the right images can stir up positive feelings and increase engagement. But equally important as using relevant images on your pages is their quality.
Low quality images that are heavily pixelated or barely show any details leave a poor first impression. Here’s an example from a site’s header that barely makes an effort with its images:
This kind of design may have been acceptable in the early days of the Internet. But online users today increasingly judge the credibility of a website based on its visual design according to research from the Stanford Web Credibility Project.
Apple does an excellent job of using high quality images on its landing pages to communicate clear features of its products:
A professional design that incorporates high quality images indicates how serious a brand is about its reputation. Consider hiring a professional photographer to develop images for your website. The initial cost may be high but the investment pays off in the long run. Switch out any outdated or low resolution images to make your site much more visually impressive.
Show More Angles
Shopping online offers clear advantages—You can shop in the comfort of your home and have items shipped to your doorstep all at the click of a button. But it still doesn’t afford the same luxuries as in-store shopping experiences. You can’t physically hold a product in your hands or consult with a sales rep. Instead, you have to make a decision based on the information presented on the page.
Shopping online is hard enough without being able to test out anything in person. Any product you sell regardless of how mundane needs to showcase multiple photos from different angles.
Zappos does a good job of showing alternate views with their products:
One way to take this even further is by offering 360° views. In one case study, DueMaternity.com was able to increase conversions by 27% by simply adding this feature. Instead of the standard two-dimensional images, shoppers are able to rotate certain products to view even more angles.
In another instance, StacksandStacks.com reported that consumers who viewed a product video were 144% more likely to add that product to their shopping carts. Each video showcased the product in more detail, enabling shoppers to make a better informed purchasing decision.
Amazon displays multiple images and a video for some of its products:
Detailed images with multiple viewing angles and product videos have been shown to have a positive impact on conversion rates. But your results will vary which is why you’ll want to run split tests to measure the impact that any changes have on your sales.
Product images are a huge determining factor of whether consumers make a purchase. A report from the National Retail Federation found that 67% of consumers judge the quality of images on ecommerce pages as “very important”. For this reason the importance of relevant, high quality images cannot be stressed enough but what many online retailers often leave out is context.
Showing detailed images with different viewing angles is already a great start. But showing context better communicates the value of your products. Context helps shoppers better visualise the possibilities with your product and creative ways it can be used.
Ikea offers an excellent example as the company showcases closeups of its products like this:
And also shows more visuals of the product in different contexts:
These images give shoppers a better illustration of the product and creative uses for it. Hiring professional models also works well as people tend to relate better to other people. Osmo—a manufacturer of educational toys for the iPad—uses models to show how actual users engage with its products:
Shoppers on this page get a better visual representation of the product and the value it provides. Consider hiring models or having professional photos taken in a studio to show your products in context.
Add a Human Touch
Each time you browse Facebook or other social platform, you’re exposed to a plethora of faces. Yet with just a glance you’re able to recognise the faces and match them to a corresponding individual whether to a family member or acquaintance. Parts of the brain are specifically designed for facial recognition which is what gives us this amazing ability.
Adding a more personal touch to your website using photos of real humans not only increases engagement with your audience but has also been shown to have a positive impact on conversions.
Medalia Art sells Cuban and Brazilian art online from different artists. There is nothing special about what the company does but what’s worth noting is the A/B test they ran on their homepage. Medalia Art had these paintings of their artists:
These were then changed to show actual photos of the artists:
The result? A staggering 95% increase in conversions.
Another case study by 37Signals saw their conversions increase by 102.5% when the original design was changed to a more person-focused design.
Why does adding a human photo work so well? Jakob Nielsen from the NN Group suggests that adding a photo enhances your credibility and shows to audiences that you have nothing to hide. Both case studies show the positive impact that adding a human touch can have on conversions. But you want to use actual photos as data shows that users tend to ignore stock photos. Experiment with different photos to see what works best for your company.
Optimise Your Images
A high bounce rate indicates that users are leaving before interacting with other pages and one of the biggest culprits is slow loading times. Online users may have been tolerant of slow loading pages in the past but users today will not hesitate to leave a site if it takes too long to load.
Data from Google has found that bounce rates dramatically increase the more time passes for a page to load:
Speed is crucial then. Online users would rather click out to another site than stare at an empty page waiting for it to load. We’ve established that quality images are key to driving more sales but if they’re not properly optimised, they could be slowing down your site.
One way to check is by running your site through Google’s PageSpeed Insights tool. Simply enter in your URL and click the Analyze button to run a speed test. Then scroll to the bottom for optimisation tips:
Google clearly thinks the page could do better in terms of image optimisation. If you see the same, you’ll want to take steps to optimise your images to improve loading times. Otherwise visitors will bounce out before they even have a chance to learn more about your offer.
If you use WordPress as your primary content management system, install the Smush plugin to compress and drastically reduce your file image sizes. Then run your site again through Google’s PageSpeed Insight tool and make any additional changes to improve your loading times. Even a few second improvement can have a huge impact on your conversions.
Online users today are increasingly looking for immersive experiences. No one has the time or patience to wade through blocks of text on the web without any relevant images to go with them. Visual aids then can go a long way towards improving the design of your site while also better connecting with your audience. Equally important is using relevant images that complement your products.
Follow the tips as outlined here to make the most out of your images and drive more conversions on your landing pages. But remember to also measure any changes you make as what works for one website may have different results for another.