Overview
Compression is the key to making small images for web use. Because of this, two main image file formats have become popular because of their impressive compression implementation. These formats are: JPEG and GIF.
JPEGs (pronounced “jay-peg”) is the best format to use when you want to create a “photographic” image, continuous tone artwork or scanned paintings. This format allows you to reduce an image to a very small file by throwing away extraneous data. At high compression, however, you will notice the loss of quality of the image. GIFs on the other hand should be used for more illustrative images such as text, graphics, cartoons, line-art and flat illustrations.
As a rule, GIFs are smaller than JPEGs. But GIFs have a very restrictive color palette. A GIF image can only display 256 colors or less. And so if you have a scanned image of your cat and you save it as a GIF, the result will probably look pretty bad. Also, the more “busy” the image is (as in a photograph) the larger the files size of the GIF will be. Here’s an example:
Notice how the GIF has altered the image. Especially look at the light green shirt in the center, or the man’s face on the left to see how the areas of flat color are created by the restrictive color palette. You have probably also noticed that the GIF file size is larger than the JPEG. This is because the GIF compression doesn’t really deal very well with photographic or “busy” images. Here’s another example:
As you can see, the GIF has created bands of color instead of the gradation from green to light green as seen in the JPEG image. But the JPEG doesn’t show the sharp detail of the lines and borders as well as the GIF. The image is kind of “fuzzy” in the JPEG.
Here are the images enlarged:
The compression of the JPEG image has created what are called “artifacts”. Notice how the green color contains mottled variations? In a photograph, these artifacts are not as noticeable as they are with line-art or flat color.
So the bottom line is this: use JPEG files for photographic images and GIF files for line-art or images with text or flat color illustrations. GIFs are also very useful for creating transparent images and animation.
What about PNG?
PNG is a relatively newer file format for use on the web. It is meant to replace GIF as the file format to use with non-photographic images. It is actually better than GIF in quite a few respects. Unfortunately, the main drawback to PNG is that it is not supported in older browsers. So if you are unsure which browser your visitor will be using, GIF is still the format to use.
If you see the words “Your browser can view PNG images” above, then the browser you are using to view this web page can support PNG files. If not, then we would strongly suggest you upgrade your browser.
