• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Lab 7.1 Exercises

7.1.1. Experiment with Image File Formats

Visit your favorite Web page and right-click on a few graphics. From the popup menu, choose the Save Picture As option. There's no need to save the file to your hard drive, just observe the file types for the various graphics.

a) Do you notice any pattern between the types of graphics saved as GIFs and those saved as JPEGs?



Next, choose a graphic already saved on your machine in a format other than GIF or JPEG. Open the graphic in your graphics program and view the file's properties.


Answer: In general, GIFs are used for simple graphics, such as an icon or a line of text. JPEGs are generally used for more complex color-intense images, such as photographs.

GIF and JPEG were chosen as the standards to be recognized by most graphical Web browsers for a very simple reason: Both formats employ effective compression techniques that can allow for considerably reduced file sizes. On the Web, where file size determines whether a page will take seconds, minutes, or hours to fully load all of its associated data—images included—file size is obviously an important consideration.

Both GIF and JPEG are lossy formats, meaning that image quality will usually decrease as the rate of compression goes up and the overall file size goes down. However, because they use different compression algorithms, they compress different types of data with varying levels of effectiveness and loss.

b) What is the size of the file you chose?



Save the file in the GIF format and view the new file's properties.


Answer: This of course will vary depending on the image you choose.

We opened a BMP photograph that was 567 KB in size.
c) How has the file size changed in the GIF format?



Next, open the original file again and this time save it as a JPEG file. View the new file's properties.


Answer: The file size is sure to have decreased rather significantly.

In our example, the file size of the photograph went from 567 KB in size to 50 KB in size.

GIF, developed by CompuServe in 1987, is an 8-bit-per-pixel image format, meaning that it is limited to a maximum palette of 256 colors. GIF is somewhat less popular among graphics professionals, as high-resolution images such as photographs have a tendency to lose a substantial amount of quality when reduced to fit an 8-bit color palette (you probably noticed this in this example). On the other hand, if an image converted to GIF format already uses fewer than 256 colors, all extraneous color information is promptly discarded, potentially shaving off a sizable chunk of what would otherwise be wasted space. The GIF type most commonly used in Web design is technically known as GIF87a; the format features a number of offshoots such as GIF89a (animated GIFs) and some additional capabilities, such as transparency, that other formats such as JPEG do not support.

GIF uses a compression algorithm called LZW,[1] which, while rather ineffectual at compressing some types of images, is extremely efficient when applied to certain others. The impact of compression methods and algorithms will be discussed later.

[1] Named for A. Lempel, J. Ziv, and T. Welch.

d) How has the file size changed in the JPEG format?




Answer: Again, the file size is sure to have decreased rather significantly, probably more than the GIF.

In our example, the file size of the photograph went from 567 KB in size to 33 KB in size.

JPEG is the image format of choice among many graphical designers. Comparing it with GIF, it isn't difficult to understand why: JPEG files are capable of storing color information at up 24 bits per pixel, or in up to 16 million colors, and its compression technique is vastly superior to GIF when it comes to compressing high-resolution image data with a minimal loss of picture quality.

A full-color photograph converted to JPEG format can be up to 100 times smaller than the original file, although a 20:1 ratio is a more realistic expectation. High compression rates come at a price, however: Loss of quality can be significant in highly compressed files. Fortunately, most graphics programs that are capable of converting images to JPEG format also provide the ability to specify exactly how much compression will be applied, allowing careful users to create very small low-quality images, larger but clearer images, or any balance of size and quality in between.

Worthy of note is the fact that since any compressed image must be decompressed before it can be viewed, a highly compressed JPEG can be expected to take slightly longer to decode and display than a GIF (or a less-compressed JPEG). For the most part, though, this is unimportant; the time you're likely to save by offering a smaller file for download should more than make up for any additional milliseconds lost to the decoding process.

The Whole Truth

Technically, the JPEG files we know and love from the Web are actually a JPEG variant called JFIF, short for “JPEG File Interchange Format.” Several other common (and uncommon) file formats also originated as offshoots of the JPEG format, including such diverse file types as TIFF, the Macintosh PICT format, and an obscure format called SPIFF. However, since JFIFs are what most people are actually referring to when they talk about JPEGs, particularly as they relate to Web design, we'll continue to call them JPEGs here.

e) Is there a significant difference between the file size of the GIF and the JPEG file?



Visit the following Web page: http://www.unisys.com/unisys/lzw/.


Answer: It depends, but the JPEG file is probably smaller.

As you saw earlier, in our case, the GIF was 50 KB, while the JPEG was only 33 KB.
f) What is LZW and what is the issue with it?



Now, visit the following Web page: http://www.libpng.org/pub/png/pngintro.html.


Answer: LZW is the compression algorithm used by the GIF format. Patent and royalty issues surrounding the LZW algorithm threaten the continuing popularity of the GIF format. CompuServ holds the patent and its interest in potential infringement has grown with the popularity of the Web. As a result, the availability of graphical tools capable of generating GIF images is affected.

g) What are the three main advantages of the PNG image format over the GIF format?




Answer: Alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display).

As stated earlier, PNG (Portable Network Graphics)—pronounced “ping”—is a format likely to be of importance in the future but not yet widely supported by browsers. While the format has been around for several years and was intended as a replacement for GIF, renewed interest has been sparked by the LZW patent and royalty demands from CompuServ. In fact, the unofficial acronym for PNG has become “PNG's Not GIF.”

Quite impressively, PNG supports three main image types: truecolor, grayscale, and palette-based (8-bit). JPEG only supports the first two, and GIF only the third.

PNG has been a formal recommendation by the W3C (World Wide Web Consortium) since 1996. More information can be found at http://www.w3.org/Graphics/PNG/.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint