Original subtitles

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 tell you what I did on some images.

So of 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.

Now, anyway,

the image right now occupies a width of a 187 pixels.

So that's what we can see up here above the image.

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 off the image file itself should always be double

of the size that is actually displayed on the screen, right?

So hopefully you will remember that

and if not, then you can always go back

and check out that parts of the lecture.

So just as a quick summary,

the reason why we need an image that is double the size

that 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 to dead before.

Now, anyway, the actual image size,

we can get it by hovering here over at the image.

And so you'll 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.

All right?

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 with that image we'll ever have.

And so that's, again, these 188 pixels here,

and then I rounded that to 200

and then doubled that to 400.

And then I went ahead and resize the image

to have a width of just 400 pixels.

All right. 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,

the surrendered size here to 350,

which double makes 700.

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, 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 will 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 megabytes, and now it will 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.

All right?

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's 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'll see that it transferred 3.9 megabyte.

And so again, that's way too much.

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.

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'll see that now here,

the image turned black where in the original

it is transparent and the same down here.

So at 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 OxyPNG.

And so that is doing something here.

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 don't 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 as all.

So let's try this one here, reducing the pallette.

And so now indeed, that went down by a lot.

But let's see what debt compression cost us.

So you'll see that here, her face, for example,

is a lot worse than it was before.

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 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.

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.

And then let's just try to replace that here

and see how it looks like.

So that's right here.

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 it doesn't look really good.

So let's increase the quality here just a little bit.

All right. That's still not perfect.

So what if we gave it 100% quality?

Well, that's still not so great.

Let's try lossless, 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 the compression.

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.

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 disbrulled.

Let's try something like this.

So again, finding the right balance here,

it's still not perfect.

All right. But now I'm actually satisfied.

Now I just want to get it like below 200.

Let's try this here, maybe.

All right?

So this looks good while having a really good size here

of 200 kilobytes

and so let's download it like this.

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 well, we reduce 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 mac Os 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 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.

All right?

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 to compress 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 it'll let 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 heromin.PNG.

And this one is image/PNG.

And so now what's going to happen is that the 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 the 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.

All right?

So we will still have to 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, which one of these two.

And here actually, we want to fall back.

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.

All right.

So again, here is the fallback,

which means basically diversion,

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 chores,

so you'll see, is test heromin.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.

All right.

And that is how we can use a high-performing image format

like WebP to be able to

really, really down images while maintaining their quality.

All right?

And that's of course is 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.

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.