The purpose of the Save for Web feature in Adobe Illustrator is to optimize graphics for use on a Web site or other screen display, such as a phone of tablet. The word "optimize" refers to the optimum balance between file size and quality. We want small file sizes so they'll load quickly on a Web page, but we don't want to sacrifice their appearance. Save for Web lets you preview how an optimized  vector graphic will look, so you can choose the best compromise.

In this article, I'll go over the file formats available in Save for Web, and show you which formats are best suited for different kinds of artwork.

 

The Save for Web Dialog

You access the Save for Web dialog under the File menu. Save for Web is almost an application in and of itself, and the dialog window takes up most of your screen.

 

 

 

You can choose to preview your artwork in one of three ways. You can simply show the original alone. This seems rather useless, however, because you'll probably want to see how the graphic will look once it's optimized. You can show the optimized preview alone, or you can choose 2-Up, which will give you side-by-side previews. You can click on either pane to adjust its settings. In the image below, the original is on the left, and the optimized version (in this case, as a GIF) is on the right.

 

 

 

You can adjust the size of the preview in the drop-down menu on the lower left, and you can also use familiar keyboard shortcuts like Command/Control-0 to fit the artwork in the window, or Command/Control-plus or minus to increase or decrease the magnification.

Clicking the Preview button will open the optimized graphic in your default browser. If you want to see how it looks in other browsers, you can add more by clicking the little globe icon next to the Preview button.

 

 

 

One of the most important sections of the Save for Web interface is the file size. Under each preview is the file type and its respective size. So in the image below, the original EPS is on the left, with a file size of 2.44M. The optimized GIF is on the right, with a much smaller file size of about 39K. Since the goal of Save for Web is to find the ideal balance between size and quality, you'll be looking at these numbers often.

The File Formats

GIF (Graphics Interchange Format)

GIF is one of the oldest and most-used formats on the Web. It's ideal for images with areas of flat color, as in this example. The GIF color space is Indexed color. This allows you to specify an exact number of colors in the color table, so you can use only the ones you need, thereby reducing the overall file size.

The save for Web dialog has several GIF presets. Choose different settings and keep an eye on the image and the resulting file size. In the image below, I've used a preset that has 128 colors. As you can see, the image looks good and the file size is 37.72K.

 

 

 

In the next example, I've chosen only 8 colors. You can see the file size is now 23.3K. It's a significant savings, but the image is starting to lose quality. The edges are rough because there aren't enough colors to fill in the transitions between each shape. Even though there are only five colors in the illustration — three shades of blue, yellow and white — Illustrator uses more colors in the anti-aliasing process so the edges and curves appear smooth.

 

 

 

GIF colors can be restricted to those that are considered "Web safe". This is not really a concern these days, now that monitors can display millions of colors, but there was a time when designers were advised to use only the 216 colors that were shared by Windows and Macintosh systems. So if you wanted to ensure your graphic looked the same on each platform, you would limit its colors to that palette. In the example below, I've used the Web Palette preset, and you can see how the light blue color has shifted to a greenish blue.

 

 

 

A GIF can be black-and-white, and it uses something called dithering to simulate a continuous tone. You can choose different dithering methods, but they all have a decidedly 1980's look to them.

 

 

 

GIFs support one level of transparency. This means each pixel is either solid or completely transparent – you wouldn't use a GIF for an image with a soft shadow or transparent gradient.

 

 

 

Next to the Transparency tick box you can choose a matte color. This will add a slight outline around the image in that color. So if you're placing the GIF on a colored background, you can select that same color as the matte color. That way the transition between the graphic and the background will appear smooth.

 

 

 

You can choose to clip the image to the artboard, which will make the pixel dimensions of the saved graphic the same as the Illustrator artboard. Or you can choose to leave this box unchecked, which will clip the image to the bounds of the vector graphic. This is the setting you'll probably use most of the time, since there's no need for extra transparency around the image. The resulting file size will be smaller as well.

 

 

 

In the Image Size section you can choose to reduce or enlarge the optimized graphic. The nomenclature is a bit ambiguous here. It's not referring to the file size of the image in kilobytes, but the pixel dimensions, expressed as width and height.

This is where Illustrator has an advantage over a raster or pixel-based application like Photoshop. If you enlarge the image for optimized output, Illustrator uses the vector information in the file for the enlargement, and the resulting graphic is sharp and smooth. If you were to use Save for Web in Photoshop and try to enlarge a raster image, however, the enlarged artwork would look fuzzy.

Below the Image Size fields is a drop-down menu where you can select the method of optimization. If your graphic is text-heavy, you might choose Type Optimized. In the examples below, you can see the difference between the image that is optimized and one that has no optimization applied.

 

 

 

 

 

 

The Color Table contains swatches for each color that will be contained in the optimized graphic. You can actually double-click on a swatch and change its color. Here I've changed the yellow to pink. You can see the swatch is now half yellow and half pink in the Color Table, and when you hover over it, the tool tip gives you the RGB breakdown for the original and for the new color. This could be useful if you are saving a series of the same image, and you want one element to be a different color in each version. By replacing the color in Save for Web, you don't have to alter the original vector.

 

 

 

Below the Color Table is a series of icons that let you further adjust the color. When you select a swatch, you can then make it transparent, confine it to a Web safe color, lock it or delete it. A diamond inside a color swatch indicates a Web safe color, and when you hover over it, the hexadecimal code is displayed.

 

 

 

There are a few more settings and practices you can use with GIFs. For example, you can choose to interlace the GIF, which will load the image in multiple passes in a browser. This method was developed back in the days when most people were on slow dial-up connections. An interlaced graphic appears to load faster than it actually does. There's not much reason to use it today, especially with a relatively small file like a GIF. The other options in the GIF settings are either highly specialized, or somewhat outmoded, so I won't spend more time on those. Let's move on to the other formats!

PNG-8 (Portable Network Graphics, 8-bit)

The PNG (some people say "P-N-G" and others pronounce it "ping") format is often a better alternative to GIF. PNG-8 is similar to GIF in that it uses 256 colors, supports 1-bit transparency, and can use dithering. The "8" means that this is an 8-bit image. The main difference between the two is the way in which they compress the image information. GIF uses a "lossy" method, which means some of the data is discarded (or "lost") to achieve a smaller file size. The PNG method is lossless, but because of its compression algorithm, the resulting files size is often significantly smaller than a GIF. So why would you even use a GIF, if PNG is better? Well, not all browsers support the PNG format (I'm looking at you, Internet Explorer 6!). But as more people upgrade to newer browsers, this isn't as much of an issue. So go ahead and try PNG-8 on images that would normally call for a GIF.  Most of the options for PNG-8 are the same as those for GIF in the previous section.

JPEG (Joint Photographic Experts Group)

JPEG was originally developed to compress photos, and thus is best suited for vectors with continuous tones. JPEGs are 24-bit, and thus support well over 16 million colors. JPEG compression is lossy, and the image will degrade if you try to compress it too much. In the image below, you can start to see blocky JPEG "artifacts," which are undesirable. Choose a higher quality setting until you get a better-looking graphic with an acceptable file size.

 

 

 

You can choose to load the image in multiple passes by selecting Progressive, and you can blur the image to mitigate some of the artifacts. Neither of these methods is ideal, nor actually necessary. They are throwbacks to the days of dial-up connections and slower machines.

As with GIF and PNG-8, you can specify a pixel dimension in the Image Size field, select the optimization method, and choose whether to clip the image to the artboard. There is no color table, because JPEGs are in RGB mode, not Indexed color.

JPEG is well-suited for images with continuous tone, but it is not so great at graphics with larger areas of flat color. In the example below, the JPEG is on the right. Even at the highest quality setting, it looks worse than the GIF, and is showing some artifacts.

 

 

 

PNG-24

PNG-24 is, as the name suggests, a 24-bit image. In some ways, it combines the best of both worlds of GIF and JPEG, and is a superior format. Like JPEG, it can support millions of colors. PNG-24 can also contain alpha transparency, so it can be used for graphics that have blurred edges and transparent shadows. All those colors and transparency come with a price, however, in a larger file size. In the example below, you can see that a JPEG saved on the high setting is almost 22K, whereas the PNG is about 95K. But the transparency allows you to place the PNG-24 graphic on a patterned or textured background. So if you need that kind of flexibility, PNG-24 is the way to go.

 

 

 

 

 

 

Conclusion

I hope you have a better understanding of the file formats in Illustrator's Save for Web feature. Each format has its advantages and disadvantages, but with some careful testing, you can find the best settings for your artwork. This is a powerful tool and can make your Web work flow much easier and faster. Once you determine the ideal settings for your images, you can save them as a custom preset. Then you can batch process entire folders full of similar images in no time.