Using WebP in React

Fewer bytes to download for the user equals better pagespeed index, better conversion rate, and in general better user experience. It is also an important factor in eCommerce SEO.

The most well-known tricks to serve fewer bytes to download are:

• Optimize the quality of the images
• Use JPG where possible
• Use srcset to serve different-sized images for the different devices

Now there's another way to reduce the size of the images: the relatively new image format WebP. It supports both lossless and lossy, and can be used both for images with and without transparency.

According to Google’s own studies, using WebP will save an average of 30% of the PNG image size, compared to what's normally served on the web. For JPG, the savings are also so good that you should definitely favor WebP over JPG. Despite being smaller in size, WebP is able to retain the image quality such that you get the best of both worlds: smaller image and good quality.

That's something that we all get on board with!

The browser support for WebP is not 100% yet; at the time of writing this blog post, it's at 80%. Not too shabby, but we still need to provide a decent fallback for browsers that don’t support it yet.

The easiest way to do this is to utilize the HTML picture element and provide two different sources, one with WebP and one with the fallback. Like so:

<picture>
  <source srcSet=”img.webp” type="image/webp" />
  <source srcSet=”img.jpg” type="image/jpeg" />
  <img src=”img.jpg” alt="Alt text" />
</picture>

Our friends at Snowball created a nice pen on Codepen for us, demonstrating how this plays out in React. The source that the browser decides to load is displayed beneath the image.

WebP and AVIF are new formats that are taking over the web. In the above example, the WebP image is half the size of the JPG version, a super performance improvement by just using a different image format.

With Crystallize, you already have this out-of-the-box. We're generating both WebP and original file format for every image you upload, distributed on a content delivery network (CDN). Best of all, that’s not the only benefit you get with Crystallize.Wanna know what else we offer that helps you streamline your workflow? Schedule a personalized 1-on-1 demo and let us walk you through Crystallize.