1. Technology
Send to a Friend via Email
Save for Web in Illustrator CS
By Sara Froehlich

Using Save for Web in Illustrator CS

birdWhen using Illustrator, you may not think of it as a web design tool, but with an excellent Save for Web feature you can use Illustrator to make and save your web graphics.

Illustrator's Save for Web is so full of features that to really cover it would take a book. From the Save for Web dialog, you can save sliced web pages, save the slices in different web formats for the very best image quality possible, export whole web pages including the HTML, or even export Flash animations! Even though this tutorial was written for Illustrator CS, it is also relevant for previous versions of Illustrator as well as Photoshop.

When you add images to your web page, you increase the overall page size. It is the goal of the Save for Web dialog to let you keep the quality of the images without keeping the large file sizes, thus making your overall page size smaller. Why is this important? Because the smaller the overall page size, the faster the page loads. This tutorial will show you how to choose the settings to get great looking GIFs and JPGs. Before you can make choices for saving your images for the web, you need to need to know a little about the GIF and JPG graphics formats.

File Formats

The two most common web file formats are GIF and JPG. Even though Illustrator can save in several other formats, these are the two we will talk most about in this tutorial.

JPG or JPEG (Joint Photographic Experts Group)

I know that's an odd name, but it's the name of the original committee that wrote the format. The JPG format supports millions of colors, making it ideal for photos or other images with a lot of colors or gradient fills. The drawback is that to make the files smaller it compresses the images by getting rid of color information. Many times this is not noticeable to the eye, but because the color information is actually discarded every time you save the image, it can degrade quickly. This is why JPG is a lossy format.
More JPEG Information

GIF (Graphic Interchange Format)

The GIF format is a compressed format that makes small files. It supports transparency, so the background of a GIF can be rendered transparent to let the web page background show through. Because the GIF format only supports 256 colors, it is most suitable for line art, text, or images like illustrations with flat areas of color, rather than photos or images with many colors or gradient fills. Unlike JPG, GIF is a lossless format. You can save it repeatedly without losing any more quality (except for the caveat that if the image started out as a photo with thousands of colors, it will now have only 256, and thus be degraded in that way, but at least repeated saving will not make it any worse.) Another thing that is nice about the GIF format is that it supports GIF animations. Neither JPG nor PNG do.
More GIF Information

PNG (Portable Network Graphics)

While this format can be saved by Illustrator's Save for Web, we won't use it because it is not yet supported by all browsers. Support is growing, however, and with its support for millions of colors, lossless compression, and transparency support, it is a great web format. It even supports degrees of transparency, something that the GIF does not. Because it is lossless, saving, opening, editing, and re-saving a PNG image will not degrade its quality.
More PNG Information

JPEG 2000

This is the JPG of the future, which is now, sort of. It is not supported by all programs yet, but it has the best features of the JPG format—support for millions of colors and small file size; in fact, even smaller, being able to compress a file up to 20% smaller than its predecessor—and the best of the GIF format: support for transparency, and it is lossless.
More JPEG 2000 Information

Now that you know more than you wanted to about file formats, let's look at how to save a GIF or JPG for the web using Illustrator's Save for Web.

Continued on Page 2…

©2005 Sara Froehlich

You can opt-out at any time. Please refer to our privacy policy for contact information.

Discuss in my forum

©2014 About.com. All rights reserved.