What does a landing page start with? Today — with a hero image.
And the name’s fitting. This part of your website can be a hero for real. It makes the first impression, creates emotion, and can make prospects leave right away, or continue reading. What strategies should you use when choosing pictures for a landing page? Find out in this article.
Hero Image: Product and Emotion
The Hero image is the first picture a visitor sees on your webpage. For this main visual you can choose photography, graphics, a video or simply a patterned template. This choice is all about your image strategy.
Our brain processes visual information 60 000 times faster than any other types of content. Perhaps that’s why marketers and designers pay so much attention to websites visuals. In terms of conversion rates, even slight changes to the hero image can have drastic effects.
That means we should never use a picture just to fill void space. Hero images are powerful tools to deliver the company`s value proposition, stand out from the crowd, and reach the client. So, before taking another stock photo for your landing page, ask yourself: does it fit your image strategy?
What kind of strategy, you may ask. Ok, let`s go through some general points.
First, you have to think whether you want your image to be product-focused or bring additional value. Each of these tactics has its benefits.
A product-focused image is (obviously) a picture which shows your product to the customer. This is the right place to demonstrate your brilliant design, shade visible disadvantages and indulge in a little bit of narcissism.
Plus: if you have a good camera, at least some light equipment and basic Photoshop skills, you can make your product look even sexier than it does in real life.
Minus: some brands might fall into narcissism without considering the customer. If you think working with clients` pain and desire is more promising than with the product in a vacuum, you might want another visual strategy.
Emotional marketing strategy. This imagery won`t show your razor blade looking like a Samurai Sword, but probably highlight the psychological value for your potential customer. Such a hero image might show your client’s current emotional state — of course, full of pain, puzzlement, and problems. No matter what you sell — bicycles, bearings or massage — you sell the cure for pain.
Or you can use the picture to express the desired emotional state — to demonstrate how it might feel after choosing your service, feature or product.
Plus: you have the space for creativity and don’t necessarily need to order expensive professional shooting. The interminable universe of stock photography is up here.
Minus: people don’t see what exactly you are suggesting. Somebody might not understand the emotional message or not match it with your service.
Anyway, once you’ve chosen your overall visual strategy, you should arm yourself with best general practices for creating or choosing a hero image.
Best Practices for Choosing Images for a Landing Page
1. Use authentic and relevant pictures
This piece of advice is for those who like emotional marketing. Because it`s the territory of hideous stock photography from the 90s. Each vague concept covering a certain emotion has millions of avatars in the universe of bad stock imagery. Don’t get seduced. Stop for a minute. Take a breath. And continue looking for better stock visuals.
To find authentic, natural and related photos use Advanced Google Search, navigate Unsplashand Behance, search in Flickr and choose from wide range of high-quality photography on Icons8 Photos.
2. Consider the copy and the call-to-action button
As a rule, hero images serve as a background for a heading, some copy and a CTA button. And the three can work together very well. There can be different ways to arrange these elements, but in the en, they should make a customer click or proceed reading. Here are some tips for composition.
- Let your visual just be an emotional background. Make the copy and the CTA stand out. In doing that a photo plays almost the same role as a graphic pattern, but brings more relevant meaning.
- Integrate your image with the CTA. Use it as a directional cue. For example, choose a picture whose elements will surround your call-to-action. Or use an image of a person (or an animal) looking (or pointing) onto the product.
- Arrange the imagery around the text to support it and make it stand out.
This photo could become a good support for a copy and a CTA, encouraging a person to buy a juicer, become a volunteer at Greenpeace or stop eating red meat.
- Use an image, copy and a button as equal visual elements of your landing page. Play with the composition. Use different schemes.
3. Visual noise is not your friend
When it comes to using busy pictures you have to make sure there is a strong contrast between the copy and the background. Use transparency tools to overlay the visual, or different color filters to provide visibility.
Hint #1: put your text on a plain background without touching the overall picture.
Hint #2: put it in the part of the picture where it will be visible.
4. Be style-consistent
Visual consistency is in the avant-garde of today`s marketing strategies. Look at the most popular Instagram channels. They are all about a common style of pictures, usually based on precisely verified color schemes and well-defined types of visual content. Think of your landing page as one general visual platform to provide your value proposition, emotion and style.
The painful truth: using the same Photoshop filter is not enough to make your pictures look like parts of the same series. It`s more about light, camera angle, a manner of shooting and composition.
How to be style-consistent when choosing imagery for your webpage?
Hint #1: don’t use pictures and sleep tight. Only typography. Only patterned backgrounds.
Hint #2: look for good series in stock photography galleries. For instance, go to Moose Photos where all the pictures compose consistent collections.
The biggest advantage of this source is that it’s a picture constructor. Choose a considerable colour pallet in two clicks without opening photo editors.
Hint #3: choose a photo on Unsplash and search for related pictures. Sometimes it`s possible to find nice pairs or trios.
5. Be careful with carousels, auto-played videos, and other animated stuff
Though animated content may look interactive and more eye-catchy, it can also be distracting for an unprepared customer. Include animation carefully and make sure your prospect will find a button to pause it.
6. Use high-quality pictures
For instance, this one from Moose Photos. It is almost art.
Technical Tips
Though high-resolution pictures can be a good idea, if you overdo it you’re in trouble. Good picture choice for a landing page is not only about your taste, but also about page performance. Want to make your design work? Don’t neglect the technical rules. Resize, compress and optimize your pictures.
1. Resize
If your website is 900 pixels wide on a desktop there is no need to download 2000x2000px pictures. This will reduce your page performance (it will download longer) and in the end — decrease conversion. Consider your blog sizes and make the pictures fit them.
Hint: for example, use one of these tools to check webpage loading speed:
GTmetrix
Google Page Speed Analytics
WebPageTest
2. Compress
After resizing your pictures compress them to make them load even faster.
Hint: you can try:
Compressor;
Tinypng;
Imagesmaller
and many others.
Compressor encourages its clients to compare how this chameleon feels after 64% compression. Make sure he is ok and hasn’t lost a bit of his color and dignity.
3. Don’t neglect SEO for images
If you want your landing page to be visited, optimize its pictures for search engines. That is:
- assign relevant names to your pictures. It`s hard for Google to recognize Nothern lights in a file named DSC7451;
- use alt tags to describe what`s on the picture if images can`t be shown to the viewer;
- use responsive images to fit each type of the screen;
- learn and practice more of SEO for pictures.
4. Optimize images for mobile
Otherwise, it will distort the website’s appearance when being opened on mobile devices or, in the worst case, turn your webpage into a senseless mess.
5. A/B test your images
Test product-focused and emotional-based pictures. Flat-lays and pictures with too much space. Still life photos and pictures with models. Graphics, photography and simple patterns. Each time change only an image letting other website features stay the same. Measure the conversion rates. Choose the best one.
Originally published on Icons8 Blog — check it for more design stories from our team
