When it comes to delivering superior user experience and dominating the SERPs (Search Engine Result Pages), speed goes a long way.
Google takes the websites’ speed into account when determining results positioning whilst website visitors definitely do not wait around for websites to load.
This makes website speed optimisation of the utmost importance and one way to achieve better speeds is by optimising website images.
Images tend to take up the bigger chunk of data that a website needs to load. They improve the user experience and can even aid in achieving better SEO rankings. This makes removing images, not exactly an option.
With many optimisation techniques that are easy to undertake, you can make sure images are well and truly optimised, helping you rather than hindering you in achieving SEO mastery.
In this article we will be looking at the top optimisation techniques you can undertake to make sure that your website not only loads faster, but is more search engine optimised, and at the end of the day affords visitors a better user experience that will keep them coming.
1. Size does matter
When it comes to website images, that size matters is indisputable. Uploading image files directly to your website from the source without making sure that the size makes sense is a big no-no. Image websites such as Pexels, Unsplash, and Adobe Stock all offer images in extra-large sizes which your website definitely does not need.
Trim those images before uploading them and your website will have less data to load with virtually no drawbacks.
Resizing images can be done very easily using software as complex as Photoshop or as simple as Windows image viewer. Either way, you will be looking at faster load times, less wasted space on your web server, and happier users all around.
Take a note: Resize and compress images before uploading.
2. Optimise image data
Computers can find it very hard to read images. To get around this, they rely on information surrounding the image instead. When optimising your images, you should be paying extra attention to this data that surrounds the image to ensure that images better your SEO efforts. Here are some things to look at every time you add an image to your website;
Make sure that the image you upload fits in the context of the article. Do not stick any image but make sure it adds value and place it strategically.
The title attribute is the image title and visually, its the line of text you’ll see when hovering on an image. This helps visitors understand the image more. When it comes to the actual text, be as concise as possible.
The alt attribute is the alternative text that is displayed when an image cannot load either due to internet or server issues. This also helps blind people read through your website as alt attributes are interpreted by text readers. Google also uses this to understand the theme of the image, making this one of the most important texts to consider when adding images to your website.
Take a note: Fill in attributes and make sure the image fits the context
3. Use the correct format
Pay particular attention to the format of your image, that is to say, the width and length of the images. Take the time to see how images look on different screens to avoid distorted images being displayed to certain users which can contort the user experience.
The most common image format is 4:3, however, you can use such tools as Google Analytics to understand what screens your visitors are using the most then make sure you optimise for the majority without losing sight of everyone else.
The image format can also refer to the file extension. Here, JPGs should be used for general images whilst PNGs are best left for logos and super-fine images. There is also Google’s WebP which offers vastly smaller image sizes than JPGs with both lossy and lossless compressions.
Take a note: Use JPG or WebP for images and PNGs for logos and images requiring superb detail.
Images can be compressed into much smaller sizes so that they load faster. Whilst this might reduce the overall quality of the image, chances are it will not make the slightest difference to most users.
Lossy vs lossless compression: What is it?
When it comes to compression, you will often hear of lossy and lossless compression so it might be worth taking time at this juncture to explain the difference between lossy and lossless compression
This type of compression is usually reserved for PNG and GIF images. It basically removes the metadata whilst leaving the image intact. It does not save a lot of space, but in the pursuit of optimisation, it is still worth the trouble.
Lossy compression, on the other hand, degrades the image quality however you can determine by how much. Generally speaking, anything between 70% to 80% is considered more than acceptable without quality will not suffer too much.
As compression can be done at different levels, it makes it easy to find the sweet spot where neither quality nor site speed suffers. As a general rule, no image should be larger than 1 MB.
Take a note: Compress images between 70% – 80% without exceeding the 1MB mark.
There are many ways website images can be optimised to make sure your website runs smoother, loads faster, ranks better, and ultimately provides users with a better experience. Whilst certain processes can seem a bit tedious, such as resizing images, ultimately this will pay many dividends.
To help you manage image optimisation faster, include the image optimisation processes in your style guide to make sure you are not only consistent but able to optimise images that much faster.
SEO is an important set of processes not only for your website’s health, but also for your sales processes. The more people you attract to your website, the more sales you will be able to close. Having a fast website that ranks goes a long way in helping you do just that.