WEBVTT 00:00.180 --> 00:00.860 All right. 00:00.870 --> 00:07.680 In this lecture we're gonna go ahead and convert our P and G files into j peg. 00:07.680 --> 00:14.190 Now if we scroll down we noticed at the optimised images here that there is a lot of size to be reduced 00:14.190 --> 00:14.460 still. 00:14.460 --> 00:22.140 Now we're not going to earn in this much reduction because we are not using the full size of these thumbnails. 00:22.140 --> 00:22.920 Right. 00:22.920 --> 00:25.500 Remember these are full scale when they're uploaded. 00:25.560 --> 00:30.180 By the way that we are using them for our products or for our courses. 00:30.330 --> 00:33.630 We actually make them 300 by 300. 00:33.630 --> 00:39.330 But needless to say there is still a lot of space that we can save so we're gonna go ahead and turn 00:39.570 --> 00:46.130 our P and G files which are these three files into J pack because usually that can even make the size 00:46.140 --> 00:47.010 about half. 00:47.010 --> 00:51.960 So we really need that at this point because we want to go under one megabyte. 00:51.960 --> 00:58.080 So I'm gonna go ahead and go to the P G to j peg dot com side. 00:58.080 --> 01:04.290 This is in the resources of course and I'm gonna click on upload files and then I'm gonna choose my 01:04.290 --> 01:11.070 file which is the Amazon the digital and the shopify ones click on choose and then I'm just gonna go 01:11.070 --> 01:13.410 ahead and click on and download all. 01:13.690 --> 01:18.630 Okay so I have added in the CIP file I'm just going to double click on it like that. 01:18.630 --> 01:19.480 There we go. 01:19.500 --> 01:27.570 And now I can remove the zip file and I'm gonna go ahead and grab these images put it in the same folder 01:27.630 --> 01:29.670 down below here. 01:29.830 --> 01:35.790 I'm gonna remove this folder and I am actually going to go ahead and remove these p n g images right 01:35.790 --> 01:39.820 now because we don't need them here we have our new J. 01:39.820 --> 01:45.690 Pagan if you have a look at them for example this one and this one I'm just gonna open them up you can 01:45.690 --> 01:49.920 see that there is literally no loss of quality what so ever. 01:49.920 --> 01:55.380 Now the only thing I'm noticing is actually there's some sort of difference if you look super closely 01:55.620 --> 02:01.410 at the gold on the chip back there seems like something is going on when I'm changing so this is an 02:01.410 --> 02:06.470 extreme minor especially considering we're gonna use this as 300 by 300. 02:06.870 --> 02:07.940 So we don't need them. 02:08.040 --> 02:13.460 We're gonna go ahead and remove the P and G ones Amazon and there we go. 02:13.590 --> 02:14.430 They're gone. 02:14.430 --> 02:19.740 Now I'm actually gonna put these through the compression once again because with the j peg we notice 02:19.740 --> 02:25.020 that we can press them down even further in size so we're gonna go ahead and do that right now. 02:25.020 --> 02:31.200 So I'm gonna go back to the image compressor or optimize Scylla as it also known as I love that name. 02:31.690 --> 02:38.760 And I can upload files right here and then I'm gonna choose these which are now in j peg there and then 02:38.760 --> 02:39.720 the shopify one. 02:39.780 --> 02:40.240 Okay. 02:40.250 --> 02:46.390 And then click on choose I'm going to scroll down and now we can lower the quality quite a bit already 02:46.390 --> 02:53.760 so I'm gonna just try it out maybe click it on 25 we can see that there clearly is a loss of quality 02:53.790 --> 03:00.990 but we have to remember this is gonna be 300 by 300 so there's gonna be a very very little change to 03:00.990 --> 03:01.350 this. 03:01.650 --> 03:08.010 So I am at twenty five and you can see the original turned down to 52 which is a huge difference I believe 03:08.010 --> 03:10.190 the preview was at around 100. 03:10.320 --> 03:16.110 So we have really lowered the size by making this into a JPEG and quality 25. 03:16.110 --> 03:20.710 Now again you can actually see that there is a lot of quality going on. 03:20.700 --> 03:25.460 There's no doubt about that but we're going to use this as a thumbnail. 03:25.460 --> 03:28.430 So I believe that this will be just fine. 03:28.440 --> 03:34.110 I'm actually gonna use this 25 click and apply going to do the same thing here we're gonna move it down 03:34.110 --> 03:36.480 to 25 and see what happens. 03:36.570 --> 03:42.480 Yes there's a loss of quality here as well but I'm gonna apply this because they will be so small. 03:42.480 --> 03:48.930 Same thing here click on Apply and if it's just too bad if it's not working out Daniel's pool in the 03:48.930 --> 03:55.520 original once again and redo the process now I'm gonna click on download all here's the zip file I'm 03:55.550 --> 04:01.650 gonna double click on this CIP file right here and then we have the image compression right. 04:01.650 --> 04:03.170 Can I remove this one. 04:03.330 --> 04:07.610 I'm gonna pull these ones out put them in. 04:07.610 --> 04:08.160 Let's put it in. 04:08.160 --> 04:14.820 Down below here and I don't want to mix these up so I'm just gonna give them a new name quickly. 04:14.910 --> 04:15.330 All right. 04:15.330 --> 04:16.910 So now they all have a new name. 04:16.920 --> 04:18.180 That's really nice. 04:18.180 --> 04:21.260 I'm gonna go ahead and go back to the website. 04:21.450 --> 04:26.170 I'm gonna go to our home here and I'm going to click on edit with Eliminator now. 04:26.250 --> 04:32.130 Should also let you know that I took the liberty to use the previous background pictures and actually 04:32.130 --> 04:34.040 compress them a little bit further. 04:34.140 --> 04:37.220 I believe that I used in the beginning 70 or 75. 04:37.230 --> 04:42.960 Now I went down and compressed them to 60 and still comparing the original with the compress which you 04:42.960 --> 04:44.150 can always do. 04:44.380 --> 04:48.180 There's still no loss of quality in any one of the pictures. 04:48.180 --> 04:52.230 Not even actually this background that I thought had a loss it did not. 04:52.230 --> 04:53.940 So that's great news. 04:54.330 --> 05:00.570 So we're gonna go ahead and I'm going to click on this one in here and then click here click on upload 05:00.570 --> 05:02.650 files select files. 05:02.640 --> 05:06.630 Gonna be a little bit easier to find now because it has a new name right. 05:06.630 --> 05:13.590 So now this one is actually 26 kilobytes that's super tiny and we can see that compress with Smush which 05:13.650 --> 05:21.300 happens automatically it becomes 25 kilobytes and we can see the previous one I had a hundred and sixteen 05:21.300 --> 05:23.480 right because it was a P and G. 05:23.480 --> 05:29.280 So we have saved a lot of size by doing these guys a lot of size so I'm gonna go ahead and click on 05:29.280 --> 05:35.670 insert media and as you can tell there's no loss of quality because it is so tiny I'm going to do the 05:35.670 --> 05:43.500 very same thing here click on it upload file select file I'm gonna go to the shopify JPEG compressed 05:43.680 --> 05:51.780 now this one is well it might become eleven nope it's still 12 and the previous one was 82 so huge difference 05:51.870 --> 05:59.430 in size going on here and I'm gonna do the same one with this Amazon which is the last one upload find 05:59.430 --> 06:04.770 the JPEG compress which is fourteen might become thirteen this is like a gamble you know just guessing 06:04.770 --> 06:05.490 like this. 06:05.490 --> 06:12.120 No it's still fourteen the previous one was seventy five huge size difference now fourteen seventy five 06:12.120 --> 06:18.300 they're not big amounts but this kind of managing on a lot of images that's gonna save you a lot of 06:18.300 --> 06:24.180 space if you think fourteen to seventy five now my math is not that impressive but I think that's saving 06:24.180 --> 06:29.160 like four times or five times the size is a huge difference in that sense. 06:29.160 --> 06:33.680 So as we can see there's no actual invisible loss of quality because they are so small. 06:33.720 --> 06:36.040 I'm gonna go ahead and click on updates. 06:36.330 --> 06:37.940 So this was our results. 06:37.950 --> 06:42.750 The first time we did the test then we redid the test we had one point one megabyte. 06:42.780 --> 06:47.960 Now we're gonna do the test one more time and compare it to the last one when we have optimized the 06:47.970 --> 06:49.800 P G to J Peg. 06:50.160 --> 06:56.940 I'm gonna go to uptime click on free tools go to speed test and I'm gonna write in our website 07:00.810 --> 07:07.020 then start testing and remember we are mainly looking at the size right now and check this out guys 07:07.020 --> 07:12.370 really really good news this size is absolutely incredible. 07:12.420 --> 07:20.250 So we have now gone down to four hundred and sixty five killer bites while in before we were actually 07:20.250 --> 07:22.470 at one point one megabyte. 07:22.470 --> 07:28.010 So we did have a big reduction after all from turning them from P and G to j peg. 07:28.200 --> 07:30.570 Even with the compression and everything going on. 07:30.570 --> 07:38.400 So this saved us up a lot of space and we have optimize our entire front page right now and look at 07:38.400 --> 07:42.090 the loading speed we're actually loading at one second. 07:42.210 --> 07:44.450 That is half of the two second rule. 07:44.470 --> 07:47.250 Now there's still a lot of good stuff to be done. 07:47.250 --> 07:52.200 For example we still want to eliminate the render blocking javascript which we're gonna do in the next 07:52.500 --> 07:53.050 lecture. 07:53.070 --> 08:00.600 But even if we only did this right now we had a loading speed of one second and a total site of below 08:00.720 --> 08:07.470 zero point five megabyte then that would be incredible once again looking at particular and his is bigger 08:07.650 --> 08:10.080 but there is also more stuff on his website. 08:10.080 --> 08:12.990 But this this is beyond incredible. 08:12.990 --> 08:17.970 So even though he has a bigger size is still loading faster and that is because he has less requests 08:18.300 --> 08:23.190 and he has taken good care of his website and we are doing the same thing. 08:23.220 --> 08:26.750 So we're going to continue and further optimize our website. 08:26.780 --> 08:33.660 But we managed to get the total size down by optimizing our images and by looking at your own right 08:33.690 --> 08:39.660 now you might still have this one choices optimize images because there's still some work should we 08:39.660 --> 08:44.750 wanted to be done for example we still have the the logo that we could comparison. 08:44.850 --> 08:51.640 Interestingly it's still seeing that we can be saving some space on these images right on the people 08:51.640 --> 08:57.930 the images even though it is so small it says we could be saving space on the digital on the Amazon 08:57.960 --> 09:03.620 and on the shopify and that may be true we could probably compressed it further and further and further. 09:03.690 --> 09:07.650 But honestly this is a really really good size. 09:07.650 --> 09:13.430 Like I told you earlier on if you could get at zero point five megabyte that is going to be incredible. 09:13.430 --> 09:19.770 This might be hard to keep if you continue to expand and add more things to your home page but it's 09:19.770 --> 09:21.890 still a really really good size. 09:21.890 --> 09:28.740 You want to be below 1 megabyte if you can go to zero point five megabyte that is incredible and you 09:28.740 --> 09:33.900 don't want to go crazy on this either remember is all about the balance between the user interface and 09:33.900 --> 09:40.110 the user experience and I think right now we have compressed them more than enough and I'm super happy. 09:40.140 --> 09:41.550 So two things to remember. 09:41.560 --> 09:46.360 1 turn your opinion GS 2 j peg and to compress them all. 09:46.440 --> 09:47.490 If you have smushed. 09:47.580 --> 09:49.020 This is gonna be easy smush. 09:49.020 --> 09:53.860 The premium version that is but if you don't you might as well just use the tools and the resources 09:54.150 --> 09:57.850 take takes a little bit more time but it is completely free. 09:57.930 --> 10:01.620 So let's move on and solve the next problem see in the next lecture guys.