Use AVIF in Frameworks like Vue, React and Angular

Table of Content

TL;DR

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

You can see some screenshots of our test on Angular and React below:

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, but since we did not experiment with the latest version live, we list it here as "maybe works" until we were in the science lab.

✓meteor/meteor
✓jashkenas/backbone
✓polymer/polymer
✓emberjs/ember.js

An 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#loaders

Simply 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 meet the needs of the client, and if possible choose a modern format. Node.JS library Sharp implemented AVIF support, which might be a good choice for you. Have you ever contacted such a plugin? Have you had any good or bad experiences with it? Please let us know so we can complete this article.