Optimize Images

Images are almost always the biggest use of bandwidth. 0:00 Most sites use html, CSS, and JavaScript. 0:03 But images like photos or artwork are regularly five or ten times the size. 0:06 Making careful choices about the number of images you load. 0:11 How they load, their compression, resolution, and 0:15 their file format can all make a big impact on your page load times. 0:18 First, it's best to start designing a website using SVGs wherever possible. 0:22 In other words, anything that isn't a photograph or 0:27 some other type of information dense artwork can be an SVG. 0:31 SVGs are small in file size because they cover large areas of the screen using 0:34 just a few vector points, 0:39 rather than thousands or millions of individual pixels like a JPG or PNG. 0:41 In the workspace for this course, I've included a folder called Assets. 0:45 This folder contains some of pre-made assets that I've created. 0:50 If you need to review how to create SVGs like these. 0:54 Check the notes associated with this video. 0:57 So, inside of this assets folder, you'll see quite a few different files here, 1:01 but specifically we wanna focus on the SVG's. 1:08 Now we have some images in our site here that could easily be SVG's. 1:12 This Twitter and Facebook logo down at the bottom here and 1:18 these images over on the contact page. 1:23 Now, the contact page is a little bit different because we're utilizing 1:27 background images. 1:30 But that's okay we can go ahead and modify our CSS to fix those. 1:31 So let's jump into our workspace and actually use these. 1:36 So down at the bottom here, we have these images that are directly in the HTML. 1:41 So let's just replace the path here. 1:49 So I'll say assets to access the assets folder instead of the image folder. 1:52 You can move these to the image folder if you'd like, but 1:58 I'm just going to change the path. 2:01 And then, I'm going to change the file extension from PNG to SVG. 2:02 So same thing on the Facebook logo here, SVG. 2:09 So we'll save that out, switch back to the browser, and I did this on the index page. 2:15 So if we scroll down here and look at these two icons here, and Refresh, 2:20 it should look almost exactly the same. 2:24 So let's just load up the Chrome def tools, 2:27 just to make sure that we did indeed replace these. 2:30 And it says yup it's an SVG now. 2:33 So now let's go ahead and replace those images on our other pages. 2:37 So I'm just going to copy the entire footer here and 2:44 then I'll open up the About page and Contact page. 2:49 And then I'll just paste the entire footer [SOUND] there. 2:54 And that did change the paths like we want, and then I'll just paste 3:01 the entire footer here, on the About page, and Save that out. 3:05 There we go, so that's replaced. 3:09 So now we need to go to the Contact page and we have some images here but 3:11 they're background images, so they're not actually in the HTML. 3:16 So let's go to our CSS. 3:21 And I believe it's in main.css, so let's scroll down in that file. 3:24 And we've organized this by pages, so it's pretty easy to find what we need here. 3:31 And here are those images. 3:36 So it's accessing the image folder, so again we'll just change this 3:37 to assets [SOUND] and then we just need to change the extension, 3:43 because these are using SVG instead of PNG. 3:48 [SOUND] So lets just copy that extension and paste, and paste. 3:52 And then we'll Save that out. 3:58 And if we switch back and go to the Contact page and Refresh, 4:00 just to make sure we have the new assets. 4:04 It should look almost exactly the same. 4:06 We shouldn't notice, really, any difference. 4:09 So, let me just right-click and hit Inspect Element, to make sure that, 4:12 that is indeed using the background image we want and yep, it's assets/phone.svg. 4:17 So that's good. 4:24 Next anything that can't be made into an SVG, like photographs or 4:25 the artwork we have on the homepage, should be resized and compressed properly. 4:29 If we deliver more pixels than are actually used, 4:34 it's usually just wasted bandwidth. 4:37 The images are being resized to fit their container, and 4:39 then when we click on them we see them at full size. 4:43 However, rather than loading everything in one big page load, 4:46 we should create separate images that are appropriately resized. 4:50 This will make the page load faster. 4:55 And it will only load a full size image if 4:57 the user clicks on one of the smaller images. 5:00 These smaller images are often called Preview images or Thumbnail images. 5:03 So in our assets folder, I've resized all of the images appropriately for us to use, 5:08 but let's walk through an example in Photoshop using one of the original files. 5:14 If you have your own assets that you're working with, you can follow along here. 5:20 So I'm going to switch over to Photoshop, and 5:24 here I have one of the original files that I use to create the images on the site. 5:28 So let's just go back to the site, real quick, and take a look at those. 5:35 And, I'm going to Inspect this element, here. 5:40 And it says its natural resolution is 1024 x 768, but 5:46 it's being resized to a container of 266 x 200. 5:51 So, we want actually twice that resolution for 5:55 Retina screens, so we want 266 times 2. 5:59 So let's go back, here to Photoshop, and 6:03 I want to Save this image for the Web. 6:08 So we'll go to the File menu, and we'll go to Save for 6:12 Web, and this will open up a dialog box. 6:17 We have quite a few options here. 6:21 So like I mentioned before, we want twice that resolution. 6:23 So down here where it says Image Size, I'm going to type 532. 6:28 And that might not hit it perfectly on the height but that's okay, and 6:34 then I'm going to change the preset here. 6:39 Now, I'm gong to try JPEG Medium. 6:41 And, that's going to give me a few good defaults here. 6:45 I'm going to actually check Progressive so that the file downloads 6:51 in multiple passes instead of downloading one line at a time. 6:57 And, this is a slightly different way of loading the file, 7:01 but it will give the appearance of loading faster. 7:05 It will get color to the page quicker, by the time the user 7:08 can actually even focus their eyes on the image, it will probably already be there. 7:12 The Quality adjustment is a place where you can also make some savings. 7:16 I'm going to leave it at about 30% here. 7:21 That doesn't look too good actually, so 7:24 maybe I should bump it up a bit to maybe 50. 7:27 That's a little better and down here in the bottom left, 7:30 I've got a preview of what that file size might be. 7:34 So let's go ahead and with all these settings, hit Save, and 7:38 you can save it to wherever you want and then upload it to your workspace, 7:43 if you're working with your own assets. 7:48 I'm not actually going to save this because in our 7:51 workspace I already have those files. 7:56 So let me close this out [SOUND]. 7:59 And I will go back to my workspace here. 8:03 And here you can see I have those preview images. 8:06 So let me go to index.html and we need to be careful 8:09 about which image we're actually changing here. 8:14 In the hyper link is the full size image, so 8:19 that is where the browser will go when somebody actually clicks. 8:23 However, there is an image inside of that and the hyperlink is wrapping it, 8:28 and that's where we want our preview image. 8:34 So it's on the actual image, not on the hyperlink. 8:37 So, once again let's just change the path here. 8:41 We'll change it to <mg src="assests/number-01-preview.jpg" 8:44 alt="">. 8:50 So, I'm just going to copy that dash preview all the way down and 8:51 then we'll copy the new folder. 8:57 [SOUND] all the way down [SOUND] and 9:01 again when you're doing this just be 9:04 careful not to change the wrong file [SOUND]. 9:08 So we'll save that out, and when we go back here and Refresh, 9:13 we shouldn't notice anything all that different, 9:17 and that's because we were loading in more pixels than we actually needed. 9:21 So let's Inspect one of these elements and 9:25 here we can see it is 266 x 200. 9:30 But the natural size is 532 x 399, so 9:35 we actually are delivering those smaller resized images. 9:39 So finally, let's look at the Network tab and 9:45 see if we made any performance improvements here. 9:48 So, we'll go to the Network tab, and Refresh the page. 9:52 And you can see we're still at 19 requests but we dramatically cut the file size. 9:56 We started at around 819 kilobytes, 10:03 I think and, now we're down to 212 kilobytes transferred. 10:06 And you'll notice that the transfer times are also faster, 10:10 we've never seen anything under 300 here. 10:14 So, now it's at 237 milliseconds. 10:16 Let's just Refresh a couple more times. 10:19 Just to kinda get an idea of what the page load times are like, and 10:21 pretty consistently it's generally at about 300 or under. 10:26 So pretty good, looks like we made an improvement here 10:31