The Complete Guide to Optimising Images for the Web | Squarebird

The Complete Guide to Optimising Images for the Web

Images are great for any website, they can create a more engaging and sometimes a more interactive website. They are also important for communicating different aspects of your brand or written content so most websites these days have a pretty large image library.

The issue is that without optimisation, these images can considerably slow down a website over time. This makes it essential to reduce image sizes and optimise how they are served in order to not sacrifice page load time.

What is Image Optimisation?

This is the process of reducing image file sizes, using more optimised file formats or adding the ability or functionality for the website to display the images in a more optimised way.

Depending on the type of website, plug-ins can help to compress images, serve them in next-gen formats and add code that defers loading of images. If a plug-in is not available, then a script could also be used.

What are benefits of Image Optimisation?

Websites have grown over the last few years; it is estimated that the total size of a webpage has increased by 356% over the last decade. Although websites have become more complex with more user-friendly features, videos and images are largely responsible for the increase in website weight.

Image optimisation is actually an easy way to optimise your whole website and definitely worth it considering the benefits.

Here are some of the main benefits:

  • Less Server Space – Images need server space so reducing the overall size of images will help to speed up server loading times.
  • Better SEO – If done correctly, image optimisation can considerably improve the overall SEO of your website. Although page load speeds are the main factor for this, the optimisations send strong signals to Google that the website has been optimised for both search engines and users.
  • Faster page load speeds – a more lightweight website loads faster and this very important for the user experience of your website as most users won’t wait longer than 3 seconds for a webpage to load.
  • Back-ups will be faster – backing up your images is a lot more streamlined when they are optimised.

How to Optimise Images on Websites.

Optimising images involves a few techniques and different approaches. WordPress websites are easier to update as there are plug-ins available that can help to make the process a lot easier. Some of these plug-ins are free or offer mostly free features too.

Plug-ins can do everything from compressing and replacing existing images in your image library to converting images to more optimised formats like WebP and AVIF and then serving them in these image formats.

You can even get website speed plug-ins like Jetpack Boost that add the functionality of lazy loading of images and deferring them until they actually need to be loaded.

If you don’t have WordPress or don’t want to use plug-ins, then you can always make these optimisations yourself manually. This doesn’t have to involve painstakingly optimising the images individually as you can use a script to do all the work for you.

Image File Formats

If you are implementing the optimisations yourself then you could even make use of existing file formats where possible. Although all websites should consider using next-generation image formats, using JPEG is also acceptable if the image has been compressed.

PNG images should be converted where possible, but some elements would benefit from having clearer images such as logos.

Image Compression

As mentioned earlier, plugins can compress images as you upload them to your image library or serve them as compressed versions of the original images. The manual approach would be a lot more time consuming though as it involves using an image processing and editing tool and then individually uploading the compressed image.

There is a lot of image compression tools available and most of them are free such as GIMP or lesser-known image processing tools.

Resize Images

Some images may need to be resized in order for them to be displayed properly. Resizing images is also very important for stock imagery as the image will be seen as an original image and therefore treated better by Google.

Larger  image dimensions are typically favoured by Google and they recommend that “Large images need to be at least 1200 px wide and enabled by the ‘max-image-preview:large’ setting, or by using AMP.”

Image Alt Text and Captions

Alt text and captions for images are an often overlooked but very important part of image optimisation. Having descriptive alt text for the image is extremely important for SEO as it tells the search engine what the image is about. Captions and Alt text are also good for accessibility as they provide context for the images and captions can be read by screen reader software.

Optimising Images on websites for faster page load speeds and better SEO

Whether you’re aiming to increase your organic traffic or just speed up your website, optimising your images can be very instrumental for improving how your website performs. Here at Squarebird, we understand the importance of having fast loading websites.

We offer both Web Design services and SEO services that can help identify ways to optimise images on your website which will make them better for users and search engines. Get in touch today to find out how we can help you optimise your website!

Get a free consultation call with our team.