Images are a key component of every website. According to HTTP Archive images 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.
So, let’s get started and look at some simple techniques you can implement today to make significant progress in 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 an 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.
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.
WebP: is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images.
Download Photoshop Plugin to Export WebP from Here
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 the 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.
3. Load fewer resources
Even after you have optimized all of your images, loading too many of them is bound to slow down your website and negatively impact the user experience. I am not advocating that we should use lesser images. But there are cases where we can avoid using images or avoid loading them upfront.
For example, instead of loading images, you can create buttons, gradients and other advanced elements using CSS.
The other more important technique that you can use is lazy loading for your images. Lazy loading basically means that we defer the loading of images that are not required immediately. Typically, any image that is not visible to the user on his screen or the viewport, can be loaded at a later point in time i.e. when the image enters or is about to enter the viewport.
Consider a case where you have 100 products on your web page. If you request all the 100 product images at the same time and at the very beginning, it would slow down the load time. The images would compete for network bandwidth and CPU resources with other critical items on the page like CSS and JS.
With lazy loading, we would only load, let’s say, 30 images that are visible to the user initially. Then, when the user starts scrolling down the page, we will keep loading more images. This would help improve the initial load time and user experience. There will be cases where the user doesn’t scroll down the entire page and hence some images would not get loaded at all. Thus, you also end up saving on bandwidth costs for image delivery.
Getting started with lazy loading is very simple with JS libraries like jQuery Lazy.
We have covered all the major techniques around image optimization and performance improvement. With this information in hand, you can solve for 90% of your image related problems, if not more, which would help you get faster page load times and rank higher in search results. Always remember, for images on your website (load lighter, load fewer, and load faster).