Framework List
You may be asking yourself, "How do I use AVIF images in frameworks? Since AVIF is relatively new, the implementation must be super complicated and time-consuming!" The answer is simple: Most Javascript front-end frameworks support AVIF natively and rely on HTML and CSS implementation. We tested the following frameworks for you:
- facebook/react
- vuejs/vue
- angular/angular
- vercel/next.js
- svelte/svelte
- nuxt/nuxt.js
- gatsbyjs/gatsby
- meteor/meteor
- jashkenas/backbone
- polymer/polymer
- emberjs/ember.js
Example code
To use AVIF in your code, rely on the HTML implementation. You can use the following code to display AVIF images across all the frameworks.
1<picture>
2 <source srcSet="/images/react-avif.avif" type="image/avif" />
3 <source srcSet="/images/react-avif.webp" type="image/webp" />
4 <img src="/images/react-avif.jpg" alt="avif in frameworks" />
5 </picture>
Note that in many frameworks, you can also import the image and then add it as a source.
Webpack File Loader
In some cases, especially with older versions of frameworks and when using webpack, you may encounter the problem that no appropriate loader is set up:
1Module parse failed: Unexpected character ' ' (1:0) You may need an
2 appropriate loader to handle this file type, currently no loaders are
3 configured to process this fail. See https://webpack.js.org/concepts#loadersIn this case, add the detection for AVIF files to the fileloader in your webpack.config.js:
1module.exports = {
2 module: {
3 rules: [{
4 test: /.(png|jpe?g|gif|webp|avif)$/i,
5 use: [{loader: 'file-loader'}]
6 }]
7 }
8}Automatic conversion
To this date, no framework plugin reliably converts the image to other sizes and formats, such as AVIF, to match the client's device. Node.JS library Sharp implemented AVIF support, which might be a good choice for you. Next.JS offers automatic image optimization.
What is AVIF?
As a new image format, AVIF is poised to take over the web soon. AVIF is an acronym for AV1 Image File Format. In this case, the AV1 part refers to the encoder, initially designed for video transmission. In addition to JPG, PNG, and GIF, AVIF can also replace WebP.
The AVIF format supports alpha transparency, HDR (high dynamic range), WCG (wide color gamut), monochrome, animated image sequences, and multi-layer images. Since it is a royalty-free format, it is not subject to licensing restrictions.
This format has a significantly better compression rate than WebP and a much better compression rate than JPEG. For the same visual image quality, AVIF files have consistently and substantially reduced in size compared with WebP images, regardless of the settings used.
There are still some differences between AVIF's compatibility and WebP's (around 70% compatibility in web browsers versus approximately 95% for WebP). Still, AVIF has many advantages that will aid in its popularity and adoption.