- [Voiceover] In this movie, we're gonna talk about
the jpeg file format,
which like ping 24 goes ahead and saves
up to 16.8 million colors.
But, it applies lossy compression,
which means that it rewrites the colors of pixels
in order to reduce the file size as much as possible.
Now, you get to control how much compression is applied,
but the file format always rewrites colors,
which means that it's best for photo-realistic artwork,
because that's where
you're gonna notice the lossy compression the least.
And so here we are looking at a piece of artwork
that's quite complicated,
but if you want to look in to how to create it,
then you can check out Deke's Techniques number 344 and 345.
I'm gonna go ahead and turn off that text layer, however,
because I don't want to save it along with the jpeg file,
and then I'll go up to the file menu, and choose
save for web, so control shift alt S here on a PC,
or command shift option S on the Mac.
It may take a few moments for the preview to generate,
because this is a more complicated file,
than the ones that we've seen so far.
Alright, notice that save for web is going with ping 8,
because that's the last file format we applied.
And as a result, we're reducing the size of the file
from 2.58 megs like usual,
to about 298 K.
So, it's a pretty good savings, but as a result,
we're getting some dither as well
inside of this gradient highlight.
I don't really want that,
and I want as many colors as possible.
So, I'm gonna switch from ping 8, not to ping 24,
which would give me all the colors that I need,
and apply lossless compression,
but we'd have a pretty big file, as you can see here.
It's 2.79 K.
So, more than twice as large as what we were seeing before.
Instead, I'm going to switch to jpeg.
And just like that my file size drops to 137.5 K.
Alright, now you have a few other options to deal with here.
Progressive is gonna draw the image in passes,
as it loads on a website.
I don't recommend that, so I would turn that checkbox off,
if I were you.
And then, ICC profile, we'll go ahead and save the fact
that this is SRGB image, along with the file.
Generally speaking though, that's not necessary.
So you can go ahead and turn that checkbox off.
And now, you can see,
the file format has dropped even further,
down to about 129 K.
Alright now we have the soft device checkbox.
Typically, you want to leave that on,
because that adds a helping of lossless compression,
which helps get the file size down a little further.
You don't want blur, that's a terrible setting.
It will reduce the size of the file,
but it's also gonna blur your image,
which is not what you want.
The matte setting is just here if you have
transparent areas in your artwork.
We don't, so it doesn't matter.
And then we have this
compression quality setting right here.
So, if you set it to maximum,
you're gonna increase the file size to 424 K,
so it's getting close to as big as it is with ping 24,
which is typically not what we want,
but you're also going to apply very little compression.
Whereas, if you go with low,
you're gonna get a tiny file size, just 42 K,
but your image is gonna look horrible.
And so, notice if I control click here,
in order to zoom in, and I drag to a different location,
we have all these bad edges going on.
And so what jpeg does, is it rewrites the pixels
in eight by eight pixel blocks.
And so essentially the top left pixel is left alone,
but the other 63 pixels around it, have to change.
And so, it can be pretty darn destructive,
especially at low settings.
What I recommend, typically, is either medium or high.
And in this case medium gives us some pretty good results,
when we zoom back out.
And really, jpeg is meant to be viewed at 100%.
And so it ends up going,
from looking pretty terrible when you're zoomed in,
to not half bad when you're zoomed out.
And, as a result, we're getting a 62 K graphic.
And as generally speaking for web graphics,
you want to try to stay under 100 K,
and so what I typically do is raise the quality setting,
until I see it go over 100 K.
Right now we're at about 129 K.
And then, you can click inside this quality setting,
and then just sort of press the down arrow key a few times,
take it down to 50%, let's say,
and then press the tab key.
That gets us down to 92 K,
so maybe I click inside the quality setting
to take it up again to 54%.
That takes us too high,
so let's take it down to 52%.
This is my first time trying this specific graphic.
I guess, 51%?
No, 50% is gonna have to do it.
Yeah, that's a big savings.
Right there between 51 and 50%.
We dropped the file size about 15 K,
which is pretty amazing.
Alright, that's it, so now I'll just go ahead
and click on the save button,
in order to save off this graphic.
And I'll call it continue stone image,
and then I'll click on the save button.
Alright, now I'll go ahead and switch over to Photoshop.
And you can see that it looks just great.
Alright, I'm gonna change the zoom value down here to 140%.
And then I'll press the F key a couple of times,
and I'll space bar drag the image on screen.
And that's how you save off a full-color
lossy jpeg image, using the save for web command,
inside Illustrator.