Narrator: In this lecture, I'm finally gonna
show you how we can and should optimize our images,
both in terms of the image dimensions and also
of the actual file size in terms of kilobytes.
Now actually, I already did most
of the image optimizations here
so that we don't waste too much time.
So let me just show you what I did
on some images so that then after
that we can together optimize this big hero image here.
So let's take for example, these ones here.
So these application screens.
So right now here they are at the biggest size
that they will ever be, right?
So as we scale the layout down
the images will only get smaller.
And so it's important that we do this analysis
at the biggest size that the image will ever be.
Okay?
Now anyway,
the image right now occupies a width
of 187 pixels.
So that's what we can see up here above the image, right?
Now, remember the lecture about images
from way back in the design section.
So back then I told you that the actual image size
so of the image file itself should always be double
of the size that is actually displayed on the screen, right?
So hopefully you'll remember that and if not
then you can always go back
and check out that part of the lecture.
So just as a quick summary
the reason why we need an image that is double
the size than is actually displayed on the screen
is that these high density screens actually need two pixels
of the image to display one pixel in the design.
So in the layout.
So again, I explained that before.
Now anyway, the actual image size
we can get it by hovering here over the image.
And so you see the intrinsic size is 400 by 809
and the rendered size again is 188 by 379.
So the intrinsic size, so the actual size
of the image is 400, basically because I rounded this 188
here to 200, and then I made the image itself
double of that.
Alright, so basically the process is this.
We start with a really big image if we have it.
So in this case, it was probably like
a thousand pixels or so wide.
And then when I finished the design, I checked
out the largest width that the image will ever have.
And so that's again this 188 pixels here.
And then I rounded that to 200 and then doubled that to 400.
And so then I went ahead and resized the image
to have a width of just 400 pixels.
Alright?
And so with that, I finished the first step
of the optimization process.
So the part that is about the image dimensions.
And the same for example here.
So let's inspect that.
And so you see that the intrinsic size is 700.
And so that's because I rounded this rendered size here
to 350, which double makes 700.
Okay.
Now where I did not do that is on this one.
So here in our hero image.
So let's inspect that as well.
And then, so here the intrinsic size,
so the actual size of the image is 1400, so almost 1500
but the width that has been rendered is only 570 pixels.
So we now need to resize this image as a first step.
So let's round this to 600
and make the image then 1200 pixels wide.
Okay?
So let's come here again to these files.
And once again, you'll need some program to resize images
so make sure to download that, or of course
you can as always just use the file from the final files.
So as I said, the width should just be 1200
and so that is only 80% of the beginning.
So it was 2.9 megabyte, and now it'll be only 1.9.
And so that's already a nice saving.
So I saved it, and this should now have been reloaded
and of course it looks exactly the same
but now you see that the intrinsic size is just 1200 pixels.
Alright?
So that was important, but that's only half
of the things that we need to do.
So the other half is to actually compress now the image
in order to actually reduce the file size
because as you saw here, it still has two megabytes
which is way too much.
So that's not really acceptable.
And in fact, we can check out the entire size of the page
basically by coming here to the network tab
and then reloading.
So you see that it transferred 3.9 megabyte.
And so again, that's way too much.
Okay.
So the tool that we can use to compress images
is called squoosh.
So that's Squoosh.app, right?
And so here we can, well, there are different ways.
Let's just do this way here.
So selecting our image.
And so now it is compressing here.
Alright.
So here on the left side we have our original image
and then on the right side we have a
compressed version of that.
Now, right here it is using the JPEG format
which is not going to work because with JPEG
we cannot have basically transparent parts of the image.
So you see that, now here, the image turned black,
where in the original it is transparent
and the same down here.
So with JPEG, we could compress it a lot down to
125 kilobytes, but then we would lose the transparency.
So let's try here, Browser PNG.
And so that doesn't really work.
So here we don't have a lot of compression.
So let's try this OxiPNG.
And so that is doing something here, okay?
And it did reduce it 15%.
So let's try to increase that here to three,
this effort, see if that changes anything.
Well, not really.
So here, we then have to play around a little bit
with these different options that we get
for each of the image files.
So that doesn't change anything at all.
So let's try this one here, reducing the palette.
And so now indeed, that went down by a lot.
But let's see what that compression cost us.
So you see that here, her face, for example
is a lot worse than it was before, right?
And the entire image does look a lot worse
when we compare it with the original one.
Let's try again with the normal PNG.
So there it doesn't compress a lot.
So here we still have 124
and it's still doesn't look so nice.
So let's try this one here again, and I'm not sure
if this is going to work, actually,
but still, let's try this one.
So I will download it by clicking this button.
Okay, and there it is.
And then I will put it right here.
So let's say keep both
and then I will change the name here.
So hero-min.
Okay.
And then let's just try to replace
that here and see how it looks like.
So,
that's right here.
Okay.
And well, you see that the size
of the page is now a lot less
but the image does also not look so great anymore.
I mean, it's still okay, but it's not as good as before.
So we can actually do something else.
And something which is much better,
which is to instead of using PNG,
we can use a very new and modern image format called WebP.
So let's try WebP and out of the box immediately
we get a compression of 95%.
Right?
Now, if we check it out here,
then this doesn't look really good.
So let's increase the quality here just a little bit.
Alright? That's still not perfect.
So what if we gave it 100% quality?
Well, that's still not so great.
Let's try lossless here, maybe.
Well, that's doesn't look really lossless to me.
Let's try to decrease this even further.
And so here it's now a game basically
of finding the right balance
between the image quality and decompression.
So lossless doesn't really work.
So let's again try a quality of 100
but that doesn't seem to change the image here a lot.
So this doesn't really look so nice.
Maybe if we try to increase the effort
or probably even better, would be to reduce the palette.
Okay, so now actually it looks really, really good.
So I'm not that worried
as you can see over these two other images.
But this one here is the most important
because it's the most prominent one.
So 400 kilobyte is still a lot.
So let's try to put it back down to 70 something.
And yeah, beautiful, just 100 kilobyte.
But now it is back to being this blurred.
Let's try something like this.
So again, finding the right balance here.
That's still not perfect.
Alright, but now I'm actually satisfied.
Now I just want to get it like below 200.
Let's try this here maybe.
Alright.
So this looks good while having a
a really good size here of 200 kilobytes.
And so let's download it like this.
Okay?
So hero.webp, and now let's include that here.
But actually let me copy this, comment this one out.
Put this here.
So hero.webp.
So let's see our page.
And indeed, here it is.
Let's try that again.
For some reason, now this bottom part is no longer visible.
Well, anyway, let's just inspect this here.
And yeah, so this is the one that we just created
and here this image looks beautiful, right?
We cannot really see that it has been compressed
but while we reduced the file size in 90%.
However, there is one problem with this.
So we cannot leave it like this and call it a day.
That would be too easy.
So let's come back here to "Can I use"
and let's write WebP here
because that's just another thing that we can
check out how it is supported in browsers.
And so here you can see that safari has partial support.
So you can see that down here, which means
that it is only available on MacOS 11.
On mobile safari, it does actually work, but not on iOS 13,
which was released only two years ago.
And the same for these a little bit older Firefox,
which also is from 2018.
So not all too long ago.
So right now our image will not be displayed
in some browsers, and that is really bad, right?
We don't want that to happen at all.
So there's something we can do about that, fortunately.
And so here, let me show you how
we can use a really nice trick with HTML.
So here, instead of using image, or at least outside
of the image, we will create a picture.
Alright.
And it doesn't need any class,
doesn't need anything really.
And so here we will now define the two
possible images that we have.
So we have our webP hero image
and we also have the compressed PNG that we created before.
So let's define the source element here.
And then with the source set attribute,
so just like this and here,
let's define first the webP, for example.
And then we also tell the browser that this image
is of the type, or that this file is of the type
image webP, because here we could actually
also define videos, for example.
So this is one of them. Let's duplicate it.
And then hero-min.png,
and this one is image/png.
Okay?
And so now what's going to happen is
that a browser will basically select
which of these two images here it can display the best.
So for those browsers who cannot display the WebP
so this one, it will simply then select this one.
But if the browser is able to render WebP,
which is most of the browsers,
then it will choose this one and render it.
Now, where will the browser actually render it?
Well, basically inside of this image
so we still need the image.
So let me cut it from here,
remove all that and then paste it here.
Alright?
So we will still have the class here on this image.
So we are styling the image
and we're also providing the alt text on this image.
But the browser will then basically simply
replace whatever source we have here with one of these two.
Okay?
And here, actually, we want the fallback.
So basically the one that will be displayed in case
that the browser does not understand the source elements
because this is also something a bit newer.
Alright?
So again, here is the fallback, which means basically
the version that all browsers should be able to render.
And so yeah, this is how we can select basically
two different images here and let the browser
decide which one works best.
So let's see.
And indeed everything works beautifully here.
Let's again inspect that.
And so if we now hover over this image source
so you see it says hero-min.png,
but if we hover over it, then you see that
the current source is still hero.WebP.
And so that's exactly what I explained before.
So it's the browser basically only selecting this one
and only downloading this image
and then replacing that source here.
Alright?
And that is how we can use a high performing image format
like WebP to be able to really, really compress down images
while maintaining their quality.
Alright?
And that's of course specially important for big images
like this one who take up a lot of space.
So please don't neglect this part when you're
building your own websites.
So compressing images is really something that you must do
for your users.
Okay.
And with this, I now finally consider our website complete
and finished and ready to be launched to the internet.
And so that's exactly what we're gonna do
in the next lecture.