Exploring The New Image Component With Next.js 10

Next.js released an optimised image component that optimizes how images load on Next.js websites. In their own words: “Images are always rendered in such a way as to avoid prevent Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.” — Next.js image docs

In this post, we’re going to explore and play around with this new component to see it in action.

Getting Started

We will use create-next-app build out the project:

Selecting an image

For this particularly exploration, I went to Unsplash and chose an image to my taste.

In this case, I went with Florian Olivo’s Jellyfish image.

Afterwards, I went to the online tool Squoosh to resize the image at 800x1199 and optimized it with the basic settings.

This created an optimized version of the image at 78KB, while the original, unoptimized version was 4.5MB.

Updating the homepage to put in both version

Following on from the example I saw in the Next.js examples repo, I altered it to show both the optimized and unoptimized image:

Essentially, that was all I need for playing around with it!

I deployed this example to Vercel to see what the results may be.

Exploring the results

When first visiting the production website, I noticed that while the images were loading, there was a nice…