Reading time: 10 minutes

Picture this. You’re at a conference and a woman with a familiar face comes up to you and says “Hi [your name]”.

Your mind starts spinning, this woman knows your name. But. You. Don’t. Know. Her. Name...

Sounds familiar? This happens to me way too many times.

Am I a bad person? No, I'm just really good at remembering faces instead of names.

And I'm not the only one! (I think, I hope, please agree with me on this one).

It takes only 250 miliseconds to process and attach meaning to an image.

And dare I say a face is quite similar to a visual?

Not only is this a valid argument for me forgetting everyone's name (maybe it’s not), it also emphasizes the importance of using visuals in life.

Especially to grab people’s attention right off the bat.

Images and other visuals persuade, evoke emotions and make it easier for your visitors to understand what you’re offering.

When done right, they can have a tremendous influence on your conversions.

This article is all about picking the right visual for your landing page (it’s the first thing of your funnel that they’re going to see after all: better make a good first impression).

On your landing page, the most important image is your "hero" image.

It's the most prominent image that complements your amazing headline.

The definition by Wikipedia:

"In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center.

The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site's most important content."

On a landing page, the hero image can either be a background picture or standalone image.

It has an important function because it grabs your visitor’s attention right away. There’s no way you’re not going to see it.
​
A well-crafted hero image can do wonders for your brand. Not only does it establish trust it engages your visitors as well.

Good question.

First off, be sure you don't use any images which have some sort of copyright.

Personally, I don't understand much of copyright law.

But one thing I do know is this: don't use Google images.

If you still want to use Google images, filter on photos without copyright:

Luckily, there are lots of websites that offer free to use, copyright-free photos.

And the great thing? You find them all in your dashboard (all 1M)!
​
When you're in the editor just click on the "+ Upload" button and select "Discover".
​
This takes you to the image library of the three biggest copyright-free image platforms out there.
​
Just type whatever image you're searching and you get an extensive selection of images:
​
​

When you use one of these images they get saved automatically so you can use them again on different pages.
​
By using these images, you won't get into trouble.
​

No lawsuits (yay!).

Now that you have a sh*tload of images to choose from, what's next?

Let's look at your visitors.

Are you appealing to people who are unaware of the problem you're solving?

Or are they already aware and need a last nudge in the right direction?

Do they know the the solution you're providing but are they not sure you're their best option?

The groundbreaking book Breakthrough Advertising (pun intended), distinguishes 5 phases of awareness:

Totally unaware

Visitors are completely unaware of the problem they're having (and of you).

Need aware

There's a need, but visitors haven't thought of the connection between your solution and their need. They're not actively looking for a solution.

Problem aware

Visitors have a desire to solve a problem they're having. They're looking for a solution. They just don't know there's a solution or that you're offering a solution for it (yet).

Product aware

Your visitors know your solution, but doubt if it's for them. Compare this to standing in the supermarket and you're hungry (problem) and you know you need to get food (solution), but you just don't know what to eat.

Most aware

Your visitors know your brand name and they know what solution you're offering. They probably want it, they just need a little push.

In what phase of awareness is your customer?

Knowing in which phase your visitors falls, makes picking an image easier.

Should you pick an image that portrays their problem? Or should you pick an image that portrays your solution in a unique way?

Next up: what selection criteria are important when choosing your hero image?

Check these boxes and you're ready to go:

✔️ Authenticity (no obvious stock photos)

✔️ Use an image relevant to your proposition

✔️ When used as background: make sure the image contrasts with your CTA and headline

✔️ Make sure your image fits your page design (doesn't distract from your main copy)

✔️ Use a high-quality image

✔️ Use an image that matches your identity

I found that hero images on landing pages fall in these 3 broad categories:

An image of your product.

No-brainer ain't it?

There are a few ways of doing this.

Plainly showing your product is the obvious one.

With some camera skills and photoshop wizardry, you can make your product look even better than in real life.

You know, like the images of burgers at McDonald’s.

Source: Business Insider

But really, when showing your product you can show its uniqueness without having to type an entire sales letter (like the iPhone X below).

Source: iPhone In Canada

But, hold on! What about digital products like ebooks (lead magnets) or software?

Let’s begin with the ebook.

You can visualize your ebook as a physical book.

Why? Perceived value increases when digital products are visualized as physical products.

Your only obstacle if you're not a designer (like me): designing the damn thing.

But, luckily, there's a tool for that.

You can also show how your ebook (or other lead magnet) looks by showing a blurred picture of what's inside it.

Pick your visitors curiosity:

Source: Leadfeeder

And what about software? Well, why not show how intuitive the interface of your software is!

“Show, don't tell” is a strong persuader. 👇

Source: Landingfolio

Or by showing your software or app being used on a compatible device:

Source: Pomodrone

If this will work for you, try this tool to generate device mockups: smartmockups.

Show your product in action

Talking about show, don't tel...

This one's even better!

Showing your product in a context your target audience's familiar with.

This often means showing your product in action.

Source: Oivo

What about showing the desired result? Works great for people in the "problem aware" phase.

You see, they want a product you're offering but they haven't thought about you.

Show them how your product helps them:

Source: Themeforest

Looking at the above picture brings us to the second category:

Faces grab our attention (according to research of course).

Images of people also generate empathy.

But if you can, use a dog. Or a baby.

Just sayin’.

So (besides dogs and babies) how can you use people in your hero image?

Use people who look like your target audience

​Similarity breeds liking.
​

If you have a clear image of how your target audience might look like, put such a person in your hero image.

Source: Landingfolio

Or even better: show your real customers that are happy with you!

Source: Signal v. Noise

Use people to convey emotion

Picture someone who's very happy: your product makes people happy!

Conveying positive emotions, like smiling, can help increase your sales.

Don't try to convey negative emotions. These tend to turn visitors off. After all, you want to show people the best version of themselves.

Use gaze cueing to focus attention

Have you ever heard of gaze cueing?

People tend to focus their attention on elements of your page where people look at.

If you want to focus attention on your call-to-action or form, why not use a picture of someone looking in that direction?

Source: Upviral

Even more so, why not use a baby gazing towards some essential part of your landing page?

​Source: Search Engine Journal

Use a picture of your team, founder or person behind the landing page.

Showing there's a person behind the logo is never a bad thing. People like to connect emotionally with other people.

Besides that, showing the people behind the landing page can increase trustworthiness.

Check out this hero image of the “Kopywriting Kourse”. It features the founder and it uses gaze cueing!

Source: Kopywriting Kourse
​

An A/B-test found that compared to an illustration of a phone, a photo of a person converted 48% better.

​Source: VWO

There's one side note though.

We're wired to look at faces, so faces can also work as a distraction.

Someone looking straight at you can keep attention away from your headline.

Which in turn can negatively impact your conversions.

It’s really a matter of testing. As you saw, sometimes tests actually convert better.

Drawings of people

Using a (background) image of drawn people gives your landing page something playful.

Source: Landingfolio

It conveys happy emotions, it looks playful and overall it creates empathy and engagement with your brand.

I think it's best done when it fits your brand identity (or you can't find the right people).

Meaning that when you have a more slick and “cool” brand design or landing page design this might be less fitting.

​Source: Transistor FM
​

When using an abstract image, there's not a direct, obvious link between image and landing page.

Often, you're going for a feeling or association instead.

Abstract images are often used as background images.

When people or product images for some reason ain't gonna cut it there are always abstract images!

Colors or patterns

Colors are often used to evoke emotions.

There's even a whole psychology behind the use of colors.

Green has a relaxing influence for example.

How to leverage color psychology?

Let's say you're giving away a mindfulness guide as a way to generate emails.

Using a green color will match perfectly with what the page is all about.

Making it easier to understand the page, reducing friction and (hopefully) increasing conversions.

Just make sure the color fits your brand design and logo.

Another way of using color is drawing all the attention to your headline and other copy.

Putting your value proposition in the spotlight.

​Source: Kiwi
​

And then... patterns. It can complement the design of your whole page when you're not sure what kind of image you want to use.

It can be consistent with your logo, as you can see below:

You can also use patterns as a way of priming your visitors.

The short story on priming is when you subtly expose people to visual cues you can affect their behavior.

Subtly introducing dollar signs invokes selfish behavior and even makes people spend more.

When this is consistent with your offer, it helps boost conversions.

If you're in the "make money online" sector, cueing people with subtle dollar signs can be the way to go.

To generate patterns, check out this SVG generator.

Landscape

This one's for when you're completely inspirationaless (that's a word now, deal with it).

Just as the one color background, it can draw attention to your headline.

Although sometimes it can have an associative function (when you're actually not inspirationaless):

Visual metaphors

I actually wrote a whole master thesis on this one.

A definition by thoughtco:

"A visual metaphor is the representation of a person, place, thing, or idea by means of a visual image that suggests a particular association or point of similarity."

Or as an image:

Source: Heystack

Here a business operation is portrayed as a complex machine (what it shouldn’t be).

Technicalities

You have your perfect hero image. Now what?

Optimizing your image!
​
With a a lot of other funnel and landing page builder you need to spend a significant amount of time in resizing, compressing your images and making them mobile friendly.

Converdy optimizes your images automatically which means you don't need to do anything like compressing. Resizing is just sliding a slider from left to right inside the builder.
​
​

Hero videos
​“A minute worth of video is worth 1.8 million words”.

As of forever, people are telling you (and me) that video is the sh*t.

Well, they’re kinda right.

Still not convinced?

According to this research, placing videos on a landing page could mean a conversion increase of 80%!

Visual + audio beats audio or visual, because you appeal to multiple senses. Visitors will more thoroughly process your message (check the statement again about 1.8 million words).

Getting more engagement in the process (88% more than text and images)!

Which is good, but how do you get a video that drives results? What are the best practices?

Video criteria

There are some criteria that will make or break your video effectiveness.

Complying with them will make your landing page more effective.

Some general criteria for videos:

✔️ Use an attractive thumbnail (people for example)

✔️ Put a big play symbol on your video

✔️ Don't auto-play

✔️ Have a script (so you know what to say)

✔️ Capture attention within 5 seconds

✔️ It's about the story (and education), not the sale

✔️ Keep it short (preferably under 3 minutes)

✔️ Work towards one goal (sign up, demo)

✔️ Make sure you end your video with a call-to-action

All criteria written down? Good!
​
There are multiple ways to use videos on your landing page. These are the ones I see most effectively used on the interwebz:

Tell your story

A video tells a story.

There are various stories you can tell.

In this article, I found two interesting video formulas:

The Jim Edwards Video Sales Letter
​

It goes through these steps:

The Regular Video Sales Letter

It goes through these steps:

Video testimonials

Social proof to the max!

Using a 3rd party to say how awesome your offer is (or how awesome you are) is an effective way of increasing conversions.

This can be a customer or a celebrity.

This is a result-based testimonial.

Another variant is the "I was [often heard objection] about [your solution] but when I discovered that [your solution] [killing objection] I was pleasantly surprised!

Basically, you take an objection and let a 3rd party say this. Next, you make sure you have them say that they overcame this objection and they loved your solution. This will speak to a lot of people who have the same objection.

Explaining product

Again: show don't tell. Visitors see immediately what your product does.

You can show how everything works (software product demo):

​Source: Jeffbullas
​
​

You’re probably wondering… What about lead magnets (lead magnets = ethical bribe for someone’s email like an ebook)?
​
How can I make a video about these?

How can I leverage the power of video to get more signups?

Here’s the big idea:
​
Why not screen record while you're scrolling through your lead magnet?

The trick is to show them what’s in it without giving away the entire content (I’m sorry, I don’t have a proper visual for this one, but you get the idea right?).

But wait - there’s more.

A 2017 TurnTo Consumer Study found the following, and I quote:

“An overwhelming 90% of US consumers report user-generated content to be the most influential part of their purchase decisions.”

User generated content, which includes video.

That means you should be scouring the internet, looking for content about your company made by users.

It’s easier than you think:

It’s that simple!

As a background

Drawing attention towards your page and engaging your visitors. That's the main function of a video background.

Visualizing a strong benefit of your offer is also a good way of using the background video:
​

​Source: Mozu

You want to use a video, but you don’t have the skills or the money to make one yourself. Does this sound familiar?
​
I gathered some resources where you can find free-copyright-free videos (or make yourself):
​
​Coverr - Vyoo - Videvo - Life of Vids - Invideo

Gifs

​
​

And then there are gifs. Micro videos that are on constant repeat.

Making a gif is cheaper than a video and it impacts loading speed not as much as videos do.

They’re between images and videos.

Your visitors don’t have to click on play (cause it plays out of itself on auto). It also immediately captures your attention and (when done right) tells you right off the bat what your landing page is all about.

Let’s dig a little deeper into gifs.

Show your product in action

​
​

Short and sweet. Show in a short animated way what your product can do for your visitor.

Or emphasize one major benefit (like being able to read your newspaper anywhere):

​Source: Instapaper
​

Conversational gif

This is a nice one. It gives you a gif in the form of a conversation (message).

Especially when the pain your solving (embarrassing messages) is illustrated in the gif as an endless list of just that:

​Source: Muzzle
​

To have an effective landing page is to have awesome visuals. Whether it’s images, videos or gifs.

Make sure they’re relevant, evoke emotions, don’t distract too much, are of high quality and aren’t “stocky”.

One thing to keep in mind: you should always test your images.

Why not test people images against product images?

Why not test video against gif?
​
You’ll never know when you don’t test. Be data informed 🤓