[Images]Imagine That! (Page 2 of 5)


Gaphic File Formats

The two most common graphic file formats on the Web at this time are GIF and JPEG. The new contender for Web dominance, the PNG format, looks quite promising and software to support the new format is appearing on all platforms. I also discuss the TIF format because it is a common format for scanners and a few digital cameras.

There has been quite an upoar in the Web community about graphic file formats over the past few years. Early in 1995, Unisys and CompuServ announced that applications using the GIF file format would have to pay royalties to Unisys because Unisys developed the patent on the LZW compression scheme used in the GIF format.

Many graphic file formats use different compression schemes to reduce file size. JPEG uses lossy compression while GIF and PNG use lossless compression. TIF files can use an optional LZW (lossless) compression scheme.

Another big issue besides compression is the color space a file uses. Files can be indexed, RGB, CMYK, greyscale, or bitmap, to name most of the different modes. Different software offers different options and not all graphic editing software has all of the color spaces available. Buyer beware!

The third consideration is resolution. All of the file formats discussed involve raster data which is essentially a hex dump of data with a header which only makes sense to applications that look at the header and read the data. Files can be different resolutions which essentially means that higher resolutions take more space on a disk and a longer time to load than a lower resolution file. Web graphics appear fine at 72 dots per inch (dpi).

Because of my background in the digital prepress world, I feel my gut wrenching me to include the information that the converse of raster files are vector files. These are object-based instead of pixel-based. Vector files do have their place in Web design. You may need to translate EPS (Encapsulated PostScript) files from a vector-based application or pull a CMX file from a CAD/CAM application to complete your site. There is more on Raster and Vector files further on.

All of the fomats are platfom independent with the exception that the byte order for the preview of the TIFF format can be different between IBM and Macintosh systems. Some previews are specifically for IBM or Mac. Since I reccommend using this format only for saving original scans (because there is no loss of data though compression or color palette reduction), this shouldn't be a problem. Each of the formats is futher discussed below.

Quick Descriptions Of Graphic File Formats

If you are not familiar at all with these formats, here is a *brief* overview:
Graphic File Format Attributes
Feature GIF JPEG PNG TIFF
Supported in Most Browses Yes Yes Not Yet No
Max Colos 256 Millions Millions Millions
Compression LZW (lossless) JPEG (lossy) (Not finalized) lossless lossless (LZW optional)
Tansparency Yes No Yes No
Interlacing Yes Yes (Pogessive) Yes No
Best Use Images with little color variation Photographs for the Web Pretty much anything! Most anything, especially pre-JPEG'd scans
Gamma Correction No No Yes NO
Comments Yes No Yes No


Graphic File Format Samples
Graphic Description
Image info:
  • File size: 17k
  • Resolution: 72 dpi
  • Color info: 8-bit Indexed Color Space
  • Show me examples of:
[GIF Image]
Image info:
  • File size: 17k
  • Resolution: 72 dpi
  • Color space: 24-bit RGB Color Space
  • Show me an example of:
[JPEG Image]
Image info:
  • File size: 34k
  • Resolution: 72 dpi
  • Color space: 24-bit RGB Color Space
  • Show me examples of:
[PNG Image]
Examples Of Each Type
[PNG Image]
File type: PNG
File size: 119k
(compression not yet implemented)
[JPEG Image]
File type: JPEG
File size: 51k
Image quality: Excellent
Compression: Fair
[JPEG Image]
File type: JPEG
File size: 17k
Image quality: Good
Compression: Good
[JPEG Image]
File type: JPEG
File size: 17k
Image quality: Fair
Compression: Excellent
[GIF Image]
File type: GIF
File size: 34k
256 Colors
[GIF Image]
File type: GIF
File size: 26k
128 Colors
[GIF Image]
File type: GIF
File size: 26k
64 Colors
Notes:
  • The PNG file displays cleanly
  • The JPEG file with excellent image quality begins to introduce a pattern in the sky (mostly flat tint). The file with fair image quality is "pixelatd"
  • The GIF files perform well in this example, but notice the differenct in the sky in the upper right corner. As number of colors decrease, so does quality of image

GIF

GIF files have a couple different formats. The early version is the GIF87 format and the newer format is GIF89a. Keep this in mind when looking for utilities or filters to do conversions on you GIF files.

GIF files are excellent for simple graphics (like the ones in these Web pages!). The way a GIF file stores its color information is referred to as Indexed Color. Each unique color in the file (up to 256) takes up one spot in the index. If you have a file with a lot of colors in it (such as a photograph), and try to convert it to Indexed Color Model, the software asks you to select the number of colors you would like to use and may have other options like the type of Palette or Ditheing you would like to use. I can only suggest that if you are going to convert files to GIF format, it is best to experiment.

One thing to keep in mind, however, is that the fewer colors you use, the smaller (and faster) your files will be when they are complete. For instance, in these pages, the images used in the menus are all very similar. When I was creating them, I put them all on one page in PhotoShop when they were in RGB mode. When I converted to Indexed Color Mode, I forced all of the images to have a small index of colors (I think it was 19 or so). If I had done the files separately, they would have used many more colors because some pixels here or there would have a slightly different tint because of the angles of the shading in the 3-D package used to create that effect.

One of the fun things to do with GIF files is simple animation. If you've ever watched cartoons on a VCR using the "STILL" feature and advanced the tape slowly one frame at a time, you can get a feeling for how to draw pictues for animated GIF files. I have created some examples which will appear in the top left window of your browser:
GIF files also support transparency and interlacing

JPEG

When you save a file in JPEG format, you are actually throwing some of the data away.

The JPEG compression algorithm examines groups of pixels for variation between them and then stores the infomation about the vaiation rather than all of the pixels themselves.

Images with lots of pixel variations, such as photographs work well with JPEG. Images with large areas of flat tints may have variations introduced into them by saving the file in JPEG format (as in the sky in the table above).

When saving a file in JPEG format, if the software allows, you may be able to select the amount of compression you want. The more compression you get, the less image quality you get (that's the lossy part).

When editing JPEG files, it is important to remember that each time the file is opened and saved out again data is lost. If a JPEG files needs to be edited, go back to the original, best saved as a TIF format and work from that to prevent the quality of the image from degrading.

JPEG files can be progressive

PNG

This format is still under development but seems certain to take over as the dominant format. It is a feature rich format that is well thought through. The format also has the support of the W3 Consortium, one of the primary groups that plays a large role in setting the standards for the Web.

Unfortunately, the format is still in its infancy and is not yet popular, but that is changing.

TIF

TIF files are great for bitmapped images with millions of colors. TIF is one of the most popular formats for scans.

Note: The TIF format is cross-platform , generally between Macintosh & IBM, but the byte order of the preview can be different for each platform. So when placing an image in a layout program, the image does not appear correct unless it has been saved properly on the platform you are working on. This is generally not a problem in shops where there is just one platform, but once you introduce a cross-platform server or start sending files to service bureaus or printers, it can make things interesting

Again, the TIF format is not popular in most Web browsers.
[Top] [Back] [Next] [Main Menu] [Index]
[ Basics ] [ Text ] [ Images ] [ Links ] [ Tables ] [ Forms ]
©Ken Kaleta 1997, 1998, 1999