Illustrator CS4 Save Artwork for Web

Illustrator CS4DPD Blitz Reference

Saving Illustrator Artwork for the Web

• Choose File->Save for Web & Devices
• The Save for Web & Devices dialog box appears, showing the artwork on the Optimized tab

Choose a tabbed view:

• Original, Optimized, 2-Up, or 4-Up
• As a default, the artwork is shown in the Optimized view, which previews the artwork as it will appear based upon the settings on the right
• The 2-Up view is probably the best choice because it shows the original image versus the optimized version

Choose a setting for the file from the options on the right

• To make it easier, choose a preset from the Preset drop-down list

Keep in mind these points:

• Graphics Interchange Format (GIF) is generally used for artwork with spans of solid color
• GIF isn’t a lossy format
• Artwork can be made smaller by reducing the number of colors in the image — hence the choices, such as GIF 64 No Dither (64 colors)
• The lower the number of colors, the smaller the file size
• Can also increase or decrease the number of colors in the file by changing the preset values in the Color text field or by using the arrows to the left of the Color text field

Dithering tries to make the artwork look like it has more colors by creating a pattern in the colors

• It looks like a checkerboard pattern up close and even far away
• It also makes a larger file size, so why use it?
• Most designers don’t like the effect and choose the No Dither option

Joint Photographic Experts Group (JPEG) is used for artwork that has subtle gradations from one shade to another

• Photographs are often saved in this format
• When having drop shadows or blends in the artwork, select this format
• JPEG is a lossy file format — it will reduce the image to a lesser quality and can create odd artifacts in the artwork
• Choices such as High, Medium, and Low in the Settings drop-down list
• Make sure that to choose wisely
• Can also use the Quality slider to tweak the compression

PNG-8 is very similar to a GIF file format. Unless you have a certain reason for saving as PNG-8, stick with the GIF file format

• PNG-24 supports the best of two formats (GIF and JPEG)
• Not only does the Portable Network Graphics (PNG) format support the nice gradients from one tonal value to another (like JPEGs), but it also supports transparency (like GIFs)
• Not just any old transparency; e.g. an object 50 percent transparent in Adobe Illustrator and then save it with
• Save for Web & Devices as a PNG-24 file with the Transparency check box selected - the image shows through to any other objects underneath it on its destination page

The Shockwave Flash (SWF) graphic file format is a version of the

• Adobe Flash Player vector-based graphics format
• Because a SWF file is vector-based, its graphics are scalable and play back smoothly on any screen size and throughout multiple platforms
• With the Save for Web & Devices dialog box, can save image directly to SWF from Adobe Illustrator
• With the SWF choice, can preview and make decisions as to how to export to the file as well as make decisions about how layers should be exported

Scalable Vector Graphics (SVG) is an emerging Web standard for two-dimensional graphics

• SVG is written in plain text and rendered by the browser, except that in this case, it’s not just text that’s rendered but also shapes and images, which can be animated and made interactive
• SVG is written in XML (Extensible Markup Language)
• Can choose to save Scalable Vector Graphics out of
• Adobe Illustrator with the Save for Web & Devices dialog box
• Use the Wireless Application Protocol Bitmap Format (WBMP) format for bitmap images for mobile devices
• When satisfied with the chosen settings, Save