- [Instructor] Photoshop and other image editing tools
provide some level of compression.
But to fully optimize images for web performance,
you need to run them through a tool
dedicated to this purpose.
There are many such tools available.
And all of them can be plugged into your custom build
process to automate image optimization
according to your specifications.
The question then is, what tool to use?
Here are three options.
First, for industry standard image optimization,
Imagemin is a good choice.
You can use it to build a custom
optimization function in Node.js.
Use the CLI to optimize all images in a specified folder.
Or add automated image optimization into your preferred
build process using gold or grunt
or web pack or whatever it is you're using.
Out of the box, the Imagemin CLI
and provides lossless compression for JPEG, PNGs, and GIFs.
If you want to, and you probably should
you can change this by adding dedicated lossy compression
for each of them using plug-ins.
You have Imagemin Moz JPEG for JPEGs.
Imagemin PNG Kwant four PNGs
and Imagemin web P for webP.
Let me show you how Imagenmin works.
Here I've set up a very basic example using image node
and I'm pulling a set of JPEGs
and PNGs from a folder that sits outside this project.
All I want to do is grab each of these images,
run them through Imagemin, to optimize them,
and then place them in this min image folder
inside my project.
To do that, I pull in Imagemin,
Imagemin MAs JPEG for JPEGs and Imagemin PNG quad
for P and G.
Then I set up an async function
and call in Imagemin to apply it
to each of the images in the folder.
And here you can see I'm grabbing all the images.
So I'm getting both JPEGs and PNGs.
Then I set the destination
which is going to be this min image folder.
And I call into two plugins I wanted to use
and Imagemin Moz peg for JPEGs.
I've also set the quality here to 80% and imageminPNGquant.
I'm just using it as is.
So these will give me lossy compression
for both JPEGs and PNGs.
Now, all I have to do to get this to work is
run this node script so I'll say node ing-nodes.JS
run the script.
So I get some feedback here telling me what files
were compressed.
And then over in the folder, you now see
I have a series of compressed files.
To see the actual effect of running Imagemin on these files.
I can show you the files
side-by-side in my file Explorer here.
So over on the far left hand side
I have the original images.
Now these images were already optimized in Photoshop.
So what you're seeing is further optimization added
by Imagemin.
So for example,
belle-callouts the first P and G here was 26 K.
Now it's 12 K the biggest JPEG I had this redwoods.JPEG
was 1.5 megabytes, now it's 632 kilobytes.
If you see how Imagemin makes dramatic optimizations
on these images
without really changing the quality of the image itself.
Is this why you need to use Imagemin
or some other tool like it?
In addition to using Photoshop, to compress your images.
There's one more cool feature about Imagemin.
If you want to change the format
of any image you can use Imagemin to do so.
So let's say you have a bunch
of JPEGs and you want to transform them into webP.
You can do that automatically using Imagemin.
In fact, you can do that automatically
using all the tools I'm showing you here.
If you want to be on the bleeding edge
of inventory optimization, you can check out Squoosh.
Like Imagemin Squoosh uses various compression
algorithms to optimize images.
And it has an experimental CLI you can use to
automate that process.
Now I should highlight this is experimental.
And when I was playing around with it, I got it to work
but I also managed to crash it.
So it's not fully there yet.
However, if you want to push all the way
to the bleeding edge, you can totally use this.
Like Imagemin, Squoosh will also convert your images
to other formats.
So if you have a bunch of JPEGs and PNGs
and you want to convert them to webP, Squoosh will do that
and optimize your webP images for you all at the same time.
The challenge with Squoosh is it's slower than Imagemin
by quite a bit, but it promises better compression.
It also has a convenient drag and drop online service.
The one you're seeing here.
So if you need to just quickly optimize a single image
or if you want to see how the quality changes
when you do optimizations, you can just drop the image here.
You saw me use this previously in the course
so I won't do another demo here.
All right.
So Imagemin and Squoosh do the same thing.
They both minimize the size of the images
but what if you want to do more?
In that case, you should check out sharp
which provides a whole suite of tools
for image optimization, transformation and modification.
With sharp, you can modify the size, appearance, orientation
and other features of your images automatically.
And you can also do advanced things like
create multiple different versions of a single image.
This is especially useful.
If you aim to use responsive images markup
which of course you should always do.
Let me show you an example of this as well.
In this example, I'm using the same original images
that I've referred to previously.
They're sitting outside this folder
but there's just a series of JPEGs and PNGs.
Then I've set up a sharp script to convert the images
into different image sizes so
that I have all the different image sizes I need
for responsive images.
Here, I'm calling in sharp.
And then I'm also calling in some basic node function
so that I can work with the file system.
I'm also setting up the source directory
which is where the images come from
and the target directory which is where the images
are going to go.
Then for each
of the files that are retrieved using this function
I use sharp on the file.
And then I say resize and define the width of the image.
And here you can see when I scroll down
I have different widths.
So 320 pixels, 640 pixels,
960 pixels and 1200 pixels.
The idea is with sharp
I can now grab one image and output five different sizes.
And then I grabbed the file name,
appended an extra extension to it.
So in this case file name dash small
and then the extension that would either be a JPEG or PNG
then file name medium, file name large, and so on.
So let's see what happens when I run sharp
on the same images.
This function will now generate five images per image.
So you can see here I have for the belle-callout image
I have large, medium, small, XL.
And then for Oscar call-out large, medium, small, XL.
And so on.
Sorry, did I say five?
I'm meant four, of course I'm getting four versions.
Going to my file Explorer.
You can also see the sizes of these images.
So here we have belle-callout this is the original image.
And then over here
we have bell-callout small, medium, large
and extra large.
Now what you'll notice right away is these images
seem bigger in file size than the original image.
That's because this image is actually really small.
So what I've done is used sharp to make a much
bigger version of the same image
which quite frankly is just stretching the pixels.
It's not ideal, but it shows what's going on.
What it also shows is
that even though sharp does optimization
it doesn't do optimization as well as Imagemin.
So when I use sharp
I use sharp first to generate my images.
And then I use Imagemin afterwards to
minify those generated images.
That way I get the advantage of automating image sizing
and automating the optimization of the images.
You can also extend sharp
by adding additional image optimization but quite frankly
the job is done better by Imagemin.
So you should just put Imagemin your tool chain.
This gives you three options to work with.
My recommendation is to use Imagemin all the time.
Use sharp, maybe if you need to do conversions
and checkout Squoosh just to see how it works
because in the future
I expect that Squoosh will become the new default.