You must log in to this site in order to participate in the forum.
Here is an example of a graphic ideal for the GIF format:
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.
"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).
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
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 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.
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 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.
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 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)|
PNG: Dark brick appears
to be of uniform color
JPG: Dark brick appears
to be of uniform color
PNG: Dark bricks has pixels of beige,brown and even blue
JPG: Colors averaged into rectangles and blues eliminated.
Baker, G., & Bixler, B. (1990). Computer-assisted design techniques for low-literate adults. Computers in Adult Education and Training, 2(1), 18-27.
Bower, G.H. (1970). Organizational factors in memory. Cognitive Psychology, 1, 18-46.
Fryer, B. (1997, September). Caught in the Web? Inside Technology Training.
Duchastel, P. C. (1979, November). Pictorial illustration in instructional texts. Educational Technology.
Duchastel, P. C. (1978, November). Illustrating instructional texts. Educational Technology.
Dwyer, F. M. (1978). Strategies for Improving Visual Learning. State College, PA: Learning Services.
Hall, B. (1997). Web-based training cookbook. New York: John Wiley & Sons, Inc.
Leurs, L. (2001) JPEG Compression Algorithms. Accessed Jan 15 2006 from
Lynch, P. & Horton, S. (1997). Web Style Manual, 2nd ed. Yale Center for Advanced Instructional Media. Retrieved May 14, 2003, from
Rieber, L. (1994). Computer, graphics, and learning. Iowa: Brown and Benchmark.
Roelofs, Greg (1996-2006) A Basic Introduction to PNG Features Accessed Jan 15 2006 from
Web Accessibility Checklist (2003). Retrieved May 14, 2003, from Department of Information Technology Services of Penn State's web site http://tlt.its.psu.edu/suggestions/accessibility/check.html