Automatic image quality optimization

ImageKit now supports automatic responsive images and a data-saver mode using Client Hints. Read more about it in this blog – Lighter and automatic responsive images with Client Hints

To reduce the size of an image there are two broad methods of compression – lossy compression and lossless compression. The difference is that the original image can be regenerated from a losslessly compressed image. But it cannot be from a lossy compressed image because essential image data or information is lost during compression. Image quality optimization deals with the lossy method of image optimization.

JPEG, for example, is a lossy method of compression. It takes advantage of human eye’s perception of images (colour vs luminance, high vs medium frequencies etc.). This means that while compressing an image with lossy compression, some of the information in the image is lost. The idea of image quality optimization is to compress an image to the extent where the loss in image data is not discernible to the human eye.

For example, the two images below, look exactly identical and are in the same JPEG format

Quality 80 Image            

But the one on the left is just 12.3KB whereas the one on the right is 59.3KB.

Similarly, every image can be subject to lossy compression without any drop in visual quality. And with that compression, you can end up saving at least 50-80% bandwidth when compared to the original image.

Scale of image quality optimization

Quality level is usually computed at a scale of 1 to 100 with 100 being highest quality. Generally, quality level from 80 to 90 works for almost all the use cases.

Quality can either be specified as a numerical value in the URL transformation parameters or in your ImageKit dashboard.

ImageKit automatically subjects each image, that is delivered through it, to lossy compression along with automatic browser-based format optimization. This ensures that the image is delivered in the correct format at the correct quality level without making any change to the image URL.