All right.
My friends in this lecture we're gonna go ahead and do some problem solving together like we have for
a while now.
We're going to go ahead and optimize our image loading speed because we are not looking so impressive
right now by the test we just did.
So as you can see if you scroll down below we get some a couple of recommendations going on here.
We have in the performance section we have the optimizing images eliminating render blocking reduced
server response time leverage browser caching and then one at Mobile usability sidestep targets appropriately.
Now we're going to go through them but we're going to do it step by step.
So let's start with this one optimizing images.
So if I click care it's actually going to tell me about approximately how much space I could save if
I was just a tad bit smarter.
And also which of the images that are actually causing problems so we can see for example we have the
digital marketing seven courses in one image is actually it could be reduced by 97 percent.
That's huge.
And also we have the Amazon that can be reduced by 97 percent.
We have the shopify image 97 percent.
And these are all these images that we have just put up right now.
They're taking a huge amount of space needlessly.
Now we also have other images like it says there's sky people and person and these are actually the
background images that I just decided not to name.
But I remember the names of them.
So these are the background images that could be optimized just as well.
And then finally we have the cropped image edit and this is actually the name of our logo.
But as you can see this is only going to say it was four point nine kilobytes.
So I'm not going to bother with optimizing this one but everything above where we're going to go ahead
and optimize each and every one of them and then run a new test and get it this size down right.
Because this is way too big.
We want to be under one megabyte and definitely below two seconds for the loading time.
So let's go ahead and go to our home page and if you are here and you want to start editing with elementary
or we need to do is click on edit with Elementary.
So what we're going to do now is that we're going to start optimizing all of these images we're using
and we're talking this background picture this background all of these three and this background image.
Right.
And we are going to do that by putting them all into a folder so that we know where we have them.
And then we're going to go to this Web site called Image compress or dot com.
Also known as optimized seal her I love that name.
So this is of course in the resources.
Now all we're going to go ahead and do here is click on upload files like this.
And then we are going to go to all of our images select them and click on choose.
So it's actually a really handy process and now it's going to start compressing the images for us in
this second.
But the beautiful thing here is actually that we can customize our own compression right.
So for example we have Amazon right now that's selected in here.
And if I scroll down I can see the way the original looks and the way it looks while it is compressed.
I can also see how many percent I'm saving what the new sizes.
But here is the interesting thing here.
I can see the amount of colors being used right now.
And also notice that there's not a lot of colors going on right now.
So what I'm gonna do is actually pull this down to say let's do 80 colors and we can tell that there
is no difference whatsoever in the images but there is a difference in this size.
So I'm going to continue.
Let's move down to 70.
Right.
And there is still no noticeable equality really that's changing here.
So I'm gonna go down even further let's go down to say 55 I'm pushing the limits slightly here.
Let's do 53 and it's still looking fine.
Gonna go even further let's do 40.
Okay so I have actually compressed this big time right now even if I assume there's still no noticeable
loss of quality I'm gonna go really crazy actually and go with 20 and it's still looking okay but if
I sue me and there's you know as we can see the white is actually starting to suffer a little bit I'm
gonna move up to save 40 and we get a nicer white there so I'm gonna stick with this one with the 40
colors because this is just gonna be a thumbnail size anyhow so I'm gonna click on Apply.
So we're just gone from sixty eight to seventy six percent compression really good.
Now this is just a thumbnail so you can get away with more coal it is suffering here but this one is
a super important image because this is our background image so we need to be a little bit more careful
here.
So we have the quality right now and just to show you what happens if you go too far.
If I would pull this down to say you know let's go with thirty five.
You can see that there's quite a decently noticeable lack of quality going on in here now especially
if I sue me mean it gets more prevalent and because this is a bit more sensitive of a case because there's
going to be a big background image we don't want to go too far here like you can see it's all blurry
in the background here.
Let's try out 60 and see what happens.
So six is looking pretty good I'm going to sue me and you can see that there's definitely a little bit
of loss of quality if I assume in like this but I am actually going to go and increase it to sixty five
I think this is looking really nice.
So what you want to do you can also see there's a little bit of the colors fading out so I'm gonna go
to 70 here.
So what do you want to do here is just keep an eye on the quality make sure that the loss isn't too
big right.
Especially on these important images.
We're going to go ahead and apply them and we're gonna do this for all of the images and then we're
gonna make sure we're going to upload them on our home page and have a look so that there is no noticeable
suffering of quality of course we don't want to sacrifice actual image quality noticeable quality in
order to get better loadings speed there's gonna be this nice balance but we want to get under one megabyte
in size so I'm gonna continue optimizing these images let's pull this down to about let's say 65 and
then soon in we can see that there is a definitely a change of qualities I'm gonna go with seventy on
these ones and then I'm going to apply and we're gonna see what kind of results these yields.
Now you can for example see we've gone from 250 to kilobytes to 71 kilobytes This is huge huge huge
difference.
So we're saving a ton of size here now if we would ever go too far which we're going to notice when
we're uploading all we need to really do is go back your upload the original and then be kinder on the
compression itself.
So I'm gonna go down to 70 on this one as well.
There we go.
I'm gonna head apply.
This is a thumbnail so I don't have to be quite as sensitive.
Let's go with and checkouts.
Fifty nine.
You can see that there's some quality is suffering right there.
But once again this is going to be a thumbnail.
I believe this will be fine.
I'm going to go ahead and use this from five hundred and one kilobytes to one hundred and sixteen.
That's huge.
And finally I'm gonna do it on Shopify and this is also a very simple image.
Even though there's more going on in the background so I'm gonna scroll down and let's do 60.
There we go and I'm gonna just hit the play here.
So now when I am all done I have applied it on everyone and we can see that there's no real noticeable
quality loss.
Nothing big I'm gonna download all of these by simply clicking on download all and then I'm gonna go
ahead and extract them.
So here are all of the images right now that I just used and here is the image compressor it is a sip
file I'm just gonna double click on it and here I get the new files it's just in this folder called
Image compressor.
Right.
So this is really really good.
Now we're gonna go ahead and go to the website.
We're gonna re upload all of these and then we're gonna run a new test and see the results.
OK.
So let's start with the background picture.
I'm going to click up here.
We're gonna edit the section move over to style and then we have the image right here.
I'm gonna move over to upload file.
I'm gonna go to select image compressor it's right in here and then we're gonna use this sky image again
and we can see that the size is now 134.
And remember we still have smushed that is compressing the files for us so as to upload it in section
one hundred and thirty one it applies a slight compression to that but look at this comparison we have
one hundred and thirty one kilobytes here and the previous even with Smush compressed was four hundred
and twenty two is a huge difference guys and that is because we're using the lossy compression right
which Smush we can only use lossless compression unless we buy that plug in and of course if you want
to make your life a little bit faster and easier you can buy smushed the premium but honestly it's not
that big of a bother to use this to I think it works superb.
So this looks really nice I'm going to go ahead and click on insert media and here we have it.
So let me go ahead and click on preview changes here and here we have it then as you can see there is
no big difference in quality.
So if I had just to show you the difference between them I'm gonna go ahead and compare them side by
side.
So if I open these two up this is the original image.
Right.
This is the one that was 422 kilobytes and then this one is the one that is almost four times smaller
in size as you can sell.
If we look at the shadow down here while I'm jumping in between them there is a slight difference in
color and ever so slight difference in color and you can notice these as well when you are looking at
the background right.
But there is no big deal going on here.
This is well worth saving all of the size saving all of the loading time.
So basically even though we're using a lossy it's basically no loss of actual quality so let's continue
optimizing.
I'm gonna go ahead and gonna scroll down to here click on editing this section.
Move over to style.
Gonna go down too immature.
Click on the image and I'm going to upload files select and then I'm gonna click on the image with the
girls sitting here now.
This is 76 kilobytes.
And if you have a look on the previews this is two hundred and ninety three.
So this is a huge huge huge difference.
Now my math is too bad to give you a proper calculation how much better it is but there's a big big
difference going on right.
So from two hundred and ninety three to seventy falling and I click on insert media here and there we
have it.
There is no noticeable loss of quality going on here either.
Now I'm gonna go ahead and I'm going to upload them all and then we're gonna check the page out right.
So I'm gonna do the same up here go to section go to style I'm going to click on the image here upload
files select images click on choose.
So this is 7 to 1 killer by the previous was two hundred and fifty two huge difference.
Click on insert media.
There we go.
Now I'm gonna go ahead and change these ones as well so I'm just gonna click here and then I'm gonna
click on this image and then upload select files and then I'm gonna upload the correct one and choose
the insert media.
I'm going to continue doing this on all of them.
All right so I have just changed all of these three asked one now there's one more thing that's super
important for you to know about that.
I did not do when I was using these images earlier and that is if you click on the image here you can
see that I'm using the full image size.
There is no reason to do that whatsoever because we are compressing it to such a small size.
So when we were looking at the test and it said that you can save up towards and have a 97 percent reduction
what it meant by that is that I can actually instead of using a full image that takes a lot of size
and space I can just go ahead and click on medium for example and there is no loss of quality whatsoever
because I'm actually having this small size but is is cropping itself by using this feature so it automatically
gets even smaller.
Now you're gonna notice if you go too far because if I use the thumbnail here for example you can see
that that just ruin the image right.
But if I used the medium 300 times 300 or medium large or I used a large you can tell that the only
real difference is the loading time because the quality is pretty much the same.
So I'm gonna go with medium 300 times 300 because that is all that we need.
Same here.
Medium 300.
Same here.
Medium 300 times 300 and now we've updated everything.
I'm gonna go ahead and click on update right here and now I'm gonna go down and click on preview changes
and we're gonna see how the website looks.
And as you can see Did you see that loading time.
That was a big big difference guys like we just ended up here like that and I'm loving this and if you
scroll down you can see that there is no real loss of quality actually.
This image might be having a little bit lots of quality but not too bad in my opinion.
Scrolling down this has no noticeable loss of quality.
So the only thing that you might want to do would be to increase the quality of this image because here
it is a bit more noticeable but this one has no noticeable loss of quality whatsoever going on so I
am super happy with the results of this but what we're gonna go ahead and do now is run a new speed
test and compare the results.
So I'm going to open a new tab go to uptime dot com free tools speed test.
And now I'm just gonna write in our website
and then start testing.
All right guys.
So the results are in.
And as we can see there is quite a difference in the results right now.
So the previous results we were looking something like this we're looking at a loading time at four
point two seconds.
Now we're looking at a loading time at two point three seconds that is almost half still too much but
drastically different.
Right now if we're looking at the total size it's actually one point one megabyte.
That is a massive difference from two point seven.
Now in my opinion one point one megabyte is still a bit too much because I want to be below 1 megabyte.
So what I am going to do is actually put these through the compression a couple of them for example
I'm going to compress this further while also compressing this a little bit further while actually maybe
increasing the quality of this one and then I'm gonna run a test again and make sure that I am below
one megabyte.
OK.
But this is how you optimize your images.
Make sure that your website loads much faster but there is still more issues going on.
Right.
So if we look down We can see that we have the eliminated renderer blocking that is up next.
And we're going to go through that in the next lecture.
So if I now go ahead and go down to optimize images we're going to be able to see what the issue is
because apparently we can save a lot of space still and if we're saving this much we're going to go
down quite drastically on the total size.
So as we can see we can still have a huge reduction in the digital marketing the Amazon logo and the
shopify logo.
Right.
We're not going to bother about this one because it saves so little.
But here we could actually save over 100 over 100 and over two hundred.
So what I am noticing here is that these are actual P and Gs.
Right.
So what I'm gonna go ahead and do before we move on to eliminate render blocking is that I am going
to go ahead and show you in the next lecture how you can turn P and G images to JP in order to save
a lot of size.
And we're going to go well below the 1 megabyte.
OK.
So if you already know how to do this and you're fun with the image optimization you can move on to
the next lecture.
But if you do have P G force you need to resize down even further to get below this then join me and
follow me in the next lecture and we're gonna take care of this size problem.
Casey in the next lecture.
Guys.