Advanced: Of Images and Image Formats

While it is embarrassing to me, I only recently stumbled onto some important details that have made creating images intended for web pages much easier. While many people know that web browsers support a few different image file formats they may not know what makes one format better or worse than another. Knowing the specifics of a format can help you to design the graphics for your web pages to be the perfect blend between fast loading, and of acceptable visual quality. Operating from the perspective that "good graphics" should both download quickly and render at the highest possible quality is an integral part of any self respecting web developers tool kit. While these two ideals exist at opposite ends of the graphics spectrum it is almost always possible to reach an acceptable compromise; So, in addition to describing the specifics of the image formats supported by web browsers we will propose some methodology for approaching graphics in general.

Table of Contents
Supported Image Formats
The GIF Format
The JPG Format
The PNG Format
Picking a file format

Supported Image Formats

To start off the discussion let's revisit what a Web browser can do in terms of graphics. I used the latest offerings of Internet Explorer and Navigator as the baseline for my examination. Most web developers know that the two most common file formats are JPG (pronounced "J-peg") and GIF (pronounced by some with a hard "G" as in "Girl" and pronounced by others with a soft "G" as in "Gel"). Both of these formats enjoy very solid support from "the big two" and from most of the less well known browsers too. A relative new comer to the Web is the PNG format which combines some of the best features of the GIF, and JPG formats under a single umbrella. Another format which is seldom used is BMP, which is supported by Internet Explorer, but not Navigator. The differences between these supported formats is how they handle color palettes and picture encoding. At the one end maximum compression gives excellent load times and small filesizes but sacrifices image quality to achieve these effects. At the other end large filesizes and slower load times generally mean much better original reproductions. Thrown in with these formats come some features in the form of niceties, such as support for transparency, and support for multiple image animations in a single file. The following examples use the exact same image but saved in four different file formats, notice the difference in filesizes listed below each picture, in contrast to the quality of the image.

GIF Filesize: 1.47K	JPG Filesize: 4.75K	PNG Filesize: 1.44K	BMP Filesize: 5.01K

Navigator users will likely notice that the BMP picture does not appear and instead is displayed as a broken image graphic. This is because Navigator does not support the BMP format. It can however be argued that support for BMP is unnecessary because a BMP can be converted to a smaller, compressible format with hopefully minimal image degradation. For the graphics enthusiast though, the BMP format, does the best job of storing a picture in a file which most closely represents how it was originally rendered; This is due to the fact that there is -no- compression involved, instead the data which comprises a picture is stored as is into a file, no filtering, no compression encoding, almost just a straight dump of the graphic into a file. (Almost like making a carbon copy of memory, which holds the displayed picture, onto a disk for storage beyond the point of turning the computer off, or moving onto another web page).

An important detail which is illustrated by the pictures is that of transparency. If you are using Internet Explorer 5.x or higher then the JPG and the BMP file will both have a blue background behind the dogs head. This is because neither BMP, nor JPG offers transparency mapping. If you are using Navigator 4.x both the JPG and the PNG will have the blue background (BMP would too except that as stated earlier, it's not support by Navigator 4.x). In the case of PNG, the format does offer transparency support but transparency support for PNG is not built into Navigator 4.x*, we will describe the specifics in greater detail later. So far transparency on the Web is implemented only in palette based color schemes. For our purposes, a palette based color scheme is one which has a specific number of colors arranged in an index such than each number represents a different color. For example, using a standard VGA palette, index 0 is black, index 1 is blue, index 2 is green, etc. Palette based formats commonly support as few as 2 colors, up to 256 colors, beyond that they become unwieldy. You have likely encountered 16 color palettes (if you use Windows, many of the icons are 16 color palette based), and 256 color palettes (used in many games and Internet graphics). The PNG format adds a newer type of transparency support called alpha-transparency which will be covered in greater detail.

* While there is no Navigator 5, Navigator 6 will have support for "PNG" transparency.

The GIF format

GIF is an acronym for Graphics Interchange Format. The GIF format has been around at least as long as the web has been graphical, and was popularized by CompuServe early in the history of the Internet. It is a palette based format, supporting 256 colors. This is known as an 8-bit format because as it turns out considering every possible combination yields 256 possibilities. GIF supports binary transparency (meaning that one of the 256 colors is reserved as "invisible", so when the picture is drawn by a browser the "invisible" color is not drawn, instead allowing what lies beneath the graphic to show through). GIF is a compressed format and uses a lossless compression scheme, meaning that no data is lost in favor of file size during the compression process. The GIF format also allows multiple pictures to be stored in a single file, as well as some additional code defining rules for how long to display each of the pictures, and how often to loop through the pictures. GIF also supports interlacing to a limited degree, meaning that an image doesn't have to finish downloading before it can begin to be drawn. However, the interlacing is not consistent across platforms. One problem that GIF has suffered from is that it's compression scheme relies on LZW algorithms, the patent rights to which belong to Unisys who has recently called in the patent, requiring licensing from anyone who wants to create software to read or write GIF files. This has sparked outrage on the part of many Internet enthusiasts who see the Internet as an open source project where sharing and progress is the governing rule rather than corporate profits. (Idealism knows few boundaries) The PNG format was formalized shortly after this began in order to provide the web with not only an open source alternative to GIF but also a superior alternative to the dated GIF format. While the PNG format struggles for the support it deserves the GIF format continues to dominate because of the early support offered it by the browser makers and the software packages used to create Internet graphics. Click here for more information about the patent issue. Here are some examples of GIF graphics illustrating transparency, animation, and a comparison with JPG.

 

Transparent GIF Filesize: 1.47K	Non-Transparent GIF Filesize: 1.46K	Animated GIF Filesize: 2.18K
JPG Filesize: 4.75K	256 Color GIF Filesize: 14.1K	16 Color GIF Filesize: 5.94K

The JPG format

The JPG format is short for JPEG (shortened due to the DOS 8.3 filename extension limitation). JPEG is an acronym for Joint Photographic Experts Group. JPG has been around for more than 10 years gaining popularity with wide use and browser support on the Internet. The format supports 24-bit color (16.7 million colors). JPG does not support transparency, but it is a compressed format which works well with photographs which don't usually use transparency anyway. JPG supports varying levels of compression which ultimately compromises lower image quality for smaller file size, or higher image quality for larger file sizes. JPG uses a lossy compression scheme which throws away data in favor of smaller compression sizes. The format is excellent for graphics with varying colors and textures but is terrible with large stretches of the same color, this may change with the JPG 2000 specification due shortly. Use JPG when you have a photograph or a file that must be as small as possible where image quality is not important. Here are some examples using the JPG format. JPG does not support multiple images within a single file either so animations are not possible with JPG. MPEG (MPG) was intended to handle "moving pictures" which found their primary expression in movies. It's likely that graphic animations as they exist on Web pages today had not even entered the human psyche at the time JPG was formalized.

JPG Highest Compression Lowest Quality Filesize: 1.08K	JPG Lowest Compression Highest Quality Filesize: 17.8K	GIF 256 Color For Comparison Filesize: 14.1K

The PNG format

PNG made it's big debut in response to the patent issue with GIF. PNG is an acronym for Portable Network Graphic, and is pronounced as "ping". According to the specification abstract, "the PNG format provides a portable, legally unencumbered, well-compressed, well-specified standard for lossless bitmapped image files." Unlike GIF and JPG, PNG is designed to handle multiple color schemes, supporting anything from 8-bit (256 color) up to 48-bit ("true color") schemes. PNG supports a newer type of transparency called "alpha transparency" which is designed to map levels of opacity rather than simply specifying that a certain index is drawn or not drawn. While this idea makes for some very interesting image effects the actual implementation of alpha transparency support has been painfully slow. To date no graphic program, or web browser supports alpha transparency, instead reverting to binary transparency like the GIF format, (a relatively graceful deprecation but paling in comparison to alpha transparency). As noted in the specification quote, PNG uses a lossless compression scheme which works better than the scheme used by the GIF format. You may have noticed the filesize differences in the comparison between GIF and PNG images at the beginning of this article. PNG does not support multiple images in a single file, so animations are not possible with it. However, the MNG format (acronym for Multiple Network Graphic, pronounced "ming") is supposed to provide this additional functionality. PNG also provides a mechanism for gamma correction which means that images should appear with the same or very similar intensity and coloring on any platform, rather than for example being really light on one computer/graphics combination and really dark on another. Interlacing is an area which has been improved on as well, PNG provides two-dimensional interlacing which speeds up the rendering of a PNG graphic. This means that instead of having to wait for the entire image to be downloaded, decompressed by the browser and then flashed onto the screen in a single moment of glory, a PNG graphic can be rendered progressively as it is being downloaded giving a visitor some idea of what they are waiting to see. PNG has been waiting for its adoption on the part of web browsers and graphics programs for some time. Many graphics programs now offer at least limited PNG support, and some are better than others. Macromedia Fireworks, and JASC Paint Shop Pro are two that come to mind. Browser support is coming along as well with PNG supported (with binary transparency) in Microsoft Internet Explorer 5.x and perhaps better under the long anticipated Netscape Navigator 6 (there is no Navigator 5). Even Navigator 4 will render PNG images without a plug-in though without any transparency support.

 

PNG (256 Colors) Filesize: 1.47K	GIF (256 Colors) Filesize: 1.46K	JPG (16.7M Colors) Filesize: 17.8K
PNG (256 Colors) Filesize: 11.6K (16.7M Colors) Filesize: 32.5K	GIF (256 Colors) Filesize: 14.1K	JPG (16.7M Colors) Filesize: 5.94K

Picking a file format

Combining the information from above into an approach to choosing a graphic format makes the information far more useful. Often the best approach to creating graphics is saving the completed graphics as BMP which will preserve the image for future editting without any loss to compression or color reduction in order to fit it into a 256 color palette. This can be very helpful when you need to revisit an image in order to make changes. Once you have created your working copy, choose a format based on which requirements from the list below are most important and save it to use as the live copy on your web site.

• If your image will allow the background color to show through in places then you must use GIF or PNG.
• If your image is a photograph then with few exceptions you are best off using JPG.
• If the smallest possible filesize is the most important factor then you should use JPG.
• If you want to create an animated graphic then you must use GIF.
• If your image has large areas where the color is unchanged then GIF or PNG will best preserve them.

Considering the current landscape that exists on the Internet, the breakdown really comes down to JPG is best at small sizes and photographs. GIF is best for animations and transparency. Though PNG will offer a superior alternative to GIF in the long run, its currently best for enthusiasts who specifically want a GIF alternative now, or authors writing applications to create or edit graphics who want to avoid the legal encumbrances associated with GIF.

Back to Build Your Site
Back to Table of Contents