Penn State Learning Design Community Hub

The Best Choice .... according to experts

1. Use the GIF format simple illustrations with large areas of solid color. "The GIF format allows you to pick colors from the color lookup table of the GIF to be transparent. Usually the color selected for transparency is the background color in the graphic" (Lynch & Horton, 1997).
2. Use the JPEG format for photographs, watercolor images, and pencil or charcoal drawings (Lynch & Horton, 1997).
3. PNG (Portable Network Graphics) is a newer open-source format supported on newer browsers. Use these in the same situation you would use a GIF image. Like GIFs, PNGs should be optimized for the Web. 
   
   Browsers which support PNG
   
   • Firefox
   • Opera
   • Mozilla
   • Safari
   • Internet Explorer 7

Rationale

Graphic Interchange Format (GIF) file format

• All graphic Web viewers support the GIF format for inline images.
• Images of simple illustrations and diagrams visually appear cleaner in a GIF format rather then JPEG.
• GIF supports transparency and interlacing.
• GIF can only support 256 colors (suseceptible to dithering in photos)
• Tip: Reduce the total colors (e.g. 4,8,16,64) to reduce file size. For instance the image below may need only 4 or 8 colors.

Here is an example of a graphic ideal for the GIF format:

Joint Photographic Experts Group (JPEG) file format

• Huge compression ratios are possible, for faster download speeds.
• Gives excellent results in most photographs and medical images.
• Supports full-color images (24-bit "true color" images).
• Converting to JPG can mean losing quality over the original
• Tip: When working with photos, save the original in another format (e.g. PNG, PSD, TIFF) and create a copy in JPG (medium compression is usually the best choice)

Below is the same image in JPEG vs GIF formats. Both are of a metalic point, but notice how the JPG version appears smoother because it can show more color transistions.

JPEG	GIF

Portable Network Graphics (PNG) file format

• Open source (unlike GIF)
• More options for transparency (alpha channel)
• "Native" format for some systems (e.g. Macintosh, Fireworks)
• PNG Export may give better results than GIF export in some applications.
• Can support full-color images, 24-bit "true color" images, although JPEG files are still smaller.
• Can be compressed like a GIF file, so are good formats for simple illustrations
• Utilities may not exist in older versions of graphics programs (e.g. older versions of Photoshop)
• Not visible in very old browsers, display may be buggy except in very new browsers

Browsers which support PNG

• Firefox
• Opera
• Mozilla
• Safari
• Internet Explorer 7

Basic information

Accessibility Alt Tags

"If you use images, use the ALT tag to provide a clear text alternative. Descriptive ALT text should let the user know what an image is and the purpose of that image. Further considerations when using images" ("Web Accessibility," 2003).

Transparency in Web Images

The ability to make one color (e.g. the background) be designated transparent or invisible on the Web. In theory, transparency allows the same image to be used across different colored backgrounds.

See example below using a PNG Penn State mark. Notice that the lion always remains white, but the insides of the letters in "PENN" and "STATE" change color. The lion is not transparent.

Penn State Mark with Transparent Background on 3 Background Colors

Pale Blue	Gray	White

• The modern GIF file format allows designers to pick one color in the image to be transparent.
• The PNG-24 format allows colors to be partially transparent, but display is not supported in older browsers like Internet Explorer 6.

Note: Transparency can be set in programs like Photoshop when converting or exporting files for the Web. See the user instructions for each program for details

Interlacing

Interlacing allows graphics to partially download and "resolve" themselves to gradually show more detail while the download completes. See an interlacing demo from Willem van Schaik.

• Non-interlaced GIF/PNG graphics downloads one line of pixels at a time, and Web browsers display each line of the image as it gradually builds on the screen.
• Interlaced GIFs/PNGs load onto the viewer's screen all at once as a fuzzy image and then gradually becomes sharp.

This "fuzzy-to-sharp" animated effect of interlacing is visually appealing and provides the viewer with a quick preview of the full image. However, interlacing does not decrease downloading times.

Note: Interlacing is not available in JPEG.

Compression

Compression refers to a process of reducing file sizes for Web images. The compression algorithms for GIF/PNG differs from that of JPEG. The result is that JPEG can be more prone to quality loss even though it is better suited for photographs.

GIF/PNG Compression (Page Tutor Com)

Older formats typically specify the color for each pixel, but if many pixels in a row have the same color, the information can be redundant. GIF compression and the similar GIF compression can take a block of pixels of the same color and just specify the color and how many pixels are affected. GIF can also reduce the possible number of colors in a file to just 2,4,8,16,32,128 or maximum 256. The fewer colors encoded, the smaller the file. PNG files add an alpha "transparency" channel but structure it in blocks like GIF color.

For instance, the GIF image below of blue and gray squares has been indexed for only three colors (blue, gray, black outline).

Assuming each colored square is 10 pixels by 10 pixels and that black border is one pixel wide, the representation of the pixel blocks in the first and second rows can also be simplified as below. Note that the simplification is an approximation, not "exact" GIF code.

As you can see the bigger the block of color, the less information needs to be in the file and the smaller the size. An image with many color changes between pixels (e.g. photos and gradients) will not compress as much

JPEG Compression (Leurs 2001)

JPEG compression works by 1) averaging color over small blocks (may cause loss of subtle details) and 2) emphasizing brightness values over color values (causing subtle color changes). In most cases, the color changes are acceptable over the Web, but may be problematic if you want to print an image.

The example below compares the photo of a dark brick in uncompressed PNG vs. JPG, at both normal view and closeup. Notice that in normal view, the brick appears to be of a uniform color, but in closeup, each pixel changes color. In the JPEG version, the pixels have been "averaged" to more uniformly colored blocks.

	Uncompressed PNG	JPG (Low)
Normal	PNG: Dark brick appears to be of uniform color	JPG: Dark brick appears to be of uniform color
Closeup	PNG: Dark bricks has pixels of beige,brown and even blue	JPG: Colors averaged into rectangles and blues eliminated.

Additional Links

• JPEG Committee Home Page
• Portable Network Graphics