How to Setup Next Gen Images for React Hosted

“If Google says to do it, you should do it” — the intuition. If you use Google’s Lighthouse Audit and have images on your application you’ll notice Google has been barking something new to us: Serve images in next-gen formats

It looks like this:

5.25s

Very obvious and aggressive. But what does this mean?

I’ll just copy what Google states:

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.

But, what is the browser support?

Webp

Ok, most of the way there… even Opera Mini!

80% there

JPEG 2000

At 95% if both are used!

At 95%! You can go further

JPEG XR

Basically 100%!

So, if you use all 3 then you have 100% support. So how to do so?

How to add these fancy image formats to your site?

I put quite a bit of thought into this. First, seeing if there is some awesome size that’ll get me exactly where I need to go. But it is not so simple. But there is this awesome Command Line Tool to use:

ImageMagick to the rescue

With this tool you can convert your image formats. All those “ancient” image formats to the “new generation” formats. It’s really simple with ImageMagick.

Here’s a shell script that’ll convert all images you put into an Images folder into webp and jp2 formats.

imageMagick is the convert command

This would create another folder and store the images into the next gen formats.

Now you have the images, what about adding them to React?

Then you can just use the picture html element.

That is literally all there is to it.

I created this library to simplify the process: https://github.com/jMuzsik/nextGenImageCreation

It gives you a handful of shell scripts to run. It creates a chronological process that makes things way easier.

1. You can first create an S3 bucket to store the images in.
2. Convert those files into webp, jp2, jxr, anda placeholder image.
3. Move all those images to an S3 bucket, all in a specific folder such as webpImages , jp2Images , etc.
4. Get all the image data in the bucket in a JSON file to reference.

And that’s that.