Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Saving for the Web

4:31 with Allison Grayce Marshall

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