Top 8 Tips on Using Images in Web Design
Web design continues to evolve, thanks to technological advancements. Websites have come far from the text-heavy layouts of the 90s to today’s image and video-centric design.
Using images on your website helps optimize website user experience (UX) and increase conversions.
To get the most out of your site’s visual elements, you need to ensure that you are using the correct type of image in an appropriate place.
Today, we will look at various ways to use images in web design to elevate the user experience.
1 – Ensure the images are relevant
Images provide more than just a visual representation of the content on your webpage. They reinforce your message and help enhance your audience’s browsing experience.
To achieve both goals, the images you use should be relevant to your business. If possible, use your images to illustrate what your business can do for your customer.
Let’s say you run an HVAC company. Adding images of your past installations will add credibility to the products you sell and the installation and maintenance services your business provides to its customers.
Each of the images you use should add value to the website and positively represent your brand.
2 – Personalise your images
The trouble with adding images to your web design is that everyone who visits will see the same thing. The layout will be the same, the images will be the same, and all the links they have to click will be in the same place.
While consistency does make things easier for your site visitors, you could still do better than greeting them with a huge banner saying, “Hello, Customer!”
People generally like to think of themselves as unique individuals with different wants, needs, and triggers. When you fail to tap into the preference for individuality, you’re missing a significant opportunity to stand out from the rest of the field.
The best part? Several picsnippet alternatives allow you to create personalised images.
How do you take advantage of this desire for personalised content? You definitely wouldn’t want to show site visitors the same generic visual elements all the time.
Instead, you can show different images based on the visitor’s previous browsing behaviour. You can also take it up a notch and personalise the images and videos on your site:
Hyperise, for example, uses dynamic text layers to generate hyper-personalised videos and images. You can automatically insert the name of any subscriber to your image, for example.
That level of personalisation increases the chance of a positive reaction, for example, responding to your email or clicking on a link.
3 – Use multiple images for products
Images can act as a purchase trigger for your website visitors. But if your visitors see only one angle of your product, they might start thinking that there’s nothing much to it.
Adding multiple images for your products will help you showcase their unique features and highlight their functionality:
The Marshall website uses multiple images that show different angles per product. For example, it shows the Woburn II Bluetooth speaker from the front, from an elevated angle, from the top, and the back.
The images let you see features and functions that would otherwise be invisible from the front.
The images also offer a close-up view of the dashboard for controlling the speaker. If you are an audiophile who cares deeply about sound quality, you will appreciate the craftsmanship and precision that goes into the controls on the dashboard.
Aside from using multiple images of the same product, you may also use multiple images to suggest different product variants:
The Under Armour website lets users choose from different colourways whenever they look at a product. Users can select a colour to preview the appearance of the shoe. They can then add the shoes to their shopping cart.
4 – Optimise your images
Ideally, your images should appear on Google image searches to take advantage of the extra inbound traffic.
However, when your images aren’t optimised, they don’t show up at all, and you end up missing out on potential traffic from Google.
Optimising your images is a bit like performing SEO on your content. When you add alt tags to your images, Google can identify and index them, which allows them to appear when you search for the tag on Image Search.
Using the keyword “dog chew toy”, for example, gives you the following Google Images results:
When you click on the image, you get redirected to Amazon. Inspecting the page’s HTML code will reveal the following line:
<img alt="Dog Chew Toys, HAOPINSH Rubber Dog Treat Toys Dog Bone Puppy Teething Toy for Small Medium Large Dogs Training Teeth Cleaning Treat Dispensing Toy Durable"It’s practically the exact text that appears as the image’s description on Google Images. The Alt Text helps Google understand the image.
Google also extracts information about the image itself from the page content. For example, image titles and captions.
If your images are located on relevant pages and near text content related to the subject of the images, Google has an easier time determining what the image contains.
Finally, changing your images’ file names is also an essential part of image optimisation.
Cameras and smartphones usually generate filenames that don’t mean anything, such as IMG00001.JPG. Using a descriptive file name will give Google a good idea of the image’s subject matter.
Images break up text on your website and keep your audience engaged with your content. They can also point users towards pages that you’d like them to visit.
Icons, for example, can represent different pages, products, or services on your site.
Some icons are universally accepted as representations of specific actions. A shopping cart, for instance, is the most famous icon for eCommerce websites.
All shoppers know that they can add products to their carts using this icon and can click on it to check what their carts contain. They also know that they can click on the carts to start the checkout process.
Amazon uses various icons on its site.
You may notice that Amazon’s icons are simple but easy to understand. A globe represents languages, a wallet with a credit card stands for payments, and speech bubbles represent their customer service team.
You can use these types of universal icons on your site.
5 – Ensure images don’t slow down your site speed
While images improve your website’s user experience, they can also hurt the user experience. Large image files tend to reduce page loading speeds, which leads to higher bounce rates.
If the page doesn’t completely load within 3 seconds, your user is bound to close the tab and move on.
One way to improve page loading speeds is to lower-resolution images. Your images don’t have to be of 4K quality all the time; 1080p is good enough for most purposes.
You can also upload image files using a plugin that creates multiple versions of images for different devices.
Having various sizes of the same image allows your site to load faster because images don’t need to be resized for the device.
You can also choose file formats that don’t take up a lot of storage space. A JPG file can be as little as 15% the size of a PNG file of similar quality:
By compressing, resizing, and using the proper file formats, you can save a bit of storage space. Smaller image sizes improve page load speed and will help you reduce your bounce rate.
You can use Google Page Speed insights to check if you need to reduce image size. Google Page Speed Insights will give you a list of various suggestions for improving page load speed.
Image size isn’t the only factor to consider. For example, by deferring image loading, you can improve page load speed.
6 – Label clickable images
It is pretty common to add images and logos to act as internal links on a website instead of text. This strategy works quite well as images capture the viewer’s attention quicker than text.
As images are noticeably larger than text, they are easier to click. However, not all images are self-explanatory. Adding labels to clickable images will help your site visitors understand the offer.
eBay does this exceptionally well. They add labels to product categories to entice their customers to go ahead and click on the image.
In the example above, the labels announce huge discounts on branded goods, which results in higher sales volumes.
7 – Deliver information through images
Images don’t just make your site look better. They can also convey useful information in a way that’s more accessible to people.
A study conducted by researchers at MIT found that it only takes a few milliseconds for the human brain to recognise images.
On the other hand, a study published in Neuroscience News claims that text is processed slower than images.
Using infographics will help you organise data, tell complete narratives, and provide answers to user questions while keeping them engaged.
Infographics let you take complicated concepts and present them in a format that is easy to understand.
The infographic above seeks to prevent the spread of COVID-19 by giving a set of instructions in visual form. Through this infographic, the viewer becomes aware of the things they should do to avoid being infected, such as washing hands regularly, wearing a face mask, or maintaining social distancing.
It’s easier to understand the image of a person wearing a mask than to read the sentence “Wear a face mask around others.”
Your mind recognises the images faster than it comprehends the words. Using the same principles in your web design will help your audience grasp your thoughts easier as well.
8 – Use images in web design to improve user experience
Besides decorating your website and educating your site visitors, images are also handy for elevating the user experience.
Think of your website design as a series of road signs. The most effective road signs use images to quickly convey meaning to pedestrians and motorists, regardless of their ability to read.
Google is one of my favourite examples of using images to deliver a great user experience. For example, when you use Google Drive, for instance, your eyes are probably instantly drawn to the menu bar at the left side of the screen:
The icons are self-explanatory. A clock stands for recently-opened files, a star represents files you’ve marked as important, and the trash can stands for files that have been deleted.
Below the icons, you can also see how much storage has been used. The storage bar, which is bright red, provides a warning that you are about to run out of available space. You can see here how colours and images are used in combination to convey information.
In Closing
Using images in web design is a double-edged sword. Use too few of them, and your site visitors will think your business is boring.
Use too many of them, and your site might load too slowly. To get the most out of your images in web design, you need to use images correctly.
When you use images correctly, they can make your website look better and provide information to your target customers more effectively.
Infographics, for example, aren’t just cute. They also educate readers faster and more efficiently.
When an image from your website turns up on Google Images, it can help generate traffic to your site. To achieve this, you need to optimise your images for Google searches and ensure that the images you use are relevant and labelled correctly.
Finally, adding images to all stages of the user experience will make the purchasing process a lot easier to do.
Using icons on your website can help even the youngest children understand what to expect once they click on the icon.
There are countless ways of using images in web design. However, regardless of the type and number of images, you choose to use, keeping them in suitable locations and confining them to a specific size will not just help users find your site and stay there.
Using hyper-personalisation, you can also feature customised images and other visual content in your web design whenever the occasion calls for it.
Author Bio: Becky Halls is a Co-Founder of Hyperise, a Hyper personalisation toolkit for B2B marketers. She’s an experienced Growth Marketer, passionate about product design/development and online marketing.