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

(If you arrived at this page from a search, you can start the tutorial on page one.)

Image Size

This tab lets you resize the image right in the Save for Web dialog. Change Width or Height and to change proportionally, check the Constrain Proportions box. You can also resize by percentage.

If you make changes, you must press the Apply button before saving for them to take effect. Make sure you have Anti-Alias checked. It smoothes the edges so your image looks smoother and blends better. This works for other file formats as well as the GIF.

image size

Clip to Artboard

If you want the final image to be the size of the artboard rather than the size of the object bounding box, you can use Clip to Artboard. Anything outside the Artboard will be automatically cropped when you save for web. Check the box to enable this option.

Layers

The Layers Tab has settings that are for HTML export.

Save

When you have finished setting options, click the Save button. Tip! If you will be saving several images using the same settings, holding option/alt key turns the buttons into Reset and Remember. Reset returns the settings to default, and Remember saves the settings so you can use them for the next image.

remember

 

JPG Settings

Now that you've seen GIF settings, let's look at an image that should be saved as a JPG. This banana is full of gradient mesh points and has fine variations in color. I'll save it as a JPG. JPGs are best for photos, images with lots of colors, gradients, or soft edges.

banana

The same preview and browser preview settings apply here as for the GIF. Let's look at the other options you can choose.

Optimized:
This option reduces the file size slightly, but it creates a JPG called an Optimized or Enhanced JPG that not all browsers understand. Because the file size reduction is very slight many people leave this unchecked.
Quality:
This setting trades quality of the image with smaller file size. Even though the poorer the quality the smaller the file size, you have to be careful not to lower the quality too much. Most of the time Medium is fine. Maximum is overkill, and three times in size what the medium quality file would be: Low: 3.919K, Medium: 5.9K, High: 11.53K, and Maximum: 18.67K.
Progressive:
Progressive is similar to the interlaced setting we talked about with the GIF settings. The JPG loads in passes.
Blur:
This reduces artifacts by blurring the JPG slightly. This should only be used on low quality JPGs when you can see artifacts, which are imperfections in the image caused by poor quality. Go easy on this one or the image will appear "soft".
ICC Profile:
This will only be available if the image has an embedded ICC profile, but most browsers can't read them anyway, so ignore this one.
Matte:
Rather than adding a halo of the matte color like it does for a GIF, for a JPG this setting fills the entire background of the image with the selected color. If I wanted to place this banana on a web page with a black background, using a black matte will actually make it look like a transparent GIF, but still be able to take advantage of the millions of colors that JPGs can display.

mate

 

Save for Web Preferences

As you are probably aware, if Illustrator acts up, often deleting the preferences file and letting Illustrator rebuild it cures the problems. Save for Web has its own preferences, and if Save for Web acts up, deleting this file will usually fix it. The Save for Web preferences file is found in the same folder as the program preferences.

Want to know more?

As I mentioned at the beginning of this tutorial, there are many options and different formats in Save for Web. We have barely scratched the surface. If you want to know more, read The Hidden Power of Illustrator CS Web Graphic Techniques by Steve Kurth. The book is published by Sybex and is available in bookstores and online.

©2005 Sara Froehlich

©2014 About.com. All rights reserved.