Using AVIF in React

Proper optimization of images and image sizes starts with the use of modern web-centric image formats like WebP and AVIF. We already talked about using WebP in React so we’re gonna focus here on AVIF.

Let’s say you already have your storefront built in React and you’re using Crystallize as your Product Information Management (PIM). Now, you want to deliver to your customer the best experience possible, using new images in AVIF format. No worries, check how easy it is to add them to your project.

There are already a couple of other blog entries explaining what AVIF images are and how they can deliver performance to your webshop. Today, I will show you how to easily add those images to your React project with Crystallize.

Join 2000+ ecommerce businesses that are already growing their business with our newsletter.

I guess you already know that Crystallize transforms your images into .jpeg, WebP and AVIF file formats; you just need to add them to your storefront. With Crystallize react-image, that’s super easy and straightforward. Just import the component the package provides you and give it the information provided by the API, and boom, you’ve updated your online shop with a new image format if the browser supports it.

Sample response from the Crystallize Catalogue API:

[
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@100/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 100,
       "height": 100
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@100/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 100,
       "height": 100
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@200/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 200,
       "height": 200
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@200/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 200,
       "height": 200
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@500/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 500,
       "height": 500
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@500/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 500,
       "height": 500
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@768/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 768,
       "height": 768
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@768/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 768,
       "height": 768
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1024/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 1024,
       "height": 1024
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1024/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 1024,
       "height": 1024
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1366/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 1366,
       "height": 1366
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1366/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 1366,
       "height": 1366
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1600/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 1600,
       "height": 1600
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1600/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 1600,
       "height": 1600
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1920/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 1920,
       "height": 1920
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@1920/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 1920,
       "height": 1920
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@3200/giorgio-trovato-0czwuzhic84-unsplash.webp",
       "width": 3200,
       "height": 3200
   },
   {
       "url": "https://media.crystallize.com/minicars/20/9/3/3/@3200/giorgio-trovato-0czwuzhic84-unsplash.jpeg",
       "width": 3200,
       "height": 3200
   }
]

Sample HTML:

<picture>
 <source
   srcset="https://media.crystallize.com/minicars/20/9/3/3/@100/giorgio-trovato-0czwuzhic84-unsplash.webp 100w, https://media.crystallize.com/minicars/20/9/3/3/@200/giorgio-trovato-0czwuzhic84-unsplash.webp 200w, https://media.crystallize.com/minicars/20/9/3/3/@500/giorgio-trovato-0czwuzhic84-unsplash.webp 500w, https://media.crystallize.com/minicars/20/9/3/3/@768/giorgio-trovato-0czwuzhic84-unsplash.webp 768w, https://media.crystallize.com/minicars/20/9/3/3/@1024/giorgio-trovato-0czwuzhic84-unsplash.webp 1024w, https://media.crystallize.com/minicars/20/9/3/3/@1366/giorgio-trovato-0czwuzhic84-unsplash.webp 1366w, https://media.crystallize.com/minicars/20/9/3/3/@1600/giorgio-trovato-0czwuzhic84-unsplash.webp 1600w, https://media.crystallize.com/minicars/20/9/3/3/@1920/giorgio-trovato-0czwuzhic84-unsplash.webp 1920w, https://media.crystallize.com/minicars/20/9/3/3/@3200/giorgio-trovato-0czwuzhic84-unsplash.webp 3200w"
   type="image/webp">
 <source
   srcset="https://media.crystallize.com/minicars/20/9/3/3/@100/giorgio-trovato-0czwuzhic84-unsplash.jpeg 100w, https://media.crystallize.com/minicars/20/9/3/3/@200/giorgio-trovato-0czwuzhic84-unsplash.jpeg 200w, https://media.crystallize.com/minicars/20/9/3/3/@500/giorgio-trovato-0czwuzhic84-unsplash.jpeg 500w, https://media.crystallize.com/minicars/20/9/3/3/@768/giorgio-trovato-0czwuzhic84-unsplash.jpeg 768w, https://media.crystallize.com/minicars/20/9/3/3/@1024/giorgio-trovato-0czwuzhic84-unsplash.jpeg 1024w, https://media.crystallize.com/minicars/20/9/3/3/@1366/giorgio-trovato-0czwuzhic84-unsplash.jpeg 1366w, https://media.crystallize.com/minicars/20/9/3/3/@1600/giorgio-trovato-0czwuzhic84-unsplash.jpeg 1600w, https://media.crystallize.com/minicars/20/9/3/3/@1920/giorgio-trovato-0czwuzhic84-unsplash.jpeg 1920w, https://media.crystallize.com/minicars/20/9/3/3/@3200/giorgio-trovato-0czwuzhic84-unsplash.jpeg 3200w"
   type="image/jpeg">
 <img src="https://media.crystallize.com/minicars/20/9/3/3/giorgio-trovato-0czwuzhic84-unsplash.jpg"
   alt="Mini model car" caption="[object Object]" width="3200" height="3200">
</picture>

Using the picture tag in conjunction with the source tag, we can provide the browser with more alternatives to choose from, so first, we will provide AVIF images, followed by WebP, and finally .jpeg format. Order matters. We want the browser to try the AVIF file format first, as it provides better image quality to compressed file size ratio compared to WebP (in most cases) and is definitely superior to .jpeg. 

Lastly, the image tag will be the fallback for browsers that don’t support any of the sources provided previously.

There is also a storybook for the package, that you can play with before implementing it in your project.

As you can see using WebP and using AVIF in your React storefront is pretty simple, especially with it being offered as an out-of-the-box feature in Crystallize.

Now, what is the difference between AVIF or WebP, and which one should you be using as a format for your eCommerce shop is a whole different story.

Wanna know what else we offer as an out-of-the-box feature that helps you streamline your workflow? START building for FREE or schedule a personalized 1-on-1 demo and let us walk you through Crystallize.