Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
You have completed Adobe Illustrator for Web Design!
Preview
Prepare and Export your graphics for web with a focus on Raster Graphics.
Extra Reading
Google Developers on Image Optimization, Ilya Grigorik Published: May 07, 2014
Helpful Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up