|
The Basics of Graphics GIFs vs. JPEG The two most popular formats of graphic images on the web are JPEG and GIF. There will be an eternal debate as to which one is better, because the choice of whether to use GIF or JPEG depends on the image size, quality, and purpose. The principle difference between the two is that GIFs contain only 256 colors, while JPEGs contain up to 16 million. GIFs can have transparent backgrounds, which makes them easy to place over a web page background that is colored or a pattern of some kind. Also, GIFs can be made so that they sort of fade in as they load (this is an interlaced GIF). The drawback to GIFs is that they tend to be larger than JPEGs. Also, GIFs can be animated, while JPEGs cannot. JPEG graphics are smaller and more compressed than GIFs, which also means that they are not as high quality, although with the proper techniques, you can barely tell the difference. JPEG images can't have transparent backgrounds, nor can they be animated.
Take a minute to analyze the pictures. Both come from the same source, yet the GIF is almost 5 times as big (in bytes) as the JPEG. If you look at the wall in the background, you will notice the GIF looks more grainy, while the JPEG looks much smoother. Does this mean that JPG is better? Not necessarily.
What is interesting about these two sets of graphics is that the quality is almost identical, yet the byte size varies greatly. On the JPEGs, you can see little specks of color around the letters, which is a result of the compression. Notice how on the top set (red and white) and the bottom set (a bunch of colors), the JPEG file size remains almost the same? This is because the JPEG uses the same amount of colors in each image, whereas the GIF only uses what it needs. This enables the GIF to be smaller in a case such as this. When designing web pages, I use the following rules for graphics and pictures, and they've worked for me very well:
Copyright 2001 Fungi Software (Wicked Clean Productions) |
