Chapter 12 Web Publishing

Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color and compression Discover the reusability of symbols Slice a Web page

Optimization (1 of 2) Optimization: The process of preparing a functionally optimal graphic (so that it will download fast) It’s a balancing act between the visual quality of an image and its file size.

Optimization (2 of 2) There are three interrelated areas to consider in the Web optimization process: –Image format –Image color –Image size

Compression Image format, image color, and image size relate directly to image compression. Compressing a bitmap image makes the file smaller, but doing so could reduce visual quality. Figure example: Dithering is a process that attempts to simulate colors that are lost in the compression process.

Saving Most Web images are saved in the bitmap formats GIF, JPEG, or PNG. Some images are also saved in vector-based file formats SWF or SVG.

Color Tables Web images are saved in the RGB color space. Color reduction algorithms or “color tables” generate a specific color table for an optimized image. –Color tables apply to images saved in the GIF or PNG-8 format. –Types of color tables include perceptual, selective, adaptive, Web-safe, and grayscale.

Resolution (1 of 2) For online display, an image’s resolution only needs to match the average resolution of images viewed via the Web. –72 ppi for Mac and 96 ppi for Windows A bitmap image’s size is directly related to resolution.

Resolution (2 of 2) Image size can be referred to in two ways, and both affect optimization: –The actual dimensions of an image; for example, 5 x 5 inches, or 300 x 300 pixels –The image’s file size (the actual weight in digital bits); for example, 200 KB or 10 MB

Lesson 1: Preparing Artwork for the Web Optimize some images using the Save for Web dialog box.

Lesson 2: Slicing a Home Page Practice image slicing—dividing up areas of an image or a complete Web page layout into smaller, independent files Slicing is useful for: –Placing HTML tables accurately –Optimizing independent sections of an image or Web page –Creating smaller image files for faster download –Creating interactive effects, like rollover buttons

Summary Illustrator is about more than just drawing tools. It’s a resource for exploring the elements of visual design. It’s a resource to produce finished products that are suitable for print, Web, and multimedia.