What is AVIF
For digitization to succeed, file compression is an essential technology that reduces network infrastructure dependence. In the long run, AVIF is intended to make data traffic more efficient and replace the widely used JPEG format. By comparison to JPEG, AVIF offers a more efficient file compression and better image quality. There are significant global corporations interested in the implementation of the new image format in the digital industry. The AVIF format combines excellent compression with the flexibility to meet the demands of contemporary image formats. Both lossless and lossy compression are possible. Alpha channels store additional information about transparent image areas as they are with other graphic and image formats. In interfaces such as user interfaces, collages, and company logos, transparency data are released as objects. The AVIF color space is also compatible with wide color gamuts (WCGs). It includes functions such as graininess, color undersampling, and HDR (High Dynamic Range). A few other browsers support AVIF, such as Firefox and Chrome. AVIF's latest numbers can be found on caniuse.
What is Imagekit
ImageKit.io provides image management services for online businesses. Image optimization, resizing, cropping, and fast CDN delivery are all performed in real-time. Globally, companies use ImageKit.io to deliver images on their websites and apps, simplifying image management, improving image quality, and decreasing time to market for image-intensive applications. Imagekit provides unlimited requests and transformations with its forever-free plan. The storage capacity of your media library is 20GB, with unlimited storage for transformations. This company offers a comprehensive set of image-related features as well as fast email support. Credit cards are not required.
Imagekit supports AVIF
With effect from 15 December 2020, ImageKit will begin rolling out support for automatically converting images to AVIF onto devices that support the format. These devices will send the image/avif header in the Accept request. Here is how the rollout is planned:
- By adding the format transformation parameter f-avif to the transformation string, users can force their images to AVIF format.
- Users will gradually be able to convert to AVIF automatically without updating their URLs. Under Image Settings > Optimization, you can see if your account has access to this feature. Interested users can reach out to support@imagekit.io or start a live chat from their dashboard if this feature is not enabled.
- By 15 December 2020, users with custom CDNs will not be able to use this feature. Before enabling the feature, support will assist these customers with any CDN configuration changes required, if any.
- The AVIF format is supported by all transformations, with the exception of Preserve color profile (via dashboard settings or the URL parameter cp-true) and Unsharp Mask (e-usm). In the case that either of these two features is used in the transformation string or the dashboard settings, the final output image will not be delivered in AVIF. In such cases, WebP and other formats will continue to be effective.
- AVIF images can also be used as input images.
Forcing AVIF
ImageKit offers a format parameter that allows you to force an image to be displayed in any format. To convert an image to AVIF format, you should add the transformation parameter f-avif to the URL of the image. Then, you can use the HTML picture tag, as shown in the example below, to load AVIF images on browsers that support that format, and fallback to other formats on devices that aren't supported.
1<img
2 src="img.jpg/q_auto,f_auto,w_680/file.jpg"
3 srcset="img.jpg?tr=f-avif"
4 sizes="(max-width: 768px) 100vw, 768px"
5 alt="imagekit example" width="1920" height="1080" loading="lazy" decoding="async"
6 >Automatic optimization to AVIF format
As well as identifying the image formats supported by the requesting device, ImageKit can analyze the input image for content to determine the best output format. A technique such as this ensures the smallest possible output size for an image without compromising the image's quality. The following URL, for example, delivers the optimized image in AVIF format on Chrome 85+, WebP format on Firefox, and JPG format on Safari. You will not have to change the URL of the image or make any changes to our HTML to support the AVIF format using ImageKit. You will need to attach your existing image server or storage such as AWS S3, Google Cloud Storage, Azure, etc. or upload your images to ImageKit's media library to begin using ImageKit to deliver images on your website.
1<img src="imagekit.jpg?tr=w-300,h-300" alt="automatic-example"/>