Use AVIF in Frameworks like Vue, React & Angular

21.10.20 · 5 min read
Now that you've learned how fantastic AVIF is, you might wonder: 'Yo, how do I use AVIF images in frameworks? As AVIF is quite new, this must be super complicated and time-consuming to implement!’ The answer is simple. Most javascript frontend frameworks support AVIF natively and rely on HTML and CSS implementation. To make sure we weren't talking nonsense, we tested it with the following frameworks:
You can see some screenshots of our test on Angular and React below:

Other frameworks

In principle, other frameworks might work differently. From our research, we found that Meteor and Ember support AVIF files without additional configuration. However because we have not experimented with the latest version live, we are listing them here as "maybe works" until we've been in the science lab.

An example code

This is the code I've 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>
using avif in reactrendered avif in reactusing avif in angularrendered avif in angular

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 appropiate 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 were unable to find a plugin that will convert the image into a different sizes and formats like AVIF to suit the needs of the client, and choose a modern format when possible. The Node.JS library sharp looks like its about to implement AVIF support. Did you ever come into contact with such a plugin? Did you have any good or bad experiences with it? Please let us know so we can complete this article.

Related topics, websites and sources

Related Questions, tags and headlines

(avif)
(image optimization)
(javascript)
(framework)
(angular)
(svelte)
(react)
(vue)
(nuxt)
(gatbsy)
(meteor)
(backbone)
(polymer)
(ember)
(javascript framework)
(How do I use AVIF images in React Single page Web App)

Related articles

#NextJS
Start using AVIF in your Next.JS project
Curious to read on how to use AVIF images in Next.JS? Well, this site does exactly that! Learn more.
#css
Fully support AVIF in your CSS today.
Learn how to boost your website by using the new AVIF image format in the `background-images` of your CSS.
#html
How to get started with AVIF using HTML
Enjoy this in-depth guide on how to use AVIF in HTML. Featuring examples with modern delivery standards.
Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.