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.