442
Chapter 16: Web graphics
Best practices for creating web graphics
About web graphics
When designing graphics for the web, you must consider different issues than when designing graphics for print. To
help you make informed decisions about web graphics, keep in mind the following three guidelines:
1. Use web-safe colors.
Color is often a key aspect of artwork. However, the colors you see on your artboard aren’t necessarily the colors that
will appear in a web browser on someone else’s system. You can prevent dithering (the method of simulating
unavailable colors) and other color problems by taking two precautionary steps when creating web graphics. First,
always work in RGB color mode. Second, use a web-safe color. (See “To change the color mode of a document” on
page 185 and “To shift a color to a web-safe color” on page 187.)
2. Balance image quality with file size.
Creating small graphics file sizes is essential to distributing images on the web. With smaller file sizes, web servers
can store and transmit images more efficiently, and viewers can download images more quickly. You can view the
size and the estimated download time for a web graphic in the Save For Web dialog box.
3. Choose the best file format for your graphic.
Different types of graphics need to be saved in different file formats to display their best and create a file size suitable
for the web. For more information on specific formats, see “Comparing web graphics formats” on page 456.
There are many Illustrator templates made specifically for the web, including web pages and banners. Choose File >
New From Template to choose a template.
See also
“About the Save For Web dialog box” on page 452
“To optimize and save web graphics” on page 452
About pixel preview mode
When you save artwork in a bitmap format—such as JPEG, GIF, or PNG—Illustrator rasterizes the artwork at 72
pixels per inch. You can preview how objects will appear when rasterized by choosing View > Pixel Preview. This is
especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized
graphic.
To understand how Illustrator divides objects into pixels, open a file that contains vector objects, choose View > Pixel
Preview, and magnify the artwork so that you can see its individual pixels. The placement of pixels is determined by
an invisible grid that divides the artboard into 1-point (1/72 inch) increments. If you move, add, or transform an
object, you’ll notice that the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of
the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move
the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-
aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.