[Tip of the week #2] Are your images optimized?

What are the most important aspects of your landing page?

Well, after the actual copy - it's the images supporting your statements. As the old saying goes one picture is worth a thousand words - you can utilize images to increase conversion with a few simple tricks!

Here are my top tips on how to use images efficiently on your homepage (or marketing landing page).

A/B testing

Sometimes you have multiple images and you aren't sure which one would perform best on your landing page.

What I would usually do is create a social media post on platforms such as Facebook or Instagram and post each images separately in 1 post and see which one gets the most likes. Hashtag crowdsourced - Haha!

1 or 2 example of a post where typically people will respond with either as a comment reply, tally up the numbers and you've got your winner!

This is the fastest way to get a feeling for what people on the internet like but it only works if you have enough followers. You can also post the image to community sites like Reddit or Indie hackers. In this case, you need to be explicit about requesting feedback from the community.

Another option is to ask people in your office/your community (or people that are close to you physically ). Ask them which image do they prefer from a selected few, give them context but not much else. Unfortunately context is king so sometimes an image that is more appealing to your audience in a setting, might not be the right image in the context of your landing page so be aware of that. That's why A/B testing your landing page images is so important

Only one winner

As a rule of thumb: When you have multiple images on your page for the same paragraph of text you should only pick one to represent your concept. Just like the law of the jungle the strongest image wins. Multiple images for the same paragraph of text are rarely ever a good idea, especially if you use them as a carousel

Quality over quantity

It's really important to use high quality images some really good website on the internet were people from all over the world aggregate to share their captured images website like Unsplash.

Here's a list of recent image aggregators/search engines.

These list allow you to search through their vast catalogs of images through their search engine which works little bit like Google

Another good tip is - if you don't have a lot of traffic or you're just getting started DO NOT use images that are too stylized, such as these above instead always try to opt for images of people, screenshots of your platform or anything that is quite fresh/novel - that is because of re-use fatigue these type of illustrations have being over-used in the last year or two

Animation: it truly whips attention back into its place

Last but not least videos!
Great tool when used correctly to keep people on your page, engage your audience and explain more complicated things...

Make sure that if you have videos, they don't have an audio track playing as you load the page ... Always start with a muted track or if you're doing a CTA that opens/loads a video, there's the option to mute it.

There are a lot of good formats on the internet that allow you to do animated content on your page such as webm MP4 or even animated png's apng

Clarity and focus

I tend to tell this one a lot - too much space or too little space are killers - people will scroll away and you'll lose their attention.
Thus, keep in mind when using images next to text (or buttons) specifically, to have enough white space between the image and these other elements.

You must have some breathable area so when folks are reading they're able to focus on one thing at a time.

👌Do this mental exercise: open a page like this one and focus on what your eyes see first. For me it's first the image and then I read the text next to it.

Remember images are usually supporting evidence to the text, not the other way around. The text holds more value but the images catch your eye first!

Outline & Contrast

Websites that are making use of many color should be given a little bit of love, especially when it comes to their images!

If you have images that tend to disappear with background colors or paragraph colors...here's a fix.

You can use borders and outlines to make them stand out.

Images that have a lot of colors - what you can do is use a contrasting color such in your copy so that there's more contrast and things stands out better.

Mobile responsiveness

Always verify that your images are working in a responsive manner. When visiting your website from a mobile device, another good trick is to have images (which should be responsive) placed under the text. The text is the most important part of your page and images are just supporting evidence therefore when you're in a small screen text should be prioritized over images.

Hope these tips helped you - let me see what your landing page looks like in the comments, and I'll tell you if the images (and the way you used them) are working well!