Automatic Best Image Format Selection

Manu Chaudhary

Given multiple image format to choose from, it often becomes difficult for developers to make sure that images on their website & app are in the correct format. Among other image optimization techniques, this is one of the very important parts.

What is right image format?

Let’s understand this with few examples.

Example 1

WebP 21.6KB

WebP 21.6KB
JPG 24.3KB

JPG 24.3KB
PNG 47.1KB

PNG 47.1KB
No format specified

No format specified

WebP – Use parameter f-webp. It won’t render in non-supporting browsers like Safari, FireFox, and IE.

https://ik.imagekit.io/demo/tr:w-200,f-webp/medium_cafe_B1iTdD0C.jpg

JPG – Use parameter f-jpg
https://ik.imagekit.io/demo/tr:w-200,f-jpg/medium_cafe_B1iTdD0C.jpg

PNG – Use parameter f-png
https://ik.imagekit.io/demo/tr:w-200,f-png/medium_cafe_B1iTdD0C.jpg

ImageKit automatic best image format selection

When you don’t specify any format parameter i.e f-png or f-jpg like below, then ImageKit chooses the best possible image format depending upon browser support and image content.

https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg

Example 2: Format selection based upon image content

WebP 6KB

WebP 6KB
PNG 2.8KB

PNG 2.8KB
JPG 2.9KB

JPG 2.9KB
No format specified

No format specified

This image has transparency layer, and JPG doesn’t support transparency, so the only two possible candidates are PNG and WebP. Though WebP offers much better compression, but in this particular case, the smallest image is PNG. With ImageKit automatic image format selection, a PNG is served when you don’t specify any format.

https://ik.imagekit.io/demo/imagekitwebsite/static/build/img/logo-dark.png

This automatic format selection works out of the box. You don’t have to add or change anything to your image URL. However, if you want to turn it off, you can do so with your ImageKit dashboard settings.

Automatic best image selection setting in ImageKit dashboard

Automatic best image selection setting in ImageKit dashboard

Let’s wrap it up!

So now you know that no single image format is “correct”. It largely depends upon the content of image and browser support. You can use this knowledge and improve your in-house image management software or try out ImageKit for free and automate this!