How to Optimize Images for Web and Performance
Author: Kenneth ([email protected])
Published: Sunday April 4, 2021
According to the data from HTTP Archive, images make up nearly 64% of an average web page in terms of load size. Being such a critical component of e-commerce, news, fashion, blogs and travel portals, it is important to know how to optimize these images. Using optimized images will help us deliver an engaging yet fast visual experience without hogging on those extra kilobytes of data.
Here are some important image optimization techniques that should be kept in mind when using images on a website or mobile app.
1. Use correct image dimensions
You should always use an image that is sized exactly or at least close to the size that has to be finally rendered. Using an image that is larger than what is required is by far the most common and the most taxing mistake that can be seen on websites and mobile apps.
Consider a case where the final image that has to be rendered is 200px wide and 300px high. Ideally you should load an image that fits exactly in this container i.e. 200 px by 300px. If you were to load an image that is 800px by 1200px in this case and let the browser or app resize it for you, then you are loading about 10–15 times the data than what is actually required.
This is more important for e-commerce applications where a lots of product thumbnails are shown on a page. Sizing the thumbnails right can reduce the page load size significantly.
2. Compress your images
Even after selecting the correct image dimension and format, it is possible to further reduce the size of the image via compression. There is Lossy and Lossless Image compression.
One method of compression is by removing all the unnecessary metadata associated with the image without changing the image quality. This metadata can be safely discarded while displaying the image. This method is called lossless compression and is a must before using images on a website or an app.
The other method, lossy compression that reduces the quality of the image to get a lower size. However, the human eye cannot distinguish between the original uncompressed image and an image at a slightly reduced quality. Hence, on a scale of 100, it is often safe to reduce the image quality to 80–90. Doing so often brings down the size of the image to 20–25% of the original.