Start using AVIF in your Next.JS project

11.11.20 · 6 min read
So, you're expecting some colossal blog post? Well, it won't happen. The blog you are currently reading uses the latest version of both React and NextJS. Not only that, but the bundler automatically detects AVIF files and treats them accordingly. We didn't have to do anything for this work. That's what we call a top-notch service, gentlemen!

That's it?

Yes. This approach is sometimes referred to as "GG EZ". You must simply include the AVIF files in your project and insert them via the usual methods using HTML or CSS. No configuration is required, however, you must make sure that next.config.js includes the following:
1const images = require("next-images");
2module.exports = withImages()
Next.JS will handle all the bullshit behind the scenes for you.

You gotta be kidding me

The team behind Next.JS has been working on improving the way images are processed since version 10.0.0. They are now offering both a built-in image component and Automatic Image Optimization service. They describe their image component as "an extension of the HTML img element, evolved for the modern web."Why, you may be wondering? Well, images in this component are resized, optimized, and automatically served in the right format based on the device and browser of the visitor. For example, you would not deliver a high-resolution image to a Nintendo Gameboy. Furthermore, the images that are lazy-loaded are supporting the Core Web Vitals by not shifting their layouts. Besides, this service may also be used when the server containing the images of the website is a CDN rather than a server hosted by the website.

Use the Next.JS image component

All in all, it's a simple "put this image into your project, add it with the component and we do all the conversion and optimization. That's perfect for lazy people like us. Booyah!
1import Image from 'next/image'
3      <Image
4        src="/yourmum.jpg"
5        alt="Picture of your mum"
6        width={9001}
7        height={0}
8      />

The component is not com..plete

While it does convert images into newer formats, it yet does not do the same for AVIF. There's a on Github which references AVIF on more than one occasion, so hopefully we will see this supported in future releases. As a final note, the images loaded through CSS do not get optimized, although we are praying this will be the case in future releases.

Next Optimized Images

Until that point, if you rely heavily on CSS images, you can use the third-party plugin in Next.JS called . It has many additional features, and it supports loading images with CSS, which is very useful for our use-case. Yet, the plugin does not yet support AVIF as well. Still, the author is currently working on a complete rewrite of the entire plugin, and a canary version is already published. We've linked to the plugin in the sources below.

Related topics, websites and sources

Related Questions, tags and headlines

(next js)
(user experience)
(image component)
(export default)
(react dom)
(react components)
(code splitting)
(server side rendering)
(server side)
(image optimization)
(Automatic Image Optimization: Next.js 10 New Standards for 2020)
(Server-side rendering with Gatsby and Next.js)
(Automatic Image Optimization)
(What are the advantages of using, for instance, Next.js over Gatsby, in that case?)
(How Gatsby and Next.js really work (and what it means for speed and SEO))

Related articles

Use AVIF in Frameworks like Vue, React & Angular
Serving AVIF images via JavaScript frameworks is quite easy - find out more here.
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.
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.