A Step-By-Step Guide To Optimise Images For SEO Performance

Images are a vital aspect of the internet. From helping users to visualise data to separating huge chunks of text to provide a visual break, graphics and photos help create an ideal user experience as well as boost webpage design.

However, visuals do affect the loading of a webpage. Even if you utilise good meta tags and adhere to good SEO practices, the more images you have and the higher the resolutions, the longer the loading time. If the whole purpose of adding graphics is to create a better user experience or to boost SEO performances, then it is essential to note that you cannot achieve so with a slow-loading page.

Hence, the question of the day: How then do you balance the need for visual design with site performance? Easy! You optimise images for web! There are several things you can note throughout your graphic design process in order to optimise your webpage.

What is image optimisation?

To put it simply, image optimisation involves decreasing the size of the file without sacrificing its quality. The aim is to help reduce the size of data the consumer has to load when accessing your page so that they are able to receive the content faster and more efficiently.

How to optimise graphics and images?

Follow this step-by-step process when optimising any graphics or images on your website:

Step #1: Benchmark your current site speed

Run a speed test on your webpage before working on optimising your images. In the end, you will be able to comprehend the impact image optimisation has. Google PageSpeed Insights is a browser-based speed test tool that provides the necessary details regarding your page’s performance and speed.

Step #2: Choosing the best-suited picture file type

The general file types used across the internet are PNGs, GIFs, and JPEGs. JPEGs are ideal for showing high-quality images using smaller file sizes. Unless you are using graphics with a see-through background, JPEGs are the go-to file type for the majority of sites. PNGs are ideal file types for pictures that do not require a lot of colours (for example, icons or flat illustrations) or are meant to be transparent. GIFs are also a popular file type, especially for memes. However, they have limited colour support. To optimise GIFs, you need to think about their duration, whether they will be kept on loop, and the number of GIFs you will be using on the page.

In addition, there are also ‘next generation’ image formats that you should look out for that might further enhance SEO optimisation. They are WebP, JPEG 2000, and JPEG XR. These file formats allow even more significant compression, yet maintain the original quality. Not only does it allow for faster loading speed, but it also ensures smooth aspect ratios across various devices. As these formats are relatively new, it is not yet supported universally; however, they are worth using in the right situation and are definitely worth noting in the future.

Step #3: Resize your visuals before uploading them

One of the most straightforward and best way to optimise images for web is to resize them before uploading them to the targeted page. If you are using pictures taken from your camera, then cropping them to an appropriate size when editing them is ideal. For example, if we were to upload photos at 1024 x 927, all the extra pixels may not provide any benefit but only increase the file size while slowing down the page’s speed and performance.

If you have no idea how to resize your images, consider using an online image editor such as Photopea that provides free use of basic image editing and resizing.

Step #4: Compress visuals to a lower file size

Once you have gotten the desired image in the correct file type and size, you can compress it before uploading the image onto your targeted page. This step ensures you decrease the size of the file without having to sacrifice much quality. There are two essential compression methods: lossless and lossy.

Lossy compression may sacrifice some element of the image, but in a way that our eyes would not notice. Lossless compression, like the name suggests, will ensure the same quality even after the graphic has been compressed. This is an optional step. However, if you realise that a particular image on the page takes a while to load, it may be a clear sign that compression is necessary.

Step #5: Use a WordPress plugin to help automate image optimisation

By this step, you might be thinking that there is too much work involved in optimising images for the web. There is an efficient way that helps streamline part of the process, and that consists in installing a WordPress plugin that helps automate image optimisation.

While there are a few available online, each having their own unique features, they generally help to resize and compress your images when you upload them on your page, meaning you skip those two steps without having to do so manually.

Step #6: Load a lower quality visual first using the “blur up” technique

Despite following the previous steps to optimise your images, there are rare cases where the file size might still be too big, or you are using quite a few pictures on the targeted page, hence still experiencing slow page performance and speed. In that case, it might be beneficial to not only optimise the visuals but also optimise the loading experience to “trick” users and the search engine into thinking your page is loading faster than they actually are.

The following two steps help you achieve that “speed”. This method involves loading a Lower Quality Image (LQI). By loading a small file size of the whole image first, it offers the consumer something to view while they wait for the entire load.

Step #7: Lazy loading images

Like the “blur up” method, lazy loading “tricks” the user into thinking the page loads faster than it actually is. How it works is instead of loading the entire page at once, it loads the content that is in view first. So, the visuals within immediate view load completely first, while the rest load as a placeholder until they are scrolled within view.

Conclusion

At the end of the seven steps process, run the updated site speed again to see the change in performance and useability. These optimisation techniques are all interconnected and work best when used together. If you are working on improving your SEO results, these techniques might help you achieve the slight boost that you have been looking for.

Nevertheless, it is always beneficial to engage professional help when it comes to optimising SEO results. Impossible Marketing is the top digital marketing agency in Singapore offering affordable SEO services as well as lead generation, social media marketing, and search engine marketing (SEM), among others. Get in touch with us to find out more today!