We all know that using images on your websites is very important. Apart from just spicing up your website (God, can you imagine a website without images?), images play a big role in representing you and your brand. Images are also an incredibly useful tool to improve the user experience or getting across your message.
However, you can’t just go using any image without any thought and expect it to do wonders.
Now, if you start googling this topic you will find a myriad of very technical answers, so this guide aims to give you easy-to-follow guide on things you need to know about using images on your website. I’ve broken it down into two main sections:
- Choosing the right image.
- Best practices & tips for technical aspects to using images.
PART 1: CHOOSING THE RIGHT IMAGE
How many times have you just used an image on your website just to have one? I know I have in the past! Well, I’m here to tell you that there is a little bit more to it than that. It’s not super complicated, if you just keep some of the following in mind:
Use images with purpose
Images aren’t just there to fill in space. Every image on your website or blog post should have a job. It should be providing a useful purpose on your website. How do we know if an image you want to use is achieving a purpose? Ask yourself the following questions:
- Does this particular image achieve a purpose? For example, does it show off my product or service well?
- Does it help the user understand the point I’m trying to make?
- Does this image create emotional appeal? For example, does it help the customer visualize themselves using the product being featured in the photo?
- How does this image relate to my brand? Does it speak to my target audience?
- What message does this image send? Is there a message being sent at all?
- How will my visitors respond to this image? Will it change their opinion? For example, will it help facilitate the buying process?
Use Photos of Real People
Studies have shown that photos of actual people are more persuasive than those without. This is especially true for websites that are hoping to sell something, as a major challenge of sales is gaining trust. So by associating the product or service with happy people you are gaining trust.
Take a look at the results of an A/B study conducted that was done on the Highrise website:
On a landing page that was aimed at getting people to sign up, they saw an increase of 102.5% when they changed the page to be a picture of happy person!
Direct the user
Not only should you include people in your photos, you should also use them to guide the user. Look at the following image and you can see how the woman is facing the form that the web page is designed for you to fill in.
In the following example Karma not only uses the guy in the photo to not only point at the product they are selling, but also to the text and call to action (CTA) button they want to direct you to.
Don’t sell the mattress, sell a good night’s sleep
We you know what they say, a picture is worth a thousand words. When it comes to your website that is so true. For example, in this picture you can see they aren’t selling a beer, they’re selling a good night out:
The picture does a great job at creating a scene by showing the beer in the environment it is intended to be in. It really helps clients imagine themselves having a beer on a fun night out.
Marks and Spencers Christmas jumper picture also does a good job of this by showing a happy family in their Christmas jumpers painting a picture of them all being warm and jolly at Christmas time.
Where to get images
Obviously, most of us don’t want to pay for the images that we use on our websites. Here’s a list of some great sites to get free images:
- Unsplash
- Burst (by Shopify)
- Pexels
- Pixabay
- Free images
PART 2: BEST PRACTICES FOR TECHNICAL ASPECTS TO USING IMAGES
Right, now that we know about choosing how and when to use images correctly, I want to go into the slightly more technical matter of including them on your website correctly.
Choose the Right File Format
Before you start doing anything else with your images, it’s important that you choose the correct file type. The main file types we use for images online are:
- JPG / JPEG – Generally the best choice for photos and images with lots of colours. They are relatively small in size, and compressing them doesn’t affect the quality of the image too much.
- PNG – These files are the best option for images with transparent backgrounds or logos, icons and simple illustrations. They are generally larger file sizes than jpeg images.
- GIF – Although you can use GIF to show static images, most people use GIF to showcase animations like this one:
Optimize File Size
File size: The file size is how much space the actual file takes up on your computer or website. These are measure in kilobytes, megabytes and gigabytes: 1024 kilobytes (KB) are 1 megabyte (MB) and 1024 megabytes are 1 gigabyte (GB).
A 15MB (megabyte) photo is a huge file. A 125KB (kilobyte) file size is much more reasonable.
It’s important to keep the file sizes down as the larger the file the more space it takes up on your hosting server and therefore the longer it takes to load the website. A slow loading website really annoys people and Google.
Before you upload an image to your website it’s a good idea to reduce the size by compressing it. Here are some tools that will help you:
- Adobe Photoshop (Paid)
- Gimp
- Image Resizer
- com
If you are using WordPress, then you should also make sure to have an image optimization plug in installed that will further optimize images as you add them. Some exames are WPSmush, ShortPixel or reSmush.it.
Add necessary meta information
Images have an important part to play with your SEO strategy, so remember to input the following meta data when you upload an image:
- File Name: Treat your file name as a keyword or relevant tag for the image. Do not name your file vaguely like abcd_001. Instead, use standard tags, words, and alphanumeric descriptions.
- Title: Just like your file name, your image title should also be optimized as per a suitable keyword. However, ensure that it is related to the image. For instance, if it is the image of a dress then the title should describe the same.
- Caption: A caption is a small description of the image and should be treated and written accordingly. Write a short and concise but compelling caption for your image in five to ten words.
- Alt text: Alt text is used to tell visually impaired people what the image is all about. It also functions as the alternative and descriptive text when the image fails to load, or defers.
- Description: This is the space where you can add the detailed information about your image. While the content here can be lengthy as compared to other sections, do not try to write a story unless required. Use to-the-point crisp words that convey your message and inform the visitors whatever they need to know.
CONCLUSION
Using images on a website shouldn’t just be a quick after though to spice up a page – Every image (like every other aspect of your website) should have a thought out purpose and the image chosen should be an image that best achieves that purpose. Once you’ve chosen the best website don’t forget of the one or two technical aspects before uploading it. Your website, readers and SEO strategy will all thank you in the long run!
Please don’t hesitate in getting in contact by email, Facebook, LinkedIn or Instagram if you still have any doubts!
