1
00:00:00.07 --> 00:00:02.02
- [Voiceover] In this movie,
we're gonna talk about

2
00:00:02.02 --> 00:00:03.08
the jpeg file format,

3
00:00:03.08 --> 00:00:06.06
which like ping 24 goes ahead and saves

4
00:00:06.06 --> 00:00:09.04
up to 16.8 million colors.

5
00:00:09.04 --> 00:00:11.06
But, it applies lossy compression,

6
00:00:11.06 --> 00:00:14.04
which means that it rewrites
the colors of pixels

7
00:00:14.04 --> 00:00:18.03
in order to reduce the file
size as much as possible.

8
00:00:18.03 --> 00:00:21.06
Now, you get to control how
much compression is applied,

9
00:00:21.06 --> 00:00:24.05
but the file format
always rewrites colors,

10
00:00:24.05 --> 00:00:27.05
which means that it's best
for photo-realistic artwork,

11
00:00:27.05 --> 00:00:28.04
because that's where

12
00:00:28.04 --> 00:00:31.06
you're gonna notice the
lossy compression the least.

13
00:00:31.06 --> 00:00:33.07
And so here we are looking
at a piece of artwork

14
00:00:33.07 --> 00:00:34.09
that's quite complicated,

15
00:00:34.09 --> 00:00:36.08
but if you want to look
in to how to create it,

16
00:00:36.08 --> 00:00:41.08
then you can check out Deke's
Techniques number 344 and 345.

17
00:00:41.08 --> 00:00:44.04
I'm gonna go ahead and turn
off that text layer, however,

18
00:00:44.04 --> 00:00:47.00
because I don't want to save
it along with the jpeg file,

19
00:00:47.00 --> 00:00:49.06
and then I'll go up to
the file menu, and choose

20
00:00:49.06 --> 00:00:52.05
save for web, so control
shift alt S here on a PC,

21
00:00:52.05 --> 00:00:55.06
or command shift option S on the Mac.

22
00:00:55.06 --> 00:00:58.02
It may take a few moments
for the preview to generate,

23
00:00:58.02 --> 00:01:00.05
because this is a more complicated file,

24
00:01:00.05 --> 00:01:02.06
than the ones that we've seen so far.

25
00:01:02.06 --> 00:01:05.06
Alright, notice that save
for web is going with ping 8,

26
00:01:05.06 --> 00:01:08.03
because that's the last
file format we applied.

27
00:01:08.03 --> 00:01:10.08
And as a result, we're
reducing the size of the file

28
00:01:10.08 --> 00:01:13.00
from 2.58 megs like usual,

29
00:01:13.00 --> 00:01:16.01
to about 298 K.

30
00:01:16.01 --> 00:01:18.08
So, it's a pretty good
savings, but as a result,

31
00:01:18.08 --> 00:01:20.08
we're getting some dither as well

32
00:01:20.08 --> 00:01:22.08
inside of this gradient highlight.

33
00:01:22.08 --> 00:01:23.08
I don't really want that,

34
00:01:23.08 --> 00:01:25.09
and I want as many colors as possible.

35
00:01:25.09 --> 00:01:29.08
So, I'm gonna switch from
ping 8, not to ping 24,

36
00:01:29.08 --> 00:01:32.03
which would give me all
the colors that I need,

37
00:01:32.03 --> 00:01:34.01
and apply lossless compression,

38
00:01:34.01 --> 00:01:36.06
but we'd have a pretty big
file, as you can see here.

39
00:01:36.06 --> 00:01:38.05
It's 2.79 K.

40
00:01:38.05 --> 00:01:41.05
So, more than twice as large
as what we were seeing before.

41
00:01:41.05 --> 00:01:44.09
Instead, I'm going to switch to jpeg.

42
00:01:44.09 --> 00:01:49.08
And just like that my file
size drops to 137.5 K.

43
00:01:49.08 --> 00:01:52.07
Alright, now you have a few
other options to deal with here.

44
00:01:52.07 --> 00:01:55.01
Progressive is gonna
draw the image in passes,

45
00:01:55.01 --> 00:01:57.00
as it loads on a website.

46
00:01:57.00 --> 00:01:59.08
I don't recommend that, so I
would turn that checkbox off,

47
00:01:59.08 --> 00:02:00.09
if I were you.

48
00:02:00.09 --> 00:02:03.07
And then, ICC profile, we'll
go ahead and save the fact

49
00:02:03.07 --> 00:02:07.05
that this is SRGB image,
along with the file.

50
00:02:07.05 --> 00:02:09.09
Generally speaking though,
that's not necessary.

51
00:02:09.09 --> 00:02:12.02
So you can go ahead and
turn that checkbox off.

52
00:02:12.02 --> 00:02:13.01
And now, you can see,

53
00:02:13.01 --> 00:02:15.03
the file format has dropped even further,

54
00:02:15.03 --> 00:02:18.02
down to about 129 K.

55
00:02:18.02 --> 00:02:20.04
Alright now we have the
soft device checkbox.

56
00:02:20.04 --> 00:02:22.00
Typically, you want to leave that on,

57
00:02:22.00 --> 00:02:25.04
because that adds a helping
of lossless compression,

58
00:02:25.04 --> 00:02:28.02
which helps get the file
size down a little further.

59
00:02:28.02 --> 00:02:30.05
You don't want blur,
that's a terrible setting.

60
00:02:30.05 --> 00:02:32.04
It will reduce the size of the file,

61
00:02:32.04 --> 00:02:34.03
but it's also gonna blur your image,

62
00:02:34.03 --> 00:02:35.08
which is not what you want.

63
00:02:35.08 --> 00:02:37.05
The matte setting is just here if you have

64
00:02:37.05 --> 00:02:39.03
transparent areas in your artwork.

65
00:02:39.03 --> 00:02:41.02
We don't, so it doesn't matter.

66
00:02:41.02 --> 00:02:42.06
And then we have this

67
00:02:42.06 --> 00:02:44.07
compression quality setting right here.

68
00:02:44.07 --> 00:02:46.06
So, if you set it to maximum,

69
00:02:46.06 --> 00:02:50.06
you're gonna increase
the file size to 424 K,

70
00:02:50.06 --> 00:02:53.09
so it's getting close to as
big as it is with ping 24,

71
00:02:53.09 --> 00:02:55.08
which is typically not what we want,

72
00:02:55.08 --> 00:02:58.05
but you're also going to
apply very little compression.

73
00:02:58.05 --> 00:03:00.02
Whereas, if you go with low,

74
00:03:00.02 --> 00:03:03.05
you're gonna get a tiny
file size, just 42 K,

75
00:03:03.05 --> 00:03:05.04
but your image is gonna look horrible.

76
00:03:05.04 --> 00:03:07.08
And so, notice if I control click here,

77
00:03:07.08 --> 00:03:11.03
in order to zoom in, and I
drag to a different location,

78
00:03:11.03 --> 00:03:13.09
we have all these bad edges going on.

79
00:03:13.09 --> 00:03:17.02
And so what jpeg does,
is it rewrites the pixels

80
00:03:17.02 --> 00:03:19.06
in eight by eight pixel blocks.

81
00:03:19.06 --> 00:03:22.05
And so essentially the top
left pixel is left alone,

82
00:03:22.05 --> 00:03:26.07
but the other 63 pixels
around it, have to change.

83
00:03:26.07 --> 00:03:28.09
And so, it can be pretty darn destructive,

84
00:03:28.09 --> 00:03:30.06
especially at low settings.

85
00:03:30.06 --> 00:03:34.08
What I recommend, typically,
is either medium or high.

86
00:03:34.08 --> 00:03:37.08
And in this case medium gives
us some pretty good results,

87
00:03:37.08 --> 00:03:39.05
when we zoom back out.

88
00:03:39.05 --> 00:03:43.03
And really, jpeg is meant
to be viewed at 100%.

89
00:03:43.03 --> 00:03:44.01
And so it ends up going,

90
00:03:44.01 --> 00:03:46.03
from looking pretty terrible
when you're zoomed in,

91
00:03:46.03 --> 00:03:48.07
to not half bad when you're zoomed out.

92
00:03:48.07 --> 00:03:51.06
And, as a result, we're
getting a 62 K graphic.

93
00:03:51.06 --> 00:03:53.09
And as generally speaking
for web graphics,

94
00:03:53.09 --> 00:03:56.07
you want to try to stay under 100 K,

95
00:03:56.07 --> 00:03:59.06
and so what I typically do
is raise the quality setting,

96
00:03:59.06 --> 00:04:01.06
until I see it go over 100 K.

97
00:04:01.06 --> 00:04:04.00
Right now we're at about 129 K.

98
00:04:04.00 --> 00:04:07.03
And then, you can click
inside this quality setting,

99
00:04:07.03 --> 00:04:10.04
and then just sort of press
the down arrow key a few times,

100
00:04:10.04 --> 00:04:12.03
take it down to 50%, let's say,

101
00:04:12.03 --> 00:04:13.09
and then press the tab key.

102
00:04:13.09 --> 00:04:16.06
That gets us down to 92 K,

103
00:04:16.06 --> 00:04:18.07
so maybe I click inside
the quality setting

104
00:04:18.07 --> 00:04:21.04
to take it up again to 54%.

105
00:04:21.04 --> 00:04:22.05
That takes us too high,

106
00:04:22.05 --> 00:04:24.07
so let's take it down to 52%.

107
00:04:24.07 --> 00:04:27.02
This is my first time trying
this specific graphic.

108
00:04:27.02 --> 00:04:29.03
I guess, 51%?

109
00:04:29.03 --> 00:04:31.09
No, 50% is gonna have to do it.

110
00:04:31.09 --> 00:04:33.04
Yeah, that's a big savings.

111
00:04:33.04 --> 00:04:36.00
Right there between 51 and 50%.

112
00:04:36.00 --> 00:04:38.05
We dropped the file size about 15 K,

113
00:04:38.05 --> 00:04:40.03
which is pretty amazing.

114
00:04:40.03 --> 00:04:42.00
Alright, that's it, so
now I'll just go ahead

115
00:04:42.00 --> 00:04:43.05
and click on the save button,

116
00:04:43.05 --> 00:04:45.04
in order to save off this graphic.

117
00:04:45.04 --> 00:04:47.00
And I'll call it continue stone image,

118
00:04:47.00 --> 00:04:48.09
and then I'll click on the save button.

119
00:04:48.09 --> 00:04:51.04
Alright, now I'll go ahead
and switch over to Photoshop.

120
00:04:51.04 --> 00:04:53.04
And you can see that it looks just great.

121
00:04:53.04 --> 00:04:57.07
Alright, I'm gonna change the
zoom value down here to 140%.

122
00:04:57.07 --> 00:04:59.09
And then I'll press the
F key a couple of times,

123
00:04:59.09 --> 00:05:02.03
and I'll space bar drag
the image on screen.

124
00:05:02.03 --> 00:05:04.05
And that's how you save off a full-color

125
00:05:04.05 --> 00:05:08.02
lossy jpeg image, using
the save for web command,

126
00:05:08.02 --> 00:05:09.08
inside Illustrator.