Images are a key component of every website. According to HTTP Archiveimages make up for more than 60% of data loaded on web pages. Being such a critical component of almost all websites, whether it is e-commerce, news, fashion websites, blogs or travel portals, image optimization is important, and perhaps the lowest hanging fruit, if you are looking to speed up your image heavy website.
Optimizing images on your website can be broadly divided in 3 categories — load lighter, load fewer and load faster. The 5 techniques that we discuss in this article or any other techniques that you come across would most probably fall in either of these 3 categories.
So, let’s get started and look at some simple techniques you can implement today to make significant progress on optimizing your image heavy website.
1. Resize your images
This is a must have. Resize your images to exactly what is required on your website. And no, I am not talking about resizing using CSS or in the HTML. I am talking about resizing the image on the server and then sending it to the browser.
For example, you have a 4000x3000px image for a product you want to list on your e-commerce website. On your website, however, you need to show a much smaller image of this product. It could be a 200x300px image on the product listing page and a 800x1000px on the product detail page. Make sure that you scale down the original image to these dimensions BEFORE sending it to the browser. The resized images are much smaller than the original image and will load much faster than the original image.
In my opinion, incorrect resizing of images, is the biggest area of optimization on most websites. And often, we as developers, tend to overlook it. Consider the following scenario: You start out with perfectly sized images for your new website. Over the next few months, your website’s layout changes and so do your image dimension requirements. However, instead of generating new images to meet these new dimension requirements, which is quite a task in itself, you make do with a close alternative. For example, you use a 300x200px image where a 200x200pximage would have worked. I guess this would have happened with everyone.
In the above example, the difference might seem small for a single image in terms of Kilobytes. But it is still 21%. This small difference, added up for a lot of images, has the potential of speeding up your website and reducing your bandwidth consumption by 21%.
The best scenario is to have an image server that can resize an image to any given dimension, in real-time, just by changing the image URL. That ways, whenever your image dimension requirement changes, all you need to get your new images is to specify that dimension in the URL.
There are many open-source and server-side implementations that you can implement on your own. ImageKit is one such third-party service which, apart from all the other features, provides real-time URL-based resizing and cropping. And you can use it on all your existing images as well in a few minutes of setup.
2. Optimize your images
The next step in speeding up your image heavy website is to choose the right format and quality for every image on your website.
JPG, PNG and GIF are the most common image formats being used currently on the web and are each suited for different use cases. There is another relatively new image format called WebP that combines the best of these image formats, is 30% smaller in size and is supported on almost 75% of the modern browsers.
Given the huge performance benefits, you should deliver your images in WebP format wherever possible. On the other browsers, you can continue to deliver the original image format.
Image quality, simply put, is a measure of how the image looks visually. There is a direct correlation between image quality and image size. Higher quality results in higher image size and, as a result, a slow website.
Different image compression methods take advantage of the limitations of human eye to distinguish between small changes in color information to compress images. As a standard, a quality level of 80 to 90 (on a scale of 100) is usually a good tradeoff between image size and quality.
Comparison between the same image encoded at different quality levels. The images are almost similar visually but have different sizes.
A simple way to do accomplish format and quality optimization is to use ImageKit to deliver your images. It automatically converts an image to WebP wherever possible and also optimizes the image quality in real-time.