Web Design graphic file format comparisons.

site map
Not Quite Dvorak

Graphic Comparisons

All graphic files are not created equal (especially where the web is concerned). If you don't believe me compare the following photos. Compare the compressed images in their own browser windows. In order to build your web site in a way that takes advantage of the graphic nature of the web, requires understanding how to convey your message on a page which loads in a suitable period of time to ensure your site's visitors will want to "stay around for more."

(The photo used for this comparison has not been retouched. Hover your mouse over the thumbnail images to see enlarged view of each file size. Note the time it takes for your browser to resolve these images.)

This image is a 64 (kb) kilobyte file. There is lots of detail and good color balance. However, this single Image file exceeds the size many considerable optimal for a standard web page!

This file is half the size of the jpg image above. Notice that there is little discernable loss of detail and color. Still, at 32K, the file is too big for most basic web designs.

Comparing this file to the others, you may feel that this offers an acceptable balance between file size and image quality.

This file is just 8kb in size! Notice the substantial loss of detail versus the 16kb. This loss of detail may be unacceptable in many circumstances.

There are many factors beyond simple file size involved with the selection and optimization of graphics for use on your web site. The number of graphics included on a given page, the physical pixel size of each graphic and more influence the speed of the total web page's load time and overall visitor satisfaction.

The type of graphic file also plays a critical role in determining the overall quality of your site's graphics. While the Joint Photographers Experts Group or JPG (typically pronounced, "Jay PEG") files are the most ubiquitous graphic file type used on the web today, it is not ideally suited for every situation. This file type is "lossy," the more you optimize an image with this format, the greater detail lost. While the mechanics of this compression algorithm aren't critical to your general understanding, the realization that this file format can create "fuzzy, indistinct," results is worth understanding.

Another format often used on the web is the Graphics Interchange Format or GIF (pronounced with a hard "G"+IF, although you may here this file format incorrectly pronounced with a soft g, as in "jif" by some) is a lossless compression format which is limited to 256 colors and therefore is well suited for illustrations, logos and other non-photographic material.

A third format, Portable Network Graphics or PNG (often pronounced, "ping") is also supported on the web by some but not all currently used browsers. This format offers improved lossless compression relative to a GIF file and permits image editing without degradation of image quality and other benefits.

Gaining a basic understanding of image formats and the general differences between a traditional photo which might be used in traditional print publication and what is needed to make your web site successful, will benefit you and your web developer. Each of these formats, along with a handful of variants, have suitable and appropriate uses. Finding a web site developer or designer who understands when to use these formats to effectively get your message across, will improve the chances of developing a site which will satisfy yourself and your web site visitors.

return to top

PCMG Consulting
7252 Highway 70 South #1403
Nashville, TN. 37221
Toll Free: 866.646.7472
615.476.3770
Fax: 615.646.7472