6
Preparing an Illustration for the Web
Compressing photographic images is important. However, when you think about it, Web sites use more
illustrations than photographic images for page design elements, such as banners and navigation buttons.
That’s why Adobe ImageReady works so smoothly with Adobe Illustrator software and other illustration
programs that produce EPS files.
With illustration files—or any files that have areas of solid colour—GIF and PNG file formats provide the
best compression options. You can specify these settings for GIF and PNG-8 files:
• What colour palette an image includes (you have a choice of Adaptive, Perceptual, Web, and Custom colour
palettes, all of which are described in more detail in the next section, “Superior Colour Control”).
• The number of colours an image uses (2–256 with presets at 2, 4, 8, 16, 32, 64, 128, and 256).
• Whether or not an image uses layer transparency to define transparency on a Web page.
• How much a dither diffusion algorithm is applied to an image to soften the banding that may appear
when gradations of colour are converted to fixed palettes.
• Whether the file is set to download using an interlaced pattern in which a low-resolution version ap-
pears first, followed by successive passes of higher resolution data.
• What matte colour to use to blend partially transparent colours within GIF images. GIF allows fully trans-
parent pixels, but not partial transparency. Unless pixels along the edges of a graphic blend with a colour
similar to the expected Web page background, you may see a noticeable halo around the image. Setting
the matte colour to the anticipated Web page colour eliminates the halo problem.
Remember—the goal at all times is to minimise the file size, while maintaining the on-screen display quality
of the graphics. For example, limiting the number of colours in certain illustration files can dramatically
reduce the file size and download time without adversely affecting the final illustration quality.
The following set of steps walks you through compressing an illustration file and introduces some other
handy features that are discussed again later in this document.
Important:
To preview your image results in a Web browser (Step 12), you must set up a link for
ImageReady to find your Web browser. Just make an alias or shortcut to your browser, and store it in
the ImageReady\Helpers\Preview In folder. You must close and restart ImageReady for this shortcut to
take effect.
Try it:
1. Choose File > Open > banner.ai. ImageReady rasterizes the Adobe Illustrator EPS file on import, so this
step may take a minute.
2. Crop the image to remove the edge transparency: Select the marquee tool, and drag a selection marquee
around the image. Choose Image > Crop. Then click OK.
3. Now crop the image more tightly: Choose Image > Trim. Select the Upper-Left Pixel Colour option, and
then click OK.
4. Click the Optimized tab to check the original and compressed file sizes.