![[Web Graphics]](Graphics/webgraph.gif)
There are three main file formats used for Web
graphics
- GIF files
- JPEG files
- PNG files (not yet supported by all browsers)
Gif Files
GIF (Graphics Interchange Format) files are compressed graphics files. They
hold a maximum of 256
different colors. Only the GIF format can be used to create a transparent
background and interlacing. GIF is a lossless format, which means that
none of the image is lost in the compression.
Jpeg Files
JPEG (Joint Photographic Experts Group) files are compressed graphics
files. They allow the total spectrum of colors, or 16.7 million.
JPEG is a lossy format, which means that part of the
file is lost
with the compression. If you want to do some more work on your image,
you must also save it in a regular, non-compressed image format, such as
tiff or bmp.
Which Format Should You Use?
The GIF format should be used for graphics with few colors. If you want a
transparent background you have to use GIF. If you want your image to load
in steps with each step increasing the resolution (interlacing or
progressive), you can use either format.
JPEG files are used for graphics with many colors, such as photos and
images with smooth gradiations of color.
A Checklist for Creating Smaller Files
- Use GIF and JPEG appropriately.
- Use JPEG if your image is a photo or an illustration with smooth
gradiations of color.
- Use GIF if your image has large areas of the same color, if you
would like to have a transparent background, or if you want the image
interlaced.
- Experiment with different color depths when saving GIFs. Most images
can be saved in 6- or 7-bit format without much loss of quality.
- Consider using an image in more than one place on a page. (Most browsers won't need to load the same graphic a second time.)
- If you have a web page with many images, consider using thumbnails, or smaller versions of the images, that act as buttons linking to the images.
GIF and PNG vs. JPEG
| Features
| GIF and PNG
| JPEG
|
| Colors
| 256
| 16 mill.
|
| Transparency
| Yes
| No
|
| Interlaced/Progressive
| Yes
| Yes
|
| Bits
| 8 or less
| 24
|
| Lossy
| No
| Yes
|
| Compression
| Yes (a little)
| Yes (a lot)
|
Dimension Guidelines for Web Pages
| Image Type | Width and Height (pixels)
|
|---|
| 25x25
|
 | 40x40
|
| 60x60
|
| Horizontal bar | 500x10
|
| Headline graphic | 600x150
|
| Common WWW ad | 300x72
|
| Logo or photograph | 300x400
|
Paint Shop Pro is an excellent image editor. Use the tutorial to get started.
Birte Nebeker, October 1996
Last updated September 1997