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<sourcesrcSet="/images/cloudflare-stats.avif"type="image/avif" />3<sourcesrcSet="/images/cloudflare-stats.webp"type="image/webp" />4<imgsrc="/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 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:
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.
