- Welcome back to another video.
My name is Larry Snow, and in this video,
I'm going to be showing you two image compression tools
that I use on a daily basis
before I upload images to my website,
and I'll let you know why image compression
is a huge factor in a faster-loading website.
So let's get started.
(electrical popping and static buzz)
Images often account for most of the downloaded
bytes on a webpage, and also often occupy
a significant amount of visual space.
As a result, optimizing images can often yield
some of the largest byte savings
and performance improvements for your website.
The fewer the bytes the browser has to download,
the less competition there is for the client's bandwidth,
and the faster the browser can download
and render useful content on the screen.
If you have ever waited on a site with large image
files to load, you have seen why image compression
is necessary.
To compress images means you take away,
or regroup parts of an image,
so that it takes up less space.
Long load times will cause more of your customers
to abandon your page in search of another one.
Long load times may affect your website's
Google search results rank.
There are two basic algorithms used for compression,
lossy and lossless.
Lossy compression makes changes
that create lower quality images.
The smaller you make the file, the more noticeable
your differences between the original
and the compressed file become.
Lossless compression algorithms
don't discard any information,
so they result in larger files
than lossy compression generates.
Lossless compression finds better ways
to store the information, and the picture
does not lose any quality.
An example of a lossy type of image is J-P-G,
or J-P-E-G, or JPEG.
A GIF image, G-I-F, is another example.
Lossless image types are PNG and TIFF, T-I-F-F.
There are many different tools available
to compress images.
In this video, I'll be showing you a Google Chrome Labs
web app, Squoosh, and Optimizilla.
Others I've tried are Compressor.io,
TinyPNG, and Compressnow.
Let's start with Squoosh, and Squoosh
is what I have on the screen right now,
and it is a Progressive Web App, or PWA,
that works with any browser on desktop and mobile,
and offers several best-in-class codecs
to compress and compare images within the browser.
Since it is a PWA, Chrome OS users and Windows 10 users
with the latest version of Chrome
will be able to use Squoosh like a native app.
So, let's start with one of these down here,
the demos that they have right here.
We'll click on that, and it'll open up,
and this is the interface.
So what you have on the left is the original,
what you have on the right is what you're compressing.
And the line in-between is the difference between each one.
So let's take a look at some of the tools here.
So I, at the very bottom, I can reduce the size
of what I'm looking at.
So I get the full picture, or I can zoom in.
I have a way to position the image in a different direction.
Over on the right-hand side, we have our compression tools.
We can actually resize it, which does not compress it,
so don't mistake that.
But you can resize it for maybe like a Facebook size,
or if you want something square, or that type of thing.
They also have an image quality.
Now this is something you might see in Photoshop.
I know in Photoshop we have low, medium, and high,
and you can choose those here as well
when you resize it.
You also have a way to reduce the palette,
which means reduce the number of colors
that are seen on the screen.
And you also have the choice of what compression
version you'd like.
Now, the one that Chrome is using,
and the one that they're pushing out right now, is WebP.
It has some of the other ones, and it defaults to MozJPEG
when you first load up Squoosh.
But you can change a JPEG into a PNG
by using OptiPNG or Browser PNG,
and if you upload a PNG, you can reduce it to a JPEG.
The next thing down is the quality range.
So on a scale of 0 to 100.
So when you first load up your image,
it's going to give you a 75 quality.
It's going to say this is pretty close with the original,
and this is as far as I can reduce it
and have it look the same.
And what I usually do is I try to get it down,
first of all, I'm not uploading 2.79 megabytes
to Squoosh to reduce for a website.
You want to have something that's maybe
in kilobytes, and you're uploading it to reduce it
to get lower kilobytes, right?
So I start working on how far can I go
without losing a lot of the quality?
Now you can see here, if I move this over a little bit,
you can see here on the right-hand side
that that's starting to pixellate
when we have it on quality of 27.
So I usually end up around a 60.
Now, if I look at the original here,
you can't really tell the difference.
But again, this is a huge image, so I've reduced it by 79%,
which is fantastic.
But again, I wouldn't use this type of example,
but this is just for you guys to get a handle
on what exactly Squoosh does.
Now if you use some of these other options here,
compression options,
if you switch to WebP, you have more options
in the compression tool.
So, let's go and show advanced settings.
So you can compress certain channels,
like the alpha quality, the alpha filter quality.
You can also adjust the filter strength.
You can do some other conversions.
So it's much more detailed on the conversion
if you switch to WebP.
And if I click down to Browser PNG,
you won't have very many options.
So I usually MozJPEG, because that's the simplest
way to do things.
I haven't really delved into some of the WebP,
because I need to get an image out quick,
so I usually use the MozJPEG and look at the quality
and make sure I'm comparing the original
to the one I'm compressing so that I know
that it's going to be a pretty close comparison,
and then that way I know I have a pretty good image
that will be seen on the website.
So that is Squoosh,
let's go on over to Optimizilla.
And both of these are free, by the way,
I didn't mention that.
So Optimizilla is another online image optimizer,
and I uses a smart combination of the best optimization
and lossy compression algorithms to shrink J-P-E-G
and P-N-G images to the minimum possible size
while keeping the required level of quality.
So unlike Squoosh, where there is a lossless option.
If we go to the WP version,
see how there's a lossless version we can do here?
In Optimizilla, there is no lossless version,
it's only lossy.
So one of the great features of Optimizilla
is the ability to upload 20 files at once,
20 images at once.
And you can just drag and drop,
or you can click on Upload, and select up to 20,
and import them in.
For this demonstration, I'm just going to grab our photo
from our Squoosh,
and it's going to do the compressing,
and it's going to say, okay, this is the best result
I can give you,
and compared to the original.
Now again, it's a gigantic image, so it reduced it by 43%,
and I think we can do a little bit better.
So it does have the comparison, so I can zoom in here,
and let's look at the eye, 'cause I think the eye
has the most detail.
Now, if I reduce that down to 70,
we're going to notice that the eye is starting
to get a little blurry.
And if I reduce that a little bit more,
much more,
although when you zoom out, it looks relatively the same.
If we take it down to 0, or 10,
you can definitely see the pixelation there
compared to the original.
So I don't want to have pixelation in my images,
but I want to reduce them as much as possible
without compromising the image quality and style.
I think that's pretty good there, let me see the eye.
So we reduced it by 85%, which is fantastic,
especially for such a large image.
So from here, you would just click on this Download
button up here, the yellow one,
or you can click on Download All, if you have more than one.
So in comparing the two, you'll notice that
I cannot change the JPG I uploaded,
the JPEG photo I uploaded here, I cannot change it,
it will download as a JPG.
Unlike Squoosh, where I can go in, and I say,
okay, I want it much larger,
and I want to do an OptiPNG, and it will allow me to download
a PNG from a JPG.
So that's something unique to Squoosh.
So this is, I upload a JPEG, and it will download a JPEG.
So that's one difference.
Also, I think Optimizilla has much simpler controls.
For a while here, I was trying to figure out everything,
although I do like the Resize option.
I felt it was a little bit overwhelming,
especially when you switch to WebP,
to figure out what all of this means,
especially when you go into show the advanced.
Now I'm sure a person who's very hip to images
and image quality, and maybe is a photographer,
or interested in photography, knows all of these options,
but for a web developer, marketing person,
all you want to know is, does this compress my images
well enough and still maintain the quality of it
that I can upload it to my website
to make it load a little faster?
So, thanks so much for watching this video.
For more information about me, you go to LarrySnow.me,
and I'll see you in the next video.