This course will be retired on January 6, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
When saving graphics for the web it's important to differentiate between lossless and lossy data compression and various file types in order to achieve a graphic or image that is both high in quality and small file size.
-
0:00
[? Music ?] [Treehouse]
-
0:08
Saving and optimizing graphics for the Web can be tricky.
-
0:11
In this video, we'll use the built in Save for Web feature in Photoshop
-
0:14
to save and optimize our graphic for the Web.
-
0:17
You want the perfect balance of a graphic that is of high quality
-
0:20
but also small in file size.
-
0:23
Okay, so when your graphic or image is ready to save for the Web,
-
0:26
make sure to use the built in Save for Web feature in Photoshop
-
0:29
instead of going to File, Save As like in most other programs.
-
0:34
The only time I use that is if I'm not finished with the document
-
0:37
and want to save out a fully editable file like a PSD,
-
0:40
PDF, or TIF, for example.
-
0:43
While there is an option to save out a JPEG,
-
0:45
it's not correctly optimized for the Web.
-
0:49
In this example, I'm using a badge I created for Treehouse.
-
0:53
Since I'm ready to save it out for the Web,
-
0:55
I'll navigate to File, Save for Web & Devices.
-
1:00
First and foremost, while there are many different image formats out there
-
1:03
like JPEG, GIF, PNG, to name a few,
-
1:07
all images can be further divided into 2 separate categories:
-
1:10
lossless and lossy.
-
1:12
Lossless data compression allows media to be represented
-
1:15
without any loss in quality or information,
-
1:18
while lossy data compression may result in a loss of quality and information.
-
1:23
The most common lossless media types in web design include
-
1:27
GIF and PNG, while JPEG is the most common of lossy graphic media.
-
1:32
Our preview menu is on your left.
-
1:35
There are tabbed options for your preview window.
-
1:38
I prefer the 2-Up View where we can see the original
-
1:41
and the new graphic right next to each other.
-
1:44
Now let's move our attention to the right side of the screen,
-
1:47
which has all of our important options for saving out the graphic.
-
1:50
The drop-down at the top has several different file types,
-
1:53
all of which the Web supports, so going down the list of file types,
-
1:57
we can mark JPEG off the list because it doesn't support transparency,
-
2:02
and we can mark WBMP off the list because it only supports black and white.
-
2:08
That leaves us with GIF and PNG.
-
2:12
GIF would be a good option for this badge.
-
2:15
Short for graphics interchange format,
-
2:17
it supports only 256 colors,
-
2:20
but since our badge only has a few different colors,
-
2:22
no quality will be lost.
-
2:24
GIF would also be a great choice because the background color can be set
-
2:27
to transparent in order to let the color on the underlying web page show through.
-
2:32
If this badge were for some reason animated,
-
2:34
it would be the best option since PNG and JPEG
-
2:37
do not support animation.
-
2:39
Short for portable networks graphic, PNG is another viable option.
-
2:44
In fact, if this badge were to have a drop shadow in addition to the transparency,
-
2:48
it would most definitely be the best option for this graphic.
-
2:51
PNG-24 has great color and can handle effects and transparency beautifully.
-
2:56
It also has lossless compression,
-
2:58
but the file size is huge.
-
3:01
PNG-8 uses the same color indexing and has the same limitation
-
3:04
that GIFs do, so since there's no drop shadow
-
3:07
and very few colors in our graphic,
-
3:09
we can focus on choosing between PNG-8 and GIF.
-
3:12
My advice is to switch between the two,
-
3:15
play with the amount of colors in the graphic, and keep your eye on
-
3:17
the bottom left-hand corner, which tells you how big the file size is.
-
3:21
Once narrowing down the best couple options for your graphic or image,
-
3:24
it's a matter of how you can balance quality and file size.
-
3:28
For this badge, I've decided to go with the PNG-8
-
3:30
with 32 colors for the graphic.
-
3:33
I've also decided to add a mat of the background color this badge will appear on,
-
3:37
which dithers the edges to prevent harsh, jagged edges around a graphic.
-
3:41
If you're working with a lot of the same type of graphics like I am
-
3:44
with the Treehouse badges, you can create a custom preset
-
3:47
which will save all of your settings so you don't have to redo it every time.
-
3:51
Let's create one for badges.
-
3:59
Saving for the Web is about playing with the settings for the graphic at hand
-
4:02
to achieve the highest level of quality while also keeping the file size down.
-
4:07
Zoom in on your preview and check the edges of your graphic,
-
4:10
and be aware of any distortion that might be happening up close
-
4:13
to make the best decision possible when choosing a file type for the Web.
-
4:18
Now that we understand how to save and optimize our graphic for the Web,
-
4:22
we can find a balance between a graphic that's both
-
4:24
high in quality and small in file size.
-
4:28
[? Music ?] [Treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up