How To Speed Up Your Website By Optimising Images

Images make up the bulk of the internet. Even if you are running a simple blog about your writing, or a video site, images will still come into play. You might use images as featured pictures, to break up long chunks of text, or to attract your users’ attention to your content.

As such, since images are an integral part of any web page, how do you optimise them to boost your website’s performance? In other words, what are some of the factors that you should bear in mind when optimising images for your WordPress website?

In this article, I will be discussing the answers to the above questions.

Speed Up Your Website By Optimising Images

Why Should You Optimise Your Images?

The biggest question we should answer, before going any further, is: what is the need for image optimisation?

Of course, many folks cite speed as a concern and a valid reason for image optimisation. But do you honestly need that? After all, the world has fast internet access and who cares if a 600 KB images is compressed to 100 KB?

Actually, it does matter. While our internet connectivity maybe as fast as it can be, at the end of the day, a faster loading page provides a much better browsing experience than a slower one. Similarly, you should also note that many users browse the web via their mobile devices, and optimised images are really useful for mobile browsing, when compared to unoptimised images that may slow down your website’s mobile performance.

More importantly, search engines such as Google openly favor faster websites when deciding pagerank, and you can optimise your images to improve your website’s search rank as well.

Now, how should you “optimise” the images on your website? There are certain major considerations in this aspect.

The Images Themselves

Alt Attribute and Nomenclature

Many users tend to add Captions and Titles to their images, but forget the Alt attribute. The Alt attribute is what used to be displayed back in the day when an image could not be loaded (poor internet, or an outdated web browser). Now, images are loaded anyway and the Alt attribute is rarely displayed; however, it is still useful for search engines, especially if you want your images to be considered for Image Search results.

That isn’t it; for SEO considerations, you should employ a proper nomenclature for your image files. For instance, green-smartphone-cover.png is better than xyz1132.png — in other words, employ descriptive file names, not generic raw file names. Alt tags too, ideally, should be slightly descriptive and useful.

Photo: Wikimedia Commons

Image Formats

There are many web-friendly image formats out there, and unless you have been living under a cave, you might be familiar with some of them. JPG, PNG, GIF, etc. have become the norm for the internet when it comes to images.

JPG offers good compression, although it does degrade the image quality a bit. PNG is generally loved because it supports transparency (JPG does not) and also offers better quality while compressing the image. GIF, on the other hand, is now becoming synonymous with animated images anyway.

There are other formats as well, such as WebP, BPG or even SVG. The trend is shifting in favour of SVG images, but as of now, JPG and PNG continue to dominate the web.

Image Resolutions

Most modern WordPress themes and web browsers can resize images on the fly, so many users tend not to resize their images themselves. This, surely, is functional, but not the most ideal approach.

You should consider resizing your images, if possible. For instance, if you have a list post, you may keep the featured image as gigantic as you might wish, but resize the other list images to something of a lesser dimension. This will save time that would otherwise be spent resizing images as and when the page loads. Every nanosecond counts.

Compression Tools and Services

Following that, of course, compressing your images is the most obvious method to optimise them.

There are many popular tools: TinyPNG is my personal favourite, which handles PNG or JPG files well and offers a great compression ratio without compromising quality. However, it cannot handle images larger than 5 MB in size. If that suffices for your needs, this is probably the only tool you’ll need for the job. Kraken is a similar service.

In terms of WordPress plugins, WP Smush is rather popular option that can auto-compress your images as soon as you upload them. Note that the free version of this plugin, however, does not compress images over 1 MB in size.

Other Considerations

There are other measures that you can take to compress and optimise your images as well. For example, relying on a CDN service is a good idea, especially if yours is an image-heavy website with global traffic. CloudFlare, or Jetpack’s own Photon, are ideal picks for serving your images via CDN. Photon is especially helpful because it serves your images via WP.com cloud servers, and does not cost a dime.

‘Lazy loading’ images has become quite popular as well, though this is more of a front-end consideration rather than an image optimisation tip. Essentially, the logic behind lazy loading is simple: if you have 18 images on a given web page, you probably won’t be able to fit all 18 images in the viewport at the same time. As such, you can load the first few images right away, and thereafter, as the user scrolls down the viewport, you keep loading images as and when the enter the browsing range or the viewport.

In practice, lazy loading of images seems like a novel concept. However, for what it’s worth, I have often found it to be overdone, or badly implemented. Speaking particularly about my experience — as I prefer skimming (sometimes skipping) through chunks of text that is otherwise too obvious when reading an article — lazy loaded images tend to consume more time as I often have to go back and wait for them to load because I scrolled too quickly. That said, for blogs and websites that publish image posts and roundups too often, lazy loading of images might be a good strategy. There is a helpful WordPress plugin for this purpose.

Conclusion

Image optimisation is very important for the success and performance of your website. Optimised images can not only improve your website’s speed, but also give it a boost in terms of search engine page rank and create an overall better browsing experience for your site visitors.

What strategies and tools do you employ for optimising images for your website? Share your views in the comments below.