Project
# Introduction
In this lesson we work on
Hero component to demonstrate how to use the NextJS <Image> component to optimize the images.This is the final result at the end of the chapter:
# Work with local assets
First we replace the default image of the Hero component with a local image, a little "Fabio Biondi" emote (a cartoon version of myself :)
Download this image (Right click) ans save to the
/public/ folder of the project.
High resolution: 1.5Mb
Files inside
/public folder can then be referenced by your code starting from the base URL (/). So in this case /logo-fb.png.Open
hero.tsx and replace the image:1
Replace the default image with the new one
2
Replace the
button with the Link component
/components/widget/hero.tsx
The image size is
1.5 MegaBytes, its original size.
# The Image component
We now use the NextJS
Image component to optimize the image (size and image type).Replace the
img element with the Image component:/components/widget/hero.tsx
The image size is now only
21.7kb
# Loading: Improve LCP
Since this image is the LCP candidate we should avoid
lazy load the image (that is the default setting of the Image component).
We'll use using eager instead:Large Contentful Paint
LCP (Large Contentful Paint) is a Core Web Vitals metric that measures how much time the biggest element of the page is loaded.
When this element is an image we should avoid lazy loading since it increase the time of loading. The
eager option allow to the browser to discover the image as soon as possible and reduce the LCP value.Lighthouse
How did I find out that the image is lazy and should not be?
Running Lighthouse we can easily discover the Core Web Vitals score and all its performance issues:
NOTE: you should always run Lighthouse using the production version of the application:
npm run build# Quality
Set the
quality attribute of the Image component to set the image quality:# Blur
Display a blurred placeholder before the image is loaded:
Error in console:
It means that we should provide an alternative URL for the blurred image.
text version of the error
We'll use the second strategy: static imports.
This technique allows us to avoid manually creating an alternative image.
Next will handle it for us but we need to import the image as shown below:
/components/widget/hero.tsx
A blurred placeholder is shown before the image is loaded:
That's all for Hero component!
Improve Hero
Of course we could create a dynamic Hero component that accepts custom properties if this component can be used in other parts of the application.:
/app/page.tsx
We won’t do it because it’s not inherent to the book since passing properties from parent to children components is a React functionality
Try it!
# Customize NotFound Page
We use the
Image component in the not-found page too:
/app/not-found.tsx
Download the image used in the previous snippet (right click - save as...):
High resolution: 3.1Mb
New
Membership Plan, italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
