Image Optimization

GIF Images

The CompuServe Information Service popularized the Graphic Interchange Format (gif) in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted gif for its efficiency and widespread familiarity. Many images on the web are in gif format, and virtually all web browsers that support graphics can display gif files. Gif files incorporate a “lossless” compression scheme to keep file sizes at a minimum without compromising quality. However, gif files are 8-bit graphics and thus can only accommodate 256 colors.

GIF file compression

The gif file format uses a relatively basic form of file compression (Lempel Ziv Welch, or lzw) that squeezes out inefficiencies in data storage without losing data or distorting the image. The lzw compression scheme is best at compressing images with large fields of homogeneous color, such as logos and diagrams. It is much less efficient at compressing complicated “photographic” pictures with many colors and complex textures.

Dithering

Full-color photographs can contain an almost infinite range of color values—gif images can contain no more than 256 colors. The process of reducing many colors to 256 or fewer is called dithering. With dithering, pixels of two colors are juxtaposed to create the illusion that a third color is present. Dithering a photographic image down to 256 colors produces an unpleasantly grainy image. In the past this technique was necessary to create images that would look acceptable on 256-color computer screens, but with today’s full-color displays there is seldom any need to dither an image. If you need a wider range of colors than the gif format can handle, try using your image editor to save the image in both jpeg and png formats (described below), compare the resulting file sizes and image qualities, and pick the best balance of file size and image quality.

Improving GIF compression

You can take advantage of the characteristics of lzw compression to improve its efficiency and thereby reduce the size of your gif graphics. The strategy is to reduce the number of colors in your gif image to the minimum number necessary and to remove colors that are not required to represent the image. A gif graphic cannot have more than 256 colors, but it can have fewer. Images with fewer colors will compress more efficiently under lzw compression. For maximum efficiency in gif graphics, use the minimum number of colors that gives you a good visual result.

Interlaced GIF

The conventional (noninterlaced) gif graphic downloads one line of pixels at a time from top to bottom, and browsers display each line of the image as it gradually builds on the screen. In interlaced gif files the image data is stored in a format that allows browsers that support this feature to build a low-resolution version of the full-sized gif picture on the screen while the file is downloading. Many people find the “fuzzy-to-sharp” animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the user a preview of the full picture while the picture downloads into the browser.

Transparent GIF

The gif format allows you to pick colors from the color lookup table of the gif to be transparent. You can use image-editing software such as Photoshop (and many shareware utility programs) to select colors in a gif graphic’s color palette to become transparent. Usually the color selected for transparency is the background color in the graphic. Unfortunately, the transparent property is not selective; if you make a color transparent, every pixel in the graphic that shares that color will also become transparent, which can cause unexpected results.

Adding transparency to a gif graphic can produce disappointing results when the image contains anti-aliasing. If you use an image-editing program like Photoshop to create a shape set against a background color, Photoshop will smooth the shape by inserting pixels of intermediate colors along the shape’s boundary edges. This smoothing, or anti-aliasing, improves the look of screen images by softening what would otherwise look like jagged edges. The trouble comes when you set the background color to transparent and then use the image on a Web page against a different background color. The anti-aliased pixels in the image will still correspond to the original background color. In the example below, when we change the background color from white to transparent (letting the gray web page background show through), an ugly white halo appears around the graphic.

When to use GIF compression

• Images with few colors
• Images with flat color
• Small icons
• Simple animations
• Simple images
• Line drawings
• Simple cartoons

Top of the Page

JPEG Images

Another graphic file format commonly used on the web to minimize graphics file sizes is the Joint Photographic Experts Group (jpeg) compression scheme. Unlike gif graphics, jpeg images are full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colors.

jpeg images are used extensively among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality and color fidelity is important. A form of jpeg file called “progressive jpeg” gives jpeg graphics the same gradually built display seen in interlaced gifs. Like interlaced gifs, progressive jpeg images often take longer to load onto the page than standard jpegs, but they do offer the user a quicker preview.

jpeg compression uses a sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression. You can choose the degree of compression you wish to apply to an image in jpeg format, but in doing so you also determine the image’s quality. The more you squeeze a picture with jpeg compression, the more you degrade its quality. Jpeg can achieve incredible compression ratios, squeezing graphics down to as much as one hundred times smaller than the original file. This is possible because the jpeg algorithm discards “unnecessary” data as it compresses the image, and it is thus called a “lossy” compression technique. Notice how increasing the jpeg compression progressively degrades the details of the image. The checkered pattern and the dark “noise” pixels in the compressed image are classic jpeg compression artifacts. Note the extensive compression noise and distortion present in the image below, particularly around the leading edge of the fish’s head.

Save your original uncompressed images!

Once an image is compressed using jpeg compression, data is lost and you cannot recover it from that image file. Always save an uncompressed original file of your graphics or photographs as backup. If your digital camera produces jpeg images, set aside the “camera original” jpeg files and work with copies when you edit the files for web use. Each time you save or resave an image in jpeg format, the image is compressed further and the artifacts and noise in the image increase.

When to use JPG compression

• Still images only
• Real-world images like photos
• Complex coloring
• Shading of light and dark

Top of the Page

PNG Images

PNG (Portable Network Graphics) was created to essentially replace, or at least improve upon the GIF format. PNG uses the DEFLATE compression method—the same algorithm used in zip and gzip. PNG is a lossless compression. Because of this, the PNG format tends to result in larger image sizes than JPEG when used for photographic type images. When used for line art type images, PNG results in much smaller file sizes than JPEG and almost always smaller sizes than GIF.

Unlike GIF, PNG is the same as JPEG in the respect that it is a single image format—meaning PNG doesn’t support animation. However, it does support a major advantage that neither JPEG or GIF support: alpha transparency. Pixels in a PNG image could be 50% transparent as opposed to the GIF format which would require those pixels to be either 100% transparent or 100% opaque. As you can imagine, this would allow for better blending and smoother graphics than GIF. PNG also implements several other improvements over the GIF format, but they aren’t necessary to get into.

Needless to say, PNG is a much better format to use than GIF in almost all respects with the exception of very small files (for example in background patterns). The PNG format drew early fire from web-designers as not being compatible with some older web-browsers.

As you probably know, there are two main types of PNG.

• PNG8 (8-bit)—essentially the same as a GIF in terms of color limitations (256 colors max) but allows for alpha transparency
• PNG24 (24-bit)—allows for a much broader range of colors.

When to use PNG-8 compression

• Images that involve alpha transparency
• Icons
• Images with few colors
• Images with flat color
• Simple images
• Line drawings
• Simple cartoons

When to use PNG-24 compression

• Images that involve alpha transparency
• Still Images
• Photography

Top of the Page

Exercise

Your task is to optimize ten images for web and link to them into the HTML below. Choose the images to compress from this Source Files.

• Use each of the four compression methods more than once
• For each image, note the compression method chosen, the file size prior to compression and the resulting file size
• Be sure that your images are in RGB color space
• Be sure that your images are 72ppi
• Reduce the width of your images to 600px if they are larger than 600px
• Do not enlarge the image if it is less than 600px wide

Top of the Page