How to Use Images/Visuals to Boost Website Conversion Rate

How to Use Images/Visuals to Boost Website Conversion Rate

Today's Eggspert Avatar
Today's Eggspert Avatar

Disclosure: Our content is reader-supported, which means we earn commissions from links on Crazy Egg. Commissions do not affect our editorial evaluations or opinions.

The right image can make or break your site.

People remember more than 2,000 pictures with at least 90% accuracy. That means it only takes one good image to cement your brand in their mind forever.

That’s why my website design team spends so much time picking the right image for our clients.

Not only does it make your brand unforgettable, it’ll also boost your conversion rates.

How to Use Images to Boost Conversion Rate in 2018

So how exactly can an image help you reach those conversion goals that you have planned for your website?

First, let us quickly go through what conversion rate means for a website.

It is the ratio of the number of visitors who have completed the desired goal on the website, (could be buying the product or services, contacting or may be subscribing for a newsletter) and total visitors who visited the site.

t’d be legit to say that the conversion rate is the mission of creating a website. The essence of conversion is quite simple.

Create an unforgettable experience for the users.

Now there are more than one ways of creating an unforgettable experience when the visitors come to your website. Some of the most popular being seamless navigation, fast loading pages and compelling buttons and images.

[tweet_box design=”default”]While 3 out of 4 of the above-mentioned techniques are mostly strategy based, the technique of using images for website conversions requires a perfect blend of strategy and creativity.[/tweet_box]

It is imperative to obtain this perfect blend to encourage the visitors to consume your content the way you want them to and eventually influence their decision-making.

Without much ado, here are 8 ways to boost your website conversion rate using images:

Picking the Image

Looking for images and shortlisting is not the tricky part. What is tricky is doing the research before that. When you pick an image, you are actually picking an emotion. An emotion that is accepted and taken well by your target audience.

Your understanding of the target audience comes into play here. The gender, age, interests etc. of your target audience will determine the emotion of the image you will pick.

For example, if your target audience is aspiring entrepreneurs, you need to choose colors that are appealing to the age group 25-40. You need to show strength, ambition, motivation and creativity. Something like this:

Images have the power to create an emotional connect. Thus, pick the right images and hit the nail right on the spot.

No Compromises on Quality

It is important to understand that the page where the user lands, that is the landing page of your website, is the first look of your product. Therefore, the right balance should be struck when it comes to image size.

A very big image or a very small image can possibly annoy the visitor and negatively affect the brand impression. Based on my knowledge, experience and the number of website development projects I have handled, the following image sizes give the best look on your website:

Banner Image: 2000px wide and 800px long
Slider: 1920 px wide and 890 px long
Icon: 300px wide and 300px long
Post/ Event: 425 px wide and 220 px long
Portfolio: 1920px wide and 768px long
Blog: Images in the blog vary as per the content area. The width should be equal to the area of the content and the height anywhere between 400-500px.

Needless to say that pictures should be HD. The image quality also plays a very important role in forming an impression on the mind of the visitors. Here is an example from a website that has low quality images.

The quality of image shows how serious a brand is about its reputation. Low-quality images equal non-professionalism and non-seriousness. You can fail at the very first step of gaining the trust of the visitors.

Never Lose Context

If mere showing the product off could get you conversions, why would big brands spend so much on models?

The images without context are like words without emotions. Until you are not able to take the visitor on a nostalgic or fantasy journey where he can visualize himself using your product, you just cannot expect him to buy it.
An image with faces, be it a stock photo, a celebrity photo or your own photo, increases your credibility and psychologically assures your visitors that you are not hiding something.

Even the website eye tracking studies reveal that users ‘Users fixate on those elements on the page that are relevant for their task’.

It means if the visitors come to your website looking for a dress, they would definitely connect better with a model wearing a dress instead of a photo with the dress on a rack or a hanger. By focusing on this parameter, you can control the way the user looks at the images.

Prefer images that focus on people using the product or images that have people in the background. This gives the images a realistic touch. Remember, 2018 is all about humanizing your brand whichever way possible.

Be Particular About the Focus

[tweet_box design=”default”]Microsoft revealed some time back that our attention span has decreased to 8 seconds which is one second less than a goldfish![/tweet_box]

This has made the work even more challenging. Human brain has an ability to decipher the whole image just by understanding what a portion of the image is about. Putting it in simpler terms, our brain focuses on small portions of the image at a time to get the hang of the emotion hidden beneath it.

This is the reason why it is advised not to bombard your landing page with multiple images and focus on a single, effective image. Your message will be delivered most powerfully when you will not confuse the brain with too many ideas and images.

An image should have one and only one focal point. When the visitor sees the picture, his eyes should stop right on the focal point and rest everything should become faded in the back of his mind.

See the image above. The image of Nestle Cheerios on the right-hand side of the webpage is mesmerizing. If you pay close attention, the bowl of milk has the right portion of Cheerios in it, enough that the focus still remains on the Cheerios and not the milk or the bowl.

Once the user sees the images of your products, it is your responsibility to drag their focus on the product and make unimportant details disappear!

So choose wisely on which aspect of the image you want to grab the user’s attention to and then amplify that aspect using zooming, highlighting or using the line of sight technique where the images point in the direction of text or object that the user is supposed to see.

A Responsive Image

When we talk about responsive web design, it means adaptable layouts or liquid layouts that smoothly flow and fit different screens of the users. It has the ability to detect the users’ screen orientation and change layouts accordingly.
While selecting images for your website, ensure they have the same characteristics. Always test the image on your mobile screen to make sure that it doesn’t get distorted.
Check if the images that you have chosen fit screens of all sizes. With 80% of internet users having a smart phone, of internet users having a smartphone, it is very likely that your website is viewed on a mobile instead of a desktop. So when you pick images for your website, make sure they fit all screens and are equally effective.

It’s wise if you pick image according to mobile size as that will resize easily on the website.

Also, with 91% of social media users are accessing social channels via mobile images should be resized keeping in mind various social media platforms.

Here are the standard image sizes of the posts on various social media:

Facebook: 1200 x 900 pixels
Instagram: 1080 x 1080 pixels
Twitter: 506 x 253 pixels
Pinterest: Width of 238 pixels
Snapchat: 1080 x 1920 pixels
LinkedIn: Width of 350 pixels

Multiple Angles

Speculation and contemplation is a collective psyche of consumers while buying a product. This process gets even more prolonged even more time when the product they are buying is expensive and holds much importance for them. Being in that state, it is natural to not settle for the first thing that they see.

To this psyche, it is necessary to depict a detailed version of your product. Include maximum features in the product image and as many close-ups as possible. If you are offering a product having intricate details, zoom in feature on the image enhances the user experience fourfold and increases reliability.

Include different angles of the product images to help your users gain correct perspective of the product. Include different focus, angle and details in every image you add.

This how multiple angles of Sennheiser headphones give the customers a clarity on what they will be getting once they order it.

This enables the users to get a better judgement about your product and deepens the faith in the mind of the visitors.The more clarity the visitor has about the product, the more trust is built around the brand.

Connect With a Mascot

This is another way of building emotional connect with your target audience. A mascot can be animal, person or an object.

Don’t you all recall cute little Ow.ly the moment you think of Hootsuite?

It should not be confused with a logo which is strictly meant for branding purposes. A mascot also gives a friendly and warm feeling and leaves a long-lasting impression.

Apart from that the look and feel of a mascot is fun and approachable which helps the company to build those vibes. This especially works wonders for small business owners wherein a mascot helps them to win a brand recall from the visitors.

If you’re convinced that your brand needs a mascot (believe me, it does!), the next process is selecting which mascot fits the best for conversions.

There are two aspects of creating a mascot for the brand.

  • You can create a mascot that is the personification of your brand. This involves using the emotions that fit your brand. If it is modern, casual, fun-loving etc., the colors and the mood of the mascot will be set according to what personality your website wants to wear.
  • You can also create a mascot that is the personification of the customer’s persona. This rolls mainly on visitor’s emotions. All that time that you spent researching your target audience and defining user personas pays off here.
  • Your mascot with personality traits of your users can evoke a feeling of nostalgia and relatability.

Here are some of the most memorable mascots that are standing out from the competition.

So decide how you want to approach your visitors and create that indelible impact that you’d been dreaming of.

Be Creative with Stock Photos

Often it is prescribed not to use pictures from stock photos and give more preference to professionally clicked photographs because of the redundancy that the stock photos have today.

However, I have a slightly different take on this. Professionally clicked photos are all good, but what if you want to save some time and bills on that?

You can use stock photos for your website after retouching and tailoring keeping few points in mind. The challenge always remains in how you do the retouch.

There are some critical points that you need to keep in mind while choosing the stock images for your website:

Never use images that are generic without adding text. Stock images without text look so offbeat and boring and out of context. Why would you want to bore your visitors?

Give the stock photo a tinge of your brand. You can use your brand specific colors on these images or even use your logo. This transforms a regular stock photo into your brand specific photo.

Change the focus of the stock photo to use only those components that are essential to your content. You don’t have to use the whole photo, be creative and change your focus. Zoom into parts of the image that holds weight as per your content.

Check out the image below:

If that image were to be used for website development services, it would not hold much weight on a visitor’s mind as the focus of the image is somewhat unclear.

Now check out this image:

Here, I zoomed in the laptop, threw some light on the image, and made my message quite conspicuous that I am offering website development services.

Use tools like Canva for these retouches and editing and you will successfully be able to use stock images to your benefit without looking redundant and boring.

Conclusion

A website is like your online store that is open 24×7. It is the cheapest and the easiest way to put your product out there.

That is why 55% of the inbound marketers consider growing company’s website as their topmost priority.

Website conversion rates don’t happen overnight, you need to work hard and keep testing to stumble upon that perfect formula that works for your audience.

Even though every business has its own unique formula, the ingredients remain the same. It’s just the matter of ratios.

About the Author: Uzair is the VP, Sales & Marketing at Enterprise Monkey; an Australia based website and app development company which helps Small-to-Medium Enterprises, Large Enterprises and Startups increase their productivity and profitability. Uzair possesses a comprehensive experience in B2B and B2C marketing. Pursuing his vision to help Small and Medium Enterprises, he has successfully helped many such organizations increase their revenue and efficiency.


Scroll to Top