Perfectly-sized web graphics

I am often asked why Illustrator seems "imperfect" when it comes to exporting and optimizing web graphics. You will often find that when exporting files for the web using the Save for Web feature in Illustrator, pixel sizes are often one pixel off -- leaving unsightly slivers of white, or sometimes even clipped graphics. Other times, graphics may seem to export at odd sizes altogether.

This can seemingly happen for a variety of reasons, although in reality, they are all the same -- Illustrator is simply picking up the bounding box of the artwork. And what you think is the bounding box may not be what Illustrator thinks is the bounding box. For example, if you create a mask, even though you can't see parts hidden by the mask, those areas may still be part of the bounding box area. Strokes, which by default sit on the centerline of a path, may also cause extra pixels to be added to the bounding area.

Basically, because web graphics really need to be created as very specific dimensions, you can't leave it up to Illustrator's interpretation of where the bounding box should be. You should be defining that yourself. And there are three ways to do it:

1. Draw a no-fill, no-stroke rectangle at the exact dimensions you need. With the rectangle selected, choose Object > Crop Area > Make. (EDIT: In CS4, with the rectangle selected, choose Object > Convert to Artboards). Now, when you use Save for Web, the exact size of the crop area will be used as the export dimensions. This is also useful for when you want to export a single area within a large illustration -- no need to copy and paste into a new document.

2. Use Document Setup to set up your artboard to the exact pixel dimensions you need (EDIT: In CS4, use the Artobard Tool to do this). Then, when you use Save for Web, click on the Image Size tab (lower right of the dialog) and check the "Clip To Artboard" option.



3. Use slices. You can draw slices using the Slice tool and you can adjust those slices using the Slice Select tool. In Save for Web, you can then treat each slice individually, and export them as needed.