Framework List
Now that you've learned how fantastic AVIF is, 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. To make sure we are not talking nonsense, we tested it with the following frameworks:
- facebook/react
- vuejs/vue
- angular/angular
- vercel/next.js
- svelte/svelte
- nuxt/nuxt.js
- gatsbyjs/gatsby
Other frameworks
In principle, other frameworks might work differently. We found out from our research that Meteor and Ember support AVIF files without additional configuration. Still, since we did not experiment with the latest version live, we listed it here as "maybe works" until we were in the science lab.
- meteor/meteor
- jashkenas/backbone
- polymer/polymer
- emberjs/ember.js
Example code
This is the code we used to display the image below in React and Next.js:
1<picture>
2 <source srcSet="/images/cloudflare-stats.avif" type="image/avif" />
3 <source srcSet="/images/cloudflare-stats.webp" type="image/webp" />
4 <img src="/images/cloudflare-stats.jpg" alt="avif in frameworks" />
5 </picture>
Webpack File Loader
In some cases, especially with older versions, and when using webpack, you may encounter some problems. Especially:
1Module parse failed: Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this fail. See https://webpack.js.org/concepts#loadersSimply 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
We could not find a plugin that 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. Have you ever encountered such a plugin? Have you had any good or bad experiences with it? Please let us know so we can complete this article.