|
|
Although there is an abundance of formats used for storing graphical data, you should stick to the two most widely supported formats when inserting images in your web pages. These are JPEG and GIF. JPEG, short for Joint Photographic Experts Group, is ideally suited for photographic images and others that have a wide range of colors. The file extensions often associated with JPEG files inclue jpg, jpeg, or jpe. JPEG files are stored on disk in a compressed format, so they take up far less space than uncompressed formats like TIFF or the Windows BMP formats.
The GIF format, short for Graphics Information File, was created many years ago by the online service CompuServe. The file extension used to identify files stored in this format is gif. Images stored as GIF files can contain a maximum of 256 colors, so they are best suited for line drawings, logos, and those containing only flat colors. Below are two versions of the same image, the one on the left save as a JPEG file and the other as a GIF file.
Saved as a JPEG |
Saved as a GIF |
Look closely at the GIF version of the file and see the areas of flat colors, like on cheeks, that were substituted for the subtle variations used in the JPEG file. This is caused by the smaller size of the color palette available in GIF files. JPEG files can display millions of different colors, while the color palette used by a GIF file can include at most 256 colors. The above JPEG image uses a palette of 23,163 colors. When an image originally stored as a JPEG is saved as a GIF, the image editing program must do a lot of color substitution replacing colors with the closest one in the palette.
There are actually two versions of the GIF format. The original format, designated GIF 87a, and the newer version, known as GIF 89a. One useful feature added to GIF 89a is the ability to designate one color in the image, usually a background color, as transparent. Below are two versions of the same image showing the effect transparency can have when it is rendered by the web browser.
|
|
As you can see, this is particularly useful if a web page uses a background color or image. Image transparency is also handy if you want to use an text font that may not be available on other computers that might display your web pages. The general rule of thumb is to use widely supported fonts like Arial, Helvetica, or Times, but what if you wanted to display a page heading in the Jester font? The page would be rendered as expected on computers that had font installed, but on other computers the browser would have to substitute a different font producing results that would be undesired. The answer to this dilemma is to create the heading in your trusty image editing software and save it in the GIF format with the background color designated as transparent. Here are some images that contain text and a graphic.
|
|
All of the better image editing programs support GIF transparency, so check the instructions of the program you use to see how to save an image with a transparent color.
The GIF format also supports simple animation. This is done using the same concept as cartoons or movies by first creaing a series of images that are then combined into a single GIF file using special image editing software. Animated GIF files are okay when used sparingly, say one or two on a page. Using more than can make them a real distraction to the person viewing your pages.
