Using Next-gen Image Formats to Enhance Your App's Performance (React)

15 Shares

Share

Tweet

Share

Pin

Email

Share

Problem: Slow loading time on an application's pages.

 Download The Notes Here

Introduction

There are a number of possible reasons why the pages on your application may load slowly. This guide focuses on using WebP versions of your images to help your applications load faster. This guide was created alongside a React application, but the ideas in this guide can apply to other applications and websites besides React. According to a web.dev article here, "JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data."

Lighthouse

Before continuing, let's take a look at how Lighthouse (an open-source, automated tool for improving the performance, quality, and correctness of your web apps) can help us here. For best results, run Lighthouse in incognito mode. While in Chrome, run Control + Shift + N to open incognito mode. Then, go to your URL, open the developer tools, and select Audits.

Click on "Generate report".

The Problem

If you have a large image in either .jpg or .png format (the image in the screenshot is 2246 x 1473 pixels in size), it will take a long time to load. As you can see, Performance in Lighthouse is 78%, and it took 36.91 s to load. Lighthouse suggests serving images in next-gen formats.

What To Do

1. First, convert your image from .jpg/.png to a next-gen format using an online converter like this one. In this example, we’re using this converter to convert from .png to.webp.

2. After converting the image into a .webp format, put the image into the appropriate folder. In this case, it has been placed in the img folder.

3. Import the image with the new .webp extension (line 3).

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import skirt from '../../img/skirt.webp';

const Home = () => {
  return (
-- REST OF CODE --

4. And that’s it. Now it should work.

5. The load time should now be faster. And when checking on Lighthouse, the Performance score has improved and is now at 90%. And we no longer get the message that suggests serving images in next-gen formats. And now when the pages on your app load, they should load faster.