Optimising your website images - why it's important for ranking on Google

Do you find that your website isn't loading as quickly as you expect? When consulting on web design in Kettering, most clients don't know that search engines take into consideration how fast your website loads - and this contributes to your search engine position (page 1 of Google etc.). 

So if your images are making your website sluggish, you need to get that fixed to ensure it doesn't affect your chances of getting found online. The process of making images smaller in size is called 'optimisation', and we're going to help you with that. 

Poor image optimisation is like a runner who doesn't bother to keep a good diet on a daily basis - over time he'll add extra weight, and eventually his running time will get slower, and slower and slower. Time to help you trim the fat! But don't worry, this process can be fast, easy to do and does not require a steep learning curve.

In this blog our goal is to help you:

1. Identify what 'bad' images are
2. Help you understand 'how small' your images should be
3. What you and your web designer can do about it today
4. How you can check if the changes actually made any difference

Firstly, if your website designer has not correctly optimised your website images, your website will suffer from the 'compound effect' - and this is when slow-down occurs. If you have many poorly optimised images all on one page, this will compound and your page loading time will increase massively. If you discover one poorly optimised image on your website, it's likely the rest will follow suit.

‍

So what is a 'poorly optimised' image and why is it 'bad'?

A poorly optimised image is a photo, illustration or even a logo which has not been passed through a deliberate process to decrease it's size. It's just been found, saved and dumped onto your website.

As mentioned, the smaller the better - because search engines love pages that load fast.

Poorly optimised images come in three flavours:

1. Images  which have huge file sizes - like a 1mb image
2. Images which have dimensions which are FAR to big for their application - e.g 3000px x 2000px rather than 650px x 300px
3. Images which are in a dated format (e.g. JPG) when smaller, free and faster options are available 

How can you identify if your images are poorly optimised? Here's a few ways:

1. Ask your web designer to send you a folder of all the images he's uploaded to your website so you can take a look.
2. If you're using a CMS like WordPress, login to your admin dashboard and navigate to 'Media' where you will be able to see how big (or small) your images are.
3. Visit your website, identify an image you suspect to be poorly optimised, then right click > and select 'open image in new tab'. You can then right click again, click 'save image as' and download the image to your computer. At this stage you can hover over the image to see its size and dimensions.
4. Running a Google PageSpeed Insight test to see how quickly your website loads on a mobile and desktop pc. Google (being the main search engine we are interested in) is looking for your website to load in under 3 seconds. Enter your homepage URL and record down the time Google reports.
5. What we want you to do at this point is make a list of all the images on one page which you suspect is loading slowly for you. Note the size in KB or MB for each. We will come back to this later.

How small should my images be then?

The average size of a website is 1.966 Mb for desktop and 1.778 Mb for mobile. So having x3 1mb images = 3mb on one page simply isn't going to cut it to get you ranking well and get found.

To understand how we are going to massively improve this situation, we quickly have to clarify that kb (kilobytes) is smaller than mb (megabytes) - we are aiming for image sizes in kb, not mb. With1000kb = 1mb, we want our images sizes to be anywhere from 75-200kb or even smaller. 

By doing this we could see an amazing 80% reduction in the load time for these 3 images. The total size for all 3 images on one page could be less than 600kb in total! Which would be an amazing result.

What can be done about this today and whose responsibility is it?

If you've built your website yourself, you can do the following steps to optimise your images:

Make sure the image doesn't have MASSIVE dimensions - Unless your image is going to be blown up to a HUGE size on your website...there is no excuse for any image to measure 4000pxx 3000px (pixels). Your website designer should have the sense to choose dimensions appropriate for the size of that image as it is viewed. If your image is full screen, at maximum it's width should be 1920px. 

Change the format the image is saved in - JPG is fast becoming an outdated image type - the future lies in saving images as WEBP and SVG (see below).

Use online optimisers to shave down the file size - use sites like Tiny Jpg or Compress JPG  or ShrinkMe.

Use a format appropriate for the TYPE of image - does the image need to have a see-through background because you have content behind it? Use PNG. Are you using JPG currently but cant get the file size small? Switch to WEBP. Do you have a logo that always looks blurry and has a large file size? Ask your designer to convert it to SVG. Choosing appropriately gives you the best chance to reduce that file size, rather than using JPG for everything!

Use online converters to change the format and shave down the size further - Use a website like Convertio to convert JPG's into WEBP. QUICK TIP: Pass the JPG through a website like TinyJPG BEFORE converting to WEBP - to optimise further.

Example:  We took a 1.1mb image and passed it through tinyjpg.com. New size= 360kb (67% reduction).

We downloaded that smaller file and converted to WEBP using the link above. New size = 258kb  Total reduction: 76%. If we were to appropriately change the dimensions of this image, we could have go this way below 200kb. It all depends on the application. 

Whose responsibility is it to optimise images? Ideally, your web designer. They should be optimising your images and re-uploading them to increase page speed. But if you made your website yourself, this blog is designed to get you on-track to seeing positive results fast. 

But has it actually made a difference?

Optimising one image may positively affect your page speed - but optimising everything is when the real benefits will come. Your web designer must also be making sure your website as a whole is optimised correctly to rank well with Google. Do you remember we did a Google speed test at the beginning of this blog? If you've had your images optimised now, and replaced the old ones, now is the time to re-test and see how quickly your site now loads. Is it faster? Congrats! If not, we can conduct a full website audit to see how you can improve further.

If you're unsure how to resize your images to optimise them well or simply don't have the time to faff around with this technical stuff but realise your Google ranking is important - get in touch now. 

P.S. Formats like WEBP and SVG may require your web designer to give security permissions to your website to allow these filetypes to be used.