How to optimise images for your business' website

Having an online presence is a must for businesses in 2021 since 80% of consumers head to the web to browse and compare their options before making a purchasing decision.

There’s a lot to think about when it comes to your business’ website, from content and SEO to site design and marketing, but a super important element in success is images, more specifically, ensuring they’re optimised.

In this article, we’ll explain why image optimisation is so important, and how you can nail it to set your business up for online success.

What is image optimisation?

Optimising images for the web is a process aimed at delivering images in the right format, resolution, and dimension, without compromising on quality, by keeping the smallest possible file size.

Why is it important?

Image optimisation matters because it has a big impact on page load time and SEO success, both of which can directly impact your bottom lines. For example:

• Nearly half of all consumers refuse to wait more than three seconds for a website to load before abandoning it and heading elsewhere.
• A study by Amazon found slowing their page load time by just one second would cost them $1.6 billion annually.
• Page load time is a ranking factor in Google’s algorithm, meaning business’ who haven’t optimised theirs could find themselves bottom of the pile in consumer searches, costing them big.

The takeaway? Image optimisation is mission-critical in building a successful online presence, so now let’s dive into how to nail it.

How to optimise images

1. Choose the right images

If you’re wondering whether or not to include an image to accompany some text, the answer is nearly always yes. 

Images help readers to understand what you’re saying, illustrate what you mean, and make your text more enticing. The old adage ‘a picture’s worth a thousand words’ definitely rings true.

Plus, visual search is getting more and more popular, in fact, according to Google’s own ‘vision for the future of search’, it could land you a fair bit of web traffic.

When it comes to selecting which images to use, ideally, it’s always best to use originals - photos that reflect what you’re saying and actually show off you and your business. 

Stock images can be okay from time to time when you’re trying to break up longer texts, but remember not to add them willy nilly for the sake of it, and always place them near the relevant text.

2. Image descriptions

As anyone with an online presence will tell you, SEO is super important to online success, and the same goes for image SEO on your visuals.

Creating keyword-rich and descriptive file names for your pictures is key, as search engines crawl your image file names alongside the content on your website. 

So, when taking pics of your products, take the time to change the file names assigned automatically on your camera to something more SEO rich. For example, let’s take a look at this image…

Imagine the camera assigned name is DMIMAGE356.jpg - a much better name would be 2021-red-leather-ladies-handbag.jpg.

Always keep in mind how consumers search for products like yours and include this language in your image descriptions. You can use tools like your website’s analytics to get your hands on key search terms and patterns.

3. Alt attributes

When a browser can’t properly render an image it’s an alt attribute that’s displayed as a text alternative - these are also used as a tool in web accessibility - and are another tactic at your disposal to boost the SEO value of your website, aka, they’re really important.

Good to know: depending on the settings of a browser, an alt attribute might be displayed if the mouse hovers over an image. 

An alt attribute looks something like this (in bold):

<img src="red-leather-ladies-handbag.png" alt="red-leather-ladies-handbag"> 

An alt attribute should be sufficiently descriptive but shouldn’t be stuffed full of spammy keywords. If you could have someone close their eyes and be read your alt attribute, and they could muster up an image in their head that comes close to your picture, you’re on the right tracks. 

Let’s take a look at some good and bad examples of alt attributes for the following image.

• Poor  <img src="pancakes.png" alt="pancakes"> 

Yes, they’re pancakes, but there’s a lot more to be said. 

       Mediocre  <img src="fruit pancakes.png" alt="fruit pancakes"> 

Again, this isn’t enough to conjure up a realistic image and doesn’t accurately describe what we can see.

• Spammy <img src="pancakes pan cakes delicious breakfast top breakfasts hotcakes recipes.png" alt="pancakes pan cakes delicious breakfast top breakfasts hotcakes recipes">
• This is keyword stuffing at its finest. Do not do this. 
• Good  <img src="stack of blueberry and banana pancakes with powdered sugar.png" alt="stack of blueberry and banana pancakes with powdered sugar"> 

Bingo. It’s descriptive, accurate, but not spammy. 

Top tips for alt attributes

• Describe the image specifically - alt text exists to provide text explanations.
• Keep it reasonably short - a general rule of thumb is less than 125 characters.
• Use keywords - this is another opportunity to boost SEO
• But don’t stuff  - being spammy won’t score you any points.
• Don’t include ‘image of’ or ‘picture of’ - there’s no need to specify.
• Include model or serial numbers  - include these in your alt attributes where appropriate. 1. Angles

For images of items such as the pancake example above, one picture is likely enough to get the message across. But, in the example of the handbag, you’re probably going to want several photos to show consumers shots of:

• The front and back of the bag,
• The interior,
• The handle and strap.

To make the most of these additional photographs and optimise the images, be sure to change the image description and fill out your alt attributes for each, for example:

• Image description: 2021-red-leather-ladies-handbag.jpg 
• Alt attribute: <img src="red leather handbag silk interior compartments.png" 

alt="red leather handbag silk interior compartments"> 

Put the effort in and add descriptions to your base alt attribute and Google will reward you with searchers landing on your website.

3. File size

We’ve all seen it happen, you head to a website and the visuals appear painfully slowly, bit by bit, taking what seems like an age to fully load. This is the worst-case scenario for businesses, as we’ve already heard the effect slow page load time can have on traffic. So what can you do?

Webpage load time is directly impacted by the size of the files on that page, so if you decrease file sizes you can increase page load time.

There are multiple tools at your disposal to reduce file sizes, here’s a rundown of our favourites:

• Photoshop express - this nifty app from Adobe can be used on smartphones and tablets, it doesn’t have all the functionality of some solutions but it’ll do the trick for reducing file size.
• Canva - an online image editor with some pretty advanced functionality, including file size optimisation.
• PicMonkey - according to experts in the field this one’s a ‘staggeringly great photo editing tool’ - we’ll leave that up to you to decide, but it’ll get the job done.
• Adobe Photoshop (full desktop version) - put your images into photoshop and you can select ‘save for the web’ and adjust your image to the smallest file size possible while keeping tabs on the quality of the photo. 

What’s the perfect size?

A good rule of thumb for eCommerce websites is to keep image file sizes below 70kb if possible. This isn’t always easy for larger images but it’s helpful to consider the size in which you upload your images as this will help.

Most good website building tools will give you options when you craft your pages and insert your images as to what size you want to upload, but remember to always keep an eye out for quality and check the smaller file size hasn’t compromised the image or made it pixelated.

4. File type

JPEG, PNG, and GIF are the three most common file types on offer and can affect images in different ways.

• JPEG - the standard image format on the web, JPEGs can be compressed considerably allowing for smaller file sizes without compromising on quality. 
• GIF - most commonly affiliated with humour these days, GIFs are lower quality than JPEG and used for more simplistic visuals such as icons. GIFs support animation but generally aren’t ideal for large images and photos. 
• PNG - gaining steady momentum online, PNGs are being used as alternatives to GIFs since they support more colours and don’t diminish in quality over time with re-saves. File sizes with PNGs tend to be much larger than JPEGs.

Top tips for file types

• JPEGs are more often than not your best bet - especially for large images. 
• Use GIFs for thumbnails and decorative visuals only.
• PNGs are a useful alternative to GIFs in some instances.
• Never use GIFs for larger pictures.
• Play around with the different file types until you find the one that suits your image best, without compromising on quality. 

5. Decorative images

Generally, anything non-product related is considered a decorative image, for example, stock imagery, backgrounds, and borders.

It can be tempting to add an array of decorative images for aesthetic appeal, and in some cases, it’s necessary to break up longer texts or bland pages, but do this with caution.

The more images you add to a page, the bigger the impact on page load time. The key is to find the sweet spot between being aesthetically pleasing and degrading the consumer experience and load time. 

You can do this by checking the file sizes of all your decorative images and reducing them where possible, using the templates on offer by your platform to minimise file sizes, and removing any unnecessary filler images.

Remember, having ample white space on every web page impacts overall SEO, and consumers don’t like to be bombarded with too much colour or a page that’s too busy, so use your decorative images wisely.

Key takeaways

When it comes to optimising images for your business’ website, here are our four key takeaways:

• A picture’s worth a thousand words - visuals are super important to the user experience, but choosing the right ones is key.
• Nothing worth having comes easy - take the time to fill out our image descriptions and alt attributes to boost SEO and web traffic.
• Size matters - page load time can make or break an eCommerce store, so optimising file size is critical, make use of the file types at your disposal to nail it.
• Quality over quantity - find the sweet spot between an aesthetically pleasing webpage and one that’s compromised by slow load times because of too many visuals.

 

Bryony Pearce

Copywriter