Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by


Last updated Oct 17, 2003.

GIF is not the only file format we can use for graphics. The other is called JPEG (pronounced "jay-peg"), which stands for Joint Photographic Experts Group, the name of the standards body that created the standard. Its file extension is JPG or JPEG (*.jpg, *.jpeg). Like the .gif extension, it tells the computer what kind of file it is for proper display.

Also similar to GIF, JPG compresses files, which helps decrease graphic loading times. Its compression differs from GIF in that its image is not exactly the same as the image you started with. In other words, it loses some definition. But this is not necessarily a bad thing because it is usually not visible to the human eye. This is called "lossy" compression because it "loses" something in the process. JPGs support millions of colors and compresses by removing blocks of duplicate colors. Unlike GIFs, JPGs have no support for transparency or animation; however, there is progressive rendering available in JPGs. The only way to make a JPG match the background is to add the background color to the image.

Should you use GIF or JPG for all graphic files? Each has its strengths and weaknesses, depending on the graphic you're using. GIF is not good at compressing continuous-tone images, and the quality of the graphic will be sacrificed. For these smooth transition-type images, JPG is the way to go.

The rule of thumb is to use JPG when working with a photograph image or realistic scenes. An advantage of compressing JPG files is the ability to control the compressing. The higher the quality, the larger the file will be. Each time you compress a JPG file, it loses more information that it can't get back. The best thing is to save a copy of the original and work on a duplicate copy.

GIF and JPG files are bitmap graphics, also known as raster graphics. Such files are stored as a series of values, with each pixel taking up a set amount of memory. An image that's scaled or increased also increases its memory, whereas a reduced image decreases memory. The other type of graphic is called vector, which is discussed shortly.