Optimizing Web Graphics

[Torkoz]

Optimizing Web Graphics

http://www.websiteoptimization.com/speed/12/


Graphics optimization is key for fast web page display. In this chapter you'll learn how web graphics formats work and how you can take advantage of their compression algorithms to minimize file size. Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs to varying degrees. Each has its own strengths and weaknesses. You'll realize the most savings in eliminating and replacing them with text and CSS, combining neighboring graphics, and reusing graphics with the same URLs.

Excluding network performance and hardware and software configurations, the size of your HTML "base" page and the number and size of your images and multimedia objects determines the display speed of your pages. The base page size determines the initial download speed of your pages, while the embedded content determines the total download time. Because images and multimedia make up over 50 percent of the average web page, it is important to pay careful attention to the number and size of your images.
Figures

    * Figures 12.1 and 12.2 - Correcting Levels after PhotoCD scan
    * Figure 12.3 - The JPEG compression algorithm
    * Figure 12.4 - Saving to a JPEG in Photoshop
    * Figure 12.5 - Better image sampling defines sharp edges in ProJPEG
    * Figure 12.6 - JPEG Wizard, a power tool for Windows
    * Figures 12.7 and 12.8 - Overlaying GIF and text over JPEG demo
    * Figure 12.9 - Full-color balloon quantized to 64 colors in PhotoGIF (with a dash of dithering).
    * Figures 12.10 and 12.11 - Transparency Gotchas
    * Figure 12.12 - Optimizing a sample web image - a toolbar
    * Figure 12.13 - Web Image Guru in action - smoothing a GIF in Windows

Summary

The key to optimizing web graphics is to minimize their size, number, and quality, and maximize cropping. Combine adjacent images and use client-side imagemaps instead. Substitute CSS-based rollovers for bandwidth-hungry image-based rollovers. Replace graphic text with styled text. Finally, to minimize HTTP requests, reuse images with the same URL. With all graphics, you can't go wrong if you do the following:

    * Eliminate and combine your images to minimize HTTP requests.
    * Convert graphic text into styled text.
    * Maximize cropping and minimize dimensions.
    * Use the right image format (JPEGs for photographs).
    * Use interlacing with care (avoid interlacing on smaller images and most PNGs).
    * When capturing photographs, use a stable platform, (tripod, image stabilization, or a Gyroscopic stabilizer)
    * Minimize noise, smear, and complexity.
    * Use weighted optimization to reduce less important areas and blur backgrounds (for JPEGs).
    * Minimize colors (bit-depth) for palette-based formats.
    * Use a high-quality quantizer on true-color originals and limit dithering.
    * Set your image resolution to 72dpi.
    * Specify the actual height and width of all images.
    * Use grayscale where possible.
    * Use thumbnails linked to larger images.
    * Experiment with different settings and programs.

Further Reading
Books

Compressed Image File Formats: JPEG, PNG, GIF, XBM, BMP
    By John Miano (Addison-Wesley, 1999). Boils down the specifications into understandable language. Focuses on JPEG and includes C code.
Designing Web Graphics 4
    By Lynda Weinman (New Riders, 2003). A great introduction to web design. It's not just about graphics.
PNG: The Definitive Guide
    By Greg Roelofs (O'Reilly, 1999). The ultimate reference for the PNG format, which includes some optimization tips for authors and programmers.
Web Designer's Guide to Graphics: PNG, GIF, & JPEG
    By Timothy Webster, Paul Atzberger, and Andrew Zolli (Hayden Books, 1997). Although somewhat dated, this full-color book shows you how to create quality graphics that download quickly.
Web Style Guide, 2nd ed.
    By Patrick Lynch and Sarah Horton (Yale University Press, 2002) for an excellent introduction to web graphics. See also http://www.webstyleguide.com/graphics/.

Graphics Software

There are too many tools to list them all here. The following list includes only tools with PNG support. Most of them support GIF and JPEG as well.

    * Converters
    * Editors
    * Viewers

The most popular of these are listed here:

    * ACDSEE
    * Fireworks
    * GIFWizard.com
    * IrfanView
    * JPEG Cruncher and GIF Cruncher
    * JPEG Wizard
    * Photoshop
    * PNGCrush
    * ProJPEG, PhotoGIF, GIFMation, and SuperGIF
    * Web Image Guru
    * WebPainter

Sites

DeskTopPublishing.com
    One of the oldest and largest resources for artists and web designers
Graphics.com
    News, reviews, and information on the graphics world

Products

CacheRight
    Effective caching of images will speed up site for repeat visitors and reduce server load. This tool allows developers to set caching policies for all page content at the header level (beyond META tags cache control).

Articles

A Basic Introduction to PNG Features
    By Greg Roelofs.
Adding Images to Your Site
    Information on scanning slides to PhotoCD and correcting images in Photoshop. By Philip Greenspun.
DEFLATE Compressed Data Format Specification Version 1.3
    By L. Peter Deutsch. The compression algorithm used in PNGs and ZIP.
The JPEG FAQ
    By Tom Lane.
Optimizing Animated GIFs
    For more details on optimizing animated GIF89as and tools.
Optimizing Web Graphics
    Tools and techniques you can use to shrink web graphics. Originally appeared in the December 1996 issue of Web Techniques. By Andy King.
PNG Specification 1.2
    By Glenn Randers-Pehrson and Thomas Boutell eds.
"A Universal Algorithm for Sequential Data Compression"
    Jacob Ziv and Abraham Lempel, IEEE Transactions on Information Theory 23, no. 3 (1977): 337-343.
Using Kodak Photo CD Technology for Preservation and Access
    A Guide for Librarians, Archivists, and Curators. From Cornell's Anne R. Kenney and Oya Y. Rieger
Web Page Design and Download Time
    Jing Zhi, CMG Journal of Computer Resource Management, no. 102 (2001): 40-55. Zhi, of Keynote Systems, found that for fast connections (> 128Kbps) after TCP slow start, download time is nearly linearly related to the number of packets sent, which is determined by the size of each file and packet size. Four or more equal-sized images downloaded faster than one large image due to browser multithreading. For slower connections, download time was dependent on total content size and the number of objects.