1 00:00:00,530 --> 00:00:04,570 Now, what we wanna do is prepare our site and export for web. 2 00:00:05,650 --> 00:00:09,510 Image optimization is important because when you are loading websites into your 3 00:00:09,510 --> 00:00:13,530 browser, images often take up the most space, by far. 4 00:00:13,530 --> 00:00:15,640 It can greatly effect your page load time. 5 00:00:16,970 --> 00:00:21,090 Often too, these images take up the most screen real estate on your website. 6 00:00:21,090 --> 00:00:24,200 So, it's important that they look crisp and are high quality. 7 00:00:25,770 --> 00:00:29,900 That's what image optimization is all about, finding the balance between 8 00:00:29,900 --> 00:00:33,890 keeping the file size small while still having a high quality image. 9 00:00:35,000 --> 00:00:37,160 Different file types are sometimes better for 10 00:00:37,160 --> 00:00:40,240 different images depending on their unique properties. 11 00:00:41,420 --> 00:00:43,442 We want to export a few images. 12 00:00:43,442 --> 00:00:46,655 We're gonna start with our mobile artboard because most of this is gonna be 13 00:00:46,655 --> 00:00:47,530 replicated in CSS. 14 00:00:47,530 --> 00:00:53,462 We only need to save specific parts of the document. 15 00:00:53,462 --> 00:00:56,674 In this case, we're gonna isolate our raster images. 16 00:00:59,674 --> 00:01:02,570 So let's start here on the mobile side. 17 00:01:02,570 --> 00:01:07,486 And we're going to be using the Slice Tool, 18 00:01:07,486 --> 00:01:14,790 Shift + K, and we will just begin to draw boxes. 19 00:01:16,330 --> 00:01:18,340 Around our images, and 20 00:01:18,340 --> 00:01:21,700 this can be a little tricky cuz you have to line it up exactly. 21 00:01:23,280 --> 00:01:27,180 And you wanna be careful that everything is right on. 22 00:01:27,180 --> 00:01:29,395 You can see I'm off on all sides here. 23 00:01:29,395 --> 00:01:32,250 [LAUGH] So it's better to zoom in. 24 00:01:32,250 --> 00:01:36,175 With the Selection tool, you can adjust your slices. 25 00:01:40,436 --> 00:01:41,160 Here we are. 26 00:01:42,170 --> 00:01:44,180 So that's how that works. 27 00:01:44,180 --> 00:01:49,600 We can have as many slices as we like. 28 00:01:49,600 --> 00:01:52,770 What it's doing is it's cutting your image in to pieces. 29 00:01:53,970 --> 00:01:55,624 Sort of reminiscent of tables. 30 00:01:59,889 --> 00:02:01,459 It's what it used to be for. 31 00:02:01,459 --> 00:02:04,983 [SOUND] 32 00:02:04,983 --> 00:02:09,212 Okay. 33 00:02:09,212 --> 00:02:11,555 And we'll do one more. 34 00:02:11,555 --> 00:02:12,224 Not like that. 35 00:02:18,100 --> 00:02:20,790 And you may have already saved this out of Photoshop and 36 00:02:20,790 --> 00:02:22,620 you wouldn't need to do this. 37 00:02:22,620 --> 00:02:24,030 This is just a way to do it. 38 00:02:24,030 --> 00:02:29,620 We are going to, I am gonna show you another way to export images later on. 39 00:02:29,620 --> 00:02:34,120 So there are multiple ways to export raster graphics out of Illustrator. 40 00:02:35,570 --> 00:02:38,750 So now that we have our slices selected here. 41 00:02:38,750 --> 00:02:41,719 Or created, I guess I should say. 42 00:02:41,719 --> 00:02:49,900 We'll go to File, Save for Web, And this brings up our Save for Web dialog box. 43 00:02:49,900 --> 00:02:52,050 It's showing us the Optimized. 44 00:02:52,050 --> 00:02:54,274 We wanna choose 2-Up. 45 00:02:56,360 --> 00:02:59,470 So on our left-hand side, this is the original file. 46 00:02:59,470 --> 00:03:03,310 It tells you the original file size, here. 47 00:03:03,310 --> 00:03:07,440 And then on the right-hand side, this is the optimized version. 48 00:03:09,230 --> 00:03:13,400 We’re only going to be saving the selected slices. 49 00:03:13,400 --> 00:03:19,431 So I wanna make sure that I'm selecting all of my images at one time. 50 00:03:19,431 --> 00:03:21,756 One, two, three. 51 00:03:21,756 --> 00:03:23,255 So what's nice is, 52 00:03:23,255 --> 00:03:28,650 we're gonna be able to save all of these images out at one time, as well. 53 00:03:30,410 --> 00:03:34,780 So with these selected, let's go over here on our right hand side, 54 00:03:34,780 --> 00:03:39,260 and look at the different presets we have. 55 00:03:39,260 --> 00:03:41,090 So I'm gonna start with a GIF. 56 00:03:42,650 --> 00:03:45,710 And you can see, as I zoom in, 57 00:03:45,710 --> 00:03:51,690 that the GIF file is not really handling this image very well. 58 00:03:51,690 --> 00:03:55,480 GIFs are good for simple graphics with areas of solid color. 59 00:03:55,480 --> 00:03:58,750 Like icons, logos or decorative elements. 60 00:03:58,750 --> 00:04:00,000 So something like these. 61 00:04:00,000 --> 00:04:03,070 This would be good for a GIF actually, that's a good example. 62 00:04:03,070 --> 00:04:04,830 Not so much a photograph. 63 00:04:06,110 --> 00:04:10,550 GIFs do support, they have one transparent color. 64 00:04:10,550 --> 00:04:15,160 So if you needed a transparent color and it did not have a drop shadow. 65 00:04:15,160 --> 00:04:19,883 A GIF might be a good solution, GIFs are also good for animation. 66 00:04:22,099 --> 00:04:25,469 I'm gonna try a PNG-8. 67 00:04:25,469 --> 00:04:27,750 That didn't change it very much. 68 00:04:27,750 --> 00:04:32,670 And can also see in the optimized window it is telling us the file size here. 69 00:04:35,430 --> 00:04:38,140 PNGs, we'll try PNG 24 as well. 70 00:04:39,500 --> 00:04:41,130 Oh yeah, see that's looking better. 71 00:04:41,130 --> 00:04:44,164 Wow, look at that jump in file size. 72 00:04:44,164 --> 00:04:47,791 It went from 73 00:04:47,791 --> 00:04:54,404 289.5 in the PNG 8, to 860 in PNG 24. 74 00:04:56,310 --> 00:05:01,460 PNGs support a drop shadow, so they are becoming more and more common. 75 00:05:01,460 --> 00:05:06,669 You will also notice a difference, we have many more colors in PNG-24 76 00:05:06,669 --> 00:05:11,280 vs PNG-8, and the extra colors make a big difference. 77 00:05:11,280 --> 00:05:16,430 It's the easiest way to get your file size smaller is to have fewer colors. 78 00:05:18,000 --> 00:05:20,892 So if we go to JPEG. 79 00:05:20,892 --> 00:05:25,768 JPEG is the most commonly used format for photographs like this one, 80 00:05:25,768 --> 00:05:28,680 and we can adjust the quality here. 81 00:05:28,680 --> 00:05:31,881 We have low, which you can see. 82 00:05:31,881 --> 00:05:34,705 We're losing a lot of information so that's way too much. 83 00:05:34,705 --> 00:05:36,723 [LAUGH] Medium. 84 00:05:36,723 --> 00:05:38,126 It's still not great. 85 00:05:38,126 --> 00:05:40,435 High. 86 00:05:40,435 --> 00:05:42,880 That might do it. 87 00:05:42,880 --> 00:05:47,602 You can see our file size is a really nice small size down here. 88 00:05:47,602 --> 00:05:50,250 It's much better. 89 00:05:50,250 --> 00:05:54,070 The JPEG is the clear winner in quality and file size. 90 00:05:54,070 --> 00:05:59,390 And typically, JPEGs can achieve ten to one compression with little 91 00:05:59,390 --> 00:06:04,420 perceptible loss in image quality, so that's always a good go-to. 92 00:06:04,420 --> 00:06:10,450 And remember that for export, we're not exporting all slices. 93 00:06:10,450 --> 00:06:13,440 We're gonna be exporting selected slices. 94 00:06:13,440 --> 00:06:17,870 And we selected just the images, so that's all we want. 95 00:06:17,870 --> 00:06:20,087 We'll hit Save. 96 00:06:20,087 --> 00:06:23,933 I save it to my Desktop. 97 00:06:23,933 --> 00:06:25,339 Let's go and take a look. 98 00:06:31,093 --> 00:06:35,660 And what it's done here is it has saved it in my Image folder. 99 00:06:35,660 --> 00:06:36,970 This is my finished mock-up. 100 00:06:36,970 --> 00:06:39,850 And it has numbered them for me as well. 101 00:06:39,850 --> 00:06:40,700 So here we go. 102 00:06:42,210 --> 00:06:48,850 This is 46 kilobytes, 36 kilobytes, and 42 kilobytes. 103 00:06:48,850 --> 00:06:51,490 So it was adding it all together 104 00:06:51,490 --> 00:06:55,650 in that optimized window to tell me the full size of all of those. 105 00:06:58,160 --> 00:07:00,540 These are my images from earlier. 106 00:07:00,540 --> 00:07:02,190 These are the ones that we just created. 107 00:07:03,730 --> 00:07:05,500 You can see how fast that was. 108 00:07:05,500 --> 00:07:08,300 I mean it does take a little time to adjust to your sizes. 109 00:07:08,300 --> 00:07:12,530 But once you've done that, it's pretty straight forward exporting it out. 110 00:07:12,530 --> 00:07:13,790 And that's it for now. 111 00:07:13,790 --> 00:07:16,900 Next we're going to talk about how to save out the SPGs.