3 top tips to help improve your website’s image optimisation
Imagine you just launched your brand new website after Months of difficult project management and, a couple of days later, you receive complaints that your website is too slow.
Does it sound familiar? In fact, it is a very common scenario which many websites can find themselves in. Site speed issues are widespread and even large, corporate websites are not exempt from them.
Sometimes speed issues are invisible. If you are browsing from your desk enjoying your fast broadband connection you might not notice any problem but, if you switch to your mobile connection, you’ll soon realise how things get tricky.
It’s important to make your website – and so your business – accessible to the widest possible audience, having your web pages loading quickly at any time and from any device. This is particularly important if your business operates internationally as broadband speed standards might differ from the UK, sometimes dramatically.
With the above said, it’s no surprise that a slow loading website can cost your business potential revenue: it has been estimated that 40% of users leave the website if it takes more than 3 seconds to load.
And it’s not just about user experience…
Site speed is also really important for SEO
As of June 2021, Google introduced an algorithm update which makes some key site performance metrics (called “Web Vitals”) a ranking factor. Put simply, you can see your site rankings deteriorating if you have slow loading pages on your website.
But where should you start optimising your website? We wrote this blog to answer to your question.
“The first step you can take to reduce your page load time is making sure that all the images on your website are optimised and compressed.”
Generally, images over 100 Kilobytes can heavily affect the page load time, especially for mobile users. This limit should be used as a benchmark and it may vary, but we wouldn’t recommend exceeding 200 Kilobytes in any case.
Uploading optimized and web-friendly images is the first step to achieve a top-performing website and finding the right compromise between image size and quality is crucial.
So, here are our top tips to optimise images for your website and improve your site speed and SEO.
1. Choose the right image format
Choosing the right format means you build lighter images from the beginning. As a general recommendation, please see follow the guidance below
JPG/JPEG ➜ Works very well with photo assets and complex “real-life” images. It is the most common format but also one of the heaviest. Use these images carefully on your website.
PNG ➜ Works perfectly with logos, icons, transparent images and graphic assets in general. They don’t take a lot of space on the website if they are properly optimised.
SVG ➜ Works very well with plain icons, shapes and background patterns. It can be also used for logos and any type of vector images. This format is super-light so don’t worry about its size. You can use as many as you want.
GIF ➜ Is the standard image format for animations. Use these wisely as they are usually heavy images.
2. Compress the size of your images
Sometimes we think uploading hi-res images on our website is a good idea as it makes the website look more professional but in reality this is a biased perspective, considering that a print-quality images are simply not rendered with the same level of detail on a standard HD screen.
Check the two images below: the right image is 61% lighter than the left one. Can you spot any difference?
|Image 1 (165KB)||Image 2 (64KB)|
Image recommended sizes by format
For any JPG/JPEG ➜ no more than 150KB
For any PNG ➜ no more than 100KB
For any SVG ➜ no more than 50KB
For any GIF ➜ no more than 200KB
Use the above list as a guidance but keep in mind that also the number of images is a factor to consider. The more images you have on a page, the lower their sizes should be.
The reason is that these will be added to the content a browser needs to download and render. Data from the HTTP Archive tells us the average page size in 2021 is 2.1MB, which takes around 5.6 seconds on an average 4G connection to download, which can go up to 13 seconds on 3G connection.
How can I compress images on my website?
There are essentially two ways.
You can use a graphic software such as Adobe Photoshop or GIMP
Use an online compression tool – such as tinyJPG – which makes the process super easy and smooth.
Once you’ve compressed your images, replace the original image in your website and you are done. If your website is built on WordPress, you can use a plugin to replace the images
3. Use the right image specs (Width x Height)
Try to scale your images properly, using a standard laptop screen as a reference. For example, if the image you are uploading is rendered in a 300×300 pixel box, your original file should be close to that.
It is very common, in fact, to upload a much bigger image and resize it with CSS as needed. However, CSS rules are just for screen rendering, they don’t actually resize the image. Which means your original image is still being downloaded.
Extra – Image ALT Text
This is not strictly related to site speed but, since we are talking about optimising images, we also want to talk to you about image the Alt text.
“Alt text (alternative text), also known as “alt attributes” are used within an HTML code to describe the appearance and function of an image on a page.” (Source: Moz)
Image Alt text (sometimes called “Alt tags”) is important for SEO as it helps search engines better understand the image content but first and foremost, it’s a principle of web accessibility as visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.
Good practices for Alt Text are:
Make sure it is descriptive of the image
Try to include a relevant keyword or topic wherever possible
Hope you found these tips useful. Below you can find the infographic.