Exploring The New Image Component With Next.js

Next.js released an optimised image component that optimizes how images load on Next.js websites. In their own words:

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:

# Create a new project `hello-nextjs-image-component`
npx create-next-app hello-nextjs-image-component
cd hello-nextjs-image-component
copy

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.

Jellyfish

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:

import Image from "next/image";

function Home() {
  return (
    <>
      <p>Unoptimized</p>
      <Image
        src="/assets/unoptimized.jpg"
        alt="Unoptimized jellyfish image"
        width={800}
        height={1199}
      />
      <p>Optimized</p>
      <Image
        src="/assets/optimized.jpg"
        alt="Optimized jellyfish image"
        width={800}
        height={1199}
      />
    </>
  );
}

export default Home;
copy

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 space kept there for where the image was due to load into:

First load

This space relates to preventing the cumulative layout shift which, as mentioned prior, is a core web vital.

During this first load, the unoptimized image took ~17 seconds to load into the page. This is due to Next.js optimizing the image before loading.

I made the rookie error of not have the Network tab open during the first load of the project, so the timing itself is not perfect but here the Network tab of a re-deployment of the project I did later to show a similar experience to my first load:

Network tab first load

.

Once loaded, we get a screen that looks like the following:

Loaded page

According to the docs, the caching works as so:

So in our case, once the image has been optimized during a call, it is cached and subsequent requests will load our required image wickedly fast! Here was the network for my original deployment on reload:

Network on reloads

In conclusion

Today's post was about seeing Next.js image optimization in action using an unoptimized and optimized source image on a live deployment.

While this is only a surface-deep look, it is incredible to see what you get out of the box with Next.js 10 image optimization and it is certainly a great step in the right direction for helping developers.

I've been keen to see other solutions in this space since coming across the react-ideal-image package a couple of years ago and this is definitely one of those solutions that stands a head above.

Resources and further reading

Image credit: bmarcel

Originally posted on my blog. Follow me on Twitter for more hidden gems @dennisokeeffe92.