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 essential parts.
What is the right image format?
The right format for a particular image depends upon the content of that image and available format support in the requesting browser (or end-user device).
Format optimization can be defined as choosing the right format while delivering a particular image taking into account different factors like the requesting device capabilities, image content, image quality, etc.
ImageKit automatic best image format selection
For example - if you open the below image URL in Chrome, you will see a WebP image, but the same URL in FireFox will give you a JPG image.
This behaviour however works only if you have the automatic format selection enabled from your dashboard settings or if you specify
f-auto in the URL transformation parameters. Both of these have been explained later in this article.
Following factors are taken into account while choosing the right format:
1. Automatically converting and delivering WebP images based on browser support.
ImageKit automatically handles this selection of the best format amongst possible image formats. The browser support for WebP image format is checked on every incoming image request. ImageKit further analyses if the image is suitable to be delivered in WebP image format. If both the criteria are fulfilled for a particular image, then ImageKit automatically delivers the image in WebP format. Otherwise, it chooses the next best possible format for that image.
2. Selecting the right format based on image content
Sometimes you will accidentally upload PNG images which don't have any transparency. Ideally, these images should be delivered in JPG or WebP format. ImageKit will do this conversion for you without any effort.
However, if the image has transparency, then both PNG and WebP format is evaluated based on the end user device support.
How to turn off automatic image format selection?
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 globally, you can do so under image settings in your dashboard.
How to selectively turn on automatic format selection?
If you have disabled automatic format selection from the dashboard and still want to selectively turn it on for few sections of the website, use the f-auto parameter.
How to deliver images in a specific format?
f-auto which enables automatic format selection from the URL parameter, you can also provide a specific format for the output image.
For example, f-jpg to deliver a JPG image, f-png to deliver a PNG image etc.
The supported values for this format (apart from auto) are - jpg, jpeg, png, webp and gif. Note that providing 'gif' as the value for this parameter would work only if the input image is GIF as well (i.e. no conversion to animated WebP takes place).