Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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