GIF and JPEG Graphics Files
and Save for Web
Nearly all graphics used on the web and with multimedia work are in one of two formats. These are GIF (Compuserve Graphics Interchange format), or JPEG (Joint Photographic Experts Group).
Both of these formats are bit-mapped. They are
also compressed and are device independent (meaning they are used on
all types of computers without conversion). These characteristics make them
ideal for the web. The most fundamental difference between the two formats is
the way colors are encoded numerically in them.
GIF is an indexed color system. GIF format uses an index system that is limited to at most 8 bits per color. This means there are no more than 256 colors in a GIF palatte.. (There can be different choices of colors in the pallatte. More on this later.)
JPEG is an RGB system. This means there are 3 numbers associated with each color. One number represents the Red amount, another the Green, and a third the Blue. (So red, green, and blue are called primry colors.). The actual color that these form is a mix of these three primary colors. The numbers represent the saturation level of each of the primaries. The total number of possible colors that can be formed is the product of the number of red levels, the number of green levels, and the number of blue levels. JPEG can support 256 levels of red, 256 levels of green, and 256 levels of blue. Black is red at 0, green at 0, and blue at 0. White is red at 255, green at 255, and blue at 255. Setting red at 255, green at 0 and blue at 0 gives a deep red. Red at 255, green at 255, and blue at 0 gives a deep yellow. The total number of possible colors is 256x256x256 which is 16.5 million. That means a graphic can concievably have up to 16.8 million different colors in it.
Compressing files with JPEG and GIF - which to use?
You will usually use the "Save for Web..." function in Photoshop or Elements to
choose GIF or JPEG compression. Always use JPEG for continuous tone images (where colors change smoothly) such
as scanned images or digital photos. For solid color, line art or logos GIF
is usually preferable. Typically, a compressed file is 1/10 the original size
without compression. This depends on the "quality" setting done when
compressing. Typically, try to avoid extremes. If asked with a scale of possibilities,
use something with quality (above "average"), but avoid the highest
quality setting. Users normally can't detect the difference between high and
maximum quality unless both their equipment and vision are very good.
JPEG is very popular in digital cameras. Photos are almost always continuous tone in nature and, as statede above, JPEG is better at this.
Save for Web
So, you'll choose JPEG or GIF usually when you pull down under File to Save for Web. Here's an example image of a flower (a typical continuous tone image). I set the quality at a ridiculously low value (8 on a scale from 1-100) just to show that the left and right can look different. The left is the original and the right is what the compressed image would look like. Note at the bottom, an estimate is given of the download time. You make setting changes in the upper right portion of the window. If you drag to a higher quality, the right side image will be re-rendered and the size and time estimate will be redone. Note that the example would come out as about 11 KB (from a 366KB original. But, looking closely, this is grainy and not a good copy of the flower picture. If you go to around 50% quality, it will look great. Scroll down the page to see what happens when we try this image in GIF.
If, in the upper right settings area, you choose GIF you will be faced with a major challange. If you try to get the file size down to anywhere near the JPEG one above, you need to sacrifice quality. In the example below, I used a Web safe palatte (the 216 colors that all computers agree on -- more later). I used few colors to keep the size down and allowed 100% dithering. Dithering is a way to approximate a color by alternating dots of other colors. For example, if you put alternating red and white pixels, you can produce pink without having pink in the palatte. This is good, except on screens, with fairly few dots per inch, you can see the dots. The dithered images look grainy or splotchy.
Note that the file size for the GIF above is over twice that of the JPEG. For this kind of image, JPEG is much better.
GIF is heavily used for certain special effects. In particular, it allows for
animation. JPEG does not have this capability. An animated GIF file contatins
a sequence of frames with timing information like this lighthouse:
Click here to go to a discussion about creating animated GIF
files.
By the way, the lighthouse is a good example if a solid-tone image. It is drawn in a computer drawing program with a small number of colors in the palatte. Other solod-tone images are the icons for folders on your computer and the Windows logo etc..
Another interesting feature in GIF format that helps work around the limitation of 256 colors is the capability of using an adaptive palatte. This is a system in which a palatte is built (with up to 256 colors) to best simulate a particular graphic. Then the palatte definition is embedded in the graphic file itself. For example, suppose your graphic is all yellows and browns. The adaptive palatte will have no blues or greens but only a variety of yellows and browns taken from all the colors available in the hardware of the computer on which you create the file. This is available in the Save for Web... routine inside Photoshop or Elements. The only problem with this is that the file size is increased somewhat so that the palatte definition can be embedded into the file. So I didn't use it for the flower above. The image would look better, but would be much larger. Instead, we used a web-safew palatte. What does web-safe mean?
Web-Safe Palatte
As you know, everything in computing is encoded as numbers. Colors, whether we ise JPEG, GIF, or some other system are numbers. The designers of the original web looked for a way to encode graphics in numbers that would be standardand universal. Both Apple and Micrisoft have an 8-bit color code for basic screen graphics that they have used since the 80's. You might think they would have used the same numbers for every color. Unfortunately, they didn't. They agree on only 216 of the 256 codes. That's still quite a few. The palatte of colors (and associated numbers0 that are the same on both are called the "web-safe" colors.
Page maintained by Dr. Robert Fry. Last updated 7 June 2005
E-mail comments to: 
fry@eve.assumption.edu