Image Optimization and Saving For Web7:18 with Ashley Burke
Prepare and Export your graphics for web with a focus on Raster Graphics.
Google Developers on Image Optimization, Ilya Grigorik Published: May 07, 2014
Now, what we wanna do is prepare our site and export for web. 0:00 Image optimization is important because when you are loading websites into your 0:05 browser, images often take up the most space, by far. 0:09 It can greatly effect your page load time. 0:13 Often too, these images take up the most screen real estate on your website. 0:16 So, it's important that they look crisp and are high quality. 0:21 That's what image optimization is all about, finding the balance between 0:25 keeping the file size small while still having a high quality image. 0:29 Different file types are sometimes better for 0:35 different images depending on their unique properties. 0:37 We want to export a few images. 0:41 We're gonna start with our mobile artboard because most of this is gonna be 0:43 replicated in CSS. 0:46 We only need to save specific parts of the document. 0:47 In this case, we're gonna isolate our raster images. 0:53 So let's start here on the mobile side. 0:59 And we're going to be using the Slice Tool, 1:02 Shift + K, and we will just begin to draw boxes. 1:07 Around our images, and 1:16 this can be a little tricky cuz you have to line it up exactly. 1:18 And you wanna be careful that everything is right on. 1:23 You can see I'm off on all sides here. 1:27 [LAUGH] So it's better to zoom in. 1:29 With the Selection tool, you can adjust your slices. 1:32 Here we are. 1:40 So that's how that works. 1:42 We can have as many slices as we like. 1:44 What it's doing is it's cutting your image in to pieces. 1:49 Sort of reminiscent of tables. 1:53 It's what it used to be for. 1:59 [SOUND] 2:01 Okay. 2:04 And we'll do one more. 2:09 Not like that. 2:11 And you may have already saved this out of Photoshop and 2:18 you wouldn't need to do this. 2:20 This is just a way to do it. 2:22 We are going to, I am gonna show you another way to export images later on. 2:24 So there are multiple ways to export raster graphics out of Illustrator. 2:29 So now that we have our slices selected here. 2:35 Or created, I guess I should say. 2:38 We'll go to File, Save for Web, And this brings up our Save for Web dialog box. 2:41 It's showing us the Optimized. 2:49 We wanna choose 2-Up. 2:52 So on our left-hand side, this is the original file. 2:56 It tells you the original file size, here. 2:59 And then on the right-hand side, this is the optimized version. 3:03 We’re only going to be saving the selected slices. 3:09 So I wanna make sure that I'm selecting all of my images at one time. 3:13 One, two, three. 3:19 So what's nice is, 3:21 we're gonna be able to save all of these images out at one time, as well. 3:23 So with these selected, let's go over here on our right hand side, 3:30 and look at the different presets we have. 3:34 So I'm gonna start with a GIF. 3:39 And you can see, as I zoom in, 3:42 that the GIF file is not really handling this image very well. 3:45 GIFs are good for simple graphics with areas of solid color. 3:51 Like icons, logos or decorative elements. 3:55 So something like these. 3:58 This would be good for a GIF actually, that's a good example. 4:00 Not so much a photograph. 4:03 GIFs do support, they have one transparent color. 4:06 So if you needed a transparent color and it did not have a drop shadow. 4:10 A GIF might be a good solution, GIFs are also good for animation. 4:15 I'm gonna try a PNG-8. 4:22 That didn't change it very much. 4:25 And can also see in the optimized window it is telling us the file size here. 4:27 PNGs, we'll try PNG 24 as well. 4:35 Oh yeah, see that's looking better. 4:39 Wow, look at that jump in file size. 4:41 It went from 4:44 289.5 in the PNG 8, to 860 in PNG 24. 4:47 PNGs support a drop shadow, so they are becoming more and more common. 4:56 You will also notice a difference, we have many more colors in PNG-24 5:01 vs PNG-8, and the extra colors make a big difference. 5:06 It's the easiest way to get your file size smaller is to have fewer colors. 5:11 So if we go to JPEG. 5:18 JPEG is the most commonly used format for photographs like this one, 5:20 and we can adjust the quality here. 5:25 We have low, which you can see. 5:28 We're losing a lot of information so that's way too much. 5:31 [LAUGH] Medium. 5:34 It's still not great. 5:36 High. 5:38 That might do it. 5:40 You can see our file size is a really nice small size down here. 5:42 It's much better. 5:47 The JPEG is the clear winner in quality and file size. 5:50 And typically, JPEGs can achieve ten to one compression with little 5:54 perceptible loss in image quality, so that's always a good go-to. 5:59 And remember that for export, we're not exporting all slices. 6:04 We're gonna be exporting selected slices. 6:10 And we selected just the images, so that's all we want. 6:13 We'll hit Save. 6:17 I save it to my Desktop. 6:20 Let's go and take a look. 6:23 And what it's done here is it has saved it in my Image folder. 6:31 This is my finished mock-up. 6:35 And it has numbered them for me as well. 6:36 So here we go. 6:39 This is 46 kilobytes, 36 kilobytes, and 42 kilobytes. 6:42 So it was adding it all together 6:48 in that optimized window to tell me the full size of all of those. 6:51 These are my images from earlier. 6:58 These are the ones that we just created. 7:00 You can see how fast that was. 7:03 I mean it does take a little time to adjust to your sizes. 7:05 But once you've done that, it's pretty straight forward exporting it out. 7:08 And that's it for now. 7:12 Next we're going to talk about how to save out the SPGs. 7:13
You need to sign up for Treehouse in order to download course files.Sign up