(upbeat music)
- Welcome back.
How did it go?
Let me show you how I solved this challenge.
Heading over to the co-editor.
First thing we'd like to do here is install
the Nuxt image module.
And to do that,
I'll run the command in my terminal
MPM install
at Nuxt image.
While it's being installed
I would open up the Nuxt config file
and in the modules property online 40
I'll add a new module there.
So right here, I'm registering the Nuxt image module
so that I can use it in my application.
Great. Now that we've done that,
another thing you need to know is that with Nuxt
it's only optimizes images that are
by default present in the locals directory.
So if you have like an image in the static file
or the assets directory, it's going to optimize that.
But if you're fetching data
from like an external API
and the domain for the image is different,
you would also need
to include an image configuration for that.
So let's add that.
So call this image
and in here
we'll add a new property called domains.
So here outsets the name of the domain
which is pixelford.com.
So now Nuxt image will recognize this domain
whenever it sees it in the source
of an image and sets optimizations for it.
Great. Now let's head into the gallery dot view file.
We're using the results
from the previous challenge that we made
and just adding image optimizations
to the image we have
in our gallery, online 15,
where you have the image tag
I'm going to switch that out
and instead add Nuxt image here
cause this is a component,
I will close it out as well.
Now here's the fun parts.
You can add different properties
to a Nuxt image to assign
like optimization benefit or gains to it.
Let's start by adding the width and height prop.
So out,
add the width to be 300
and height to be 200.
Now, I like to set a fit prop as well
and this is going to be cover
because once you use this
to preserve the aspect ratio
of the image that we have.
Next, I'll set a format prop,
and this prop tells you what image formats to use.
So there is options for you to use PNG,
JPEG or WebP,
for this I'll use WebP
which is a browser-friendly optimized image,
it's very good quality and small size.
Next I'll add the quality prop
and set this to 90.
This quality prop is used to set
the exact quality you want
your image to be displayed in.
So you have like,
from one or zero to a hundred, right?
Setting it between these numbers
just pixelates the E image a little bit more
and reduces the quality
of the image that you would get.
Finally, I would add a loading prop
and set it to lazy.
Now this would differ loading of the images
until they all are available
and appear on the view port.
Now that we have all
of these properties set to optimize our image,
let's head back to the browser.
I'll refresh this page.
Oh, okay.
We broke the build.
So I'll rerun MPM run def.
Now, if I head back to the browser
and refresh this page
we don't really see any difference.
But I'll show you what's different.
If I inspect this page,
inspect one of the images
you'd see that the source
of the images
no longer is the actual domain we have.
But instead we now have like a new URL
that includes the WebP formats that I set,
the quality,
the fit prop, the size prop,
and then it's appending all of that
to the original URL we have.
It also includes the loading lazy attributes
that we added to the image.
Great.
So there are other things you can also include
to make your image more optimized.
For example, you have like providers
that Nuxt provides for you.
Providers like Cloudinary, Image Mix.
These are all
external image optimization platforms
that you can actually store your images in
and have them optimize it for you
and use it directly in Nuxt image.
So the possibilities to what you can do here
is limitless.