Back to home

Getting StartedSelecting an imageUpdating the homepage to put in both versionExploring the resultsIn conclusionResources and further reading
Exploring The New Image Component With Next.js main image

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:

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

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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;

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

First load

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

Network tab first load

Network tab first load

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

Loaded page

Loaded page

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

Network on reloads

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

  1. Next.js Image Component
  2. Florian Olivo - Jellyfish image
  3. Squoosh
  4. Next.js Image Example
  5. Cumulative Layout Shift
  6. react-ideal-image package

Image credit: bmarcel

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

Dennis O'Keeffe

  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on, Den Dribbles and LandPad .

Related articles


Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.