The two most common graphic file formats on the Web at this time are GIF and JPEG. Another 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 (and a couple of others) because it is a common format for scanners and a few digital cameras.
GIF (pronounced jiff or gif) files are excellent for graphics that do not have many colors.
The format was developed by Compuserve for the Web. GIF stands for Graphic Interchange Format.
It uses a lossless compression algorithm called LZW (named after its ceators: Lempel, Ziv, and Welch). All data is preserved with this format.
GIF files support transparency, interlacing (fade-in), and simple animation (though multiple frames).
GIF files store color information as Indexed Color. Each unique color in the file (up to 256) takes up one spot in a color index. If a file with many colors (such as a photograph) is converted to Indexed Color, the graphics application will request a method to select the number of colors to use (for instance through a certain type of Palette or dithering the colors. Fewer colors translate to smaller files which load faster.
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.
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 GIF files.
JPG (pronounced jay-peg) files are great for images with many colors such as photographs.
JPG (or JPEG) is named after its developers, the Joint Photographic Experts Group. It is a lossy compression scheme best suited fo photographs. When a file is saved in JPG format, pixels are actually discarded as the file is compressed. The JPG compression algorithm examines groups of pixels for variation and then stores the infomation about the pixels rather than all of the pixels themselves.
Photographs compress well with the JPG format. However, images with large areas of flat tints or vignettes may have variations or patterns introduced by the compression scheme.
When saving a file in JPG format, graphics applications often allow a selection for the amount of compression desired. The more compression used, the lower the image quality.
Because data is lost when the JPG format is used, image editing should be done with a file format that supports millions of colors and lossless compression (such as a TIF or PNG). Keep a copy of the original image in another format in case scaling, cropping, rotation or color correction is needed.
PNG (pronounced ping) stands for (officially) Portable Netwok Graphics format. Unofficially PNG stands for "PNG's Not GIF").
PNG files use a lossless compression scheme with a nonpatented compression algorithm.
PNG files support:
This format fairly new, but is still not extremely popular despite having the support of the W3 Consortium (one of the primary groups that plays a large role in setting the standards for the Web).
PNG is a feature-rich format, well thought through, but is not widely supported by (and may crash) older browsers.
TIFF (pronounced tiff) stands for Tagged Image File Format. It is an older format that has its strengths in printing and publishing especially for scanned images.
TIF files are not generally supported by browsers, but are often encountered in different graphics-intensive industries. They are likely to be encountered when converting printed publications to the Web or when dealing with service bureaus, prepress houses or ad agencies.
There are a variety of ways to save TIF files as they support a variety of color modes (incliding RGB, Indexed, CMYK, grayscale and bitmap) as well as optional LZW compression.
For the record, all of the file formats discussed involve raster data. This is essentially a hexadecimal dump of data which defines the image. There is also header information which helps to define the image to various applications and may also contain a very low resolution preview.
Also for the record, it should be noted that there are raster and vector graphics. Vector images are object-based instead of pixel-based. Lines and shapes are defined by instructions (usually PostScript commands) instead of hexadecimal dumps of data. Vector files do have their place in Web design. There may be cause to convert EPS (Encapsulated PostScript), CMX, DXF, or WMF file to complete your site.
And finally, PDF (Portable Document Format) files are also growing in popularity and are likely to become commonplace as institutions like the Internal Revenue Service and the banking industry embrace these formats for downloading forms for display and printing.
|Supported in Most Browses||Yes||Yes||Not Yet||No|
|Compression||lossless (LZW)||lossy||lossless (not proprietary)||lossless (LZW optional)|
|Interlacing (fade in)||Yes||Yes (Pogessive)||Yes||No|
|Pronounced||Gif or Jiff||jay-Peg||Ping||Tiff|
|Stands for||Graphic Interchange Format||Joint Photographic Experts Group||Portable Network Graphics||Tagged Image File Format|
|Best Use||Images with little color variation||Photographs for the Web||Pretty much anything!||Most anything, especially pre-JPEG'd scans|