1 / 12

Mastering Image Optimization for the Web

Learn how to optimize images for fast loading, understand file formats, colors, compression, and slicing techniques. Enhance your web design skills with practical lessons in Illustrator.

donnawilson
Download Presentation

Mastering Image Optimization for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 12 Web Publishing

  2. 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

  3. 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.

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

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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

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

  11. 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

  12. 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.

More Related