File Formats

There are two major formats used for images on the Web, GIF (pronounced jiff) and JPEG (JAY-peg). GIF is the older of the two and can hold, at most, 256 color palette entries.

JPEG, which usually has the filename extension .jpg, is a "lossy" format. This means that it sacrifices quality for the sake of size reduction. The resulting JPEG image will almost always differ in some way from the original image. When saving a JPEG in Photoshop, you are given the opportunity to select the image quality, and that will affect the size on disk.

While most newer Web browsers can display JPEG pictures, some older ones cannot. Furthermore, because JPEGs are lossy at anything but the highest detail level, it is usally best to use GIF when you have things with a limited number of colors that are used frequently on a page. Things like small buttons, horizontal bars, and page banners should usually be in GIF format. Detailed photographs should usually be JPEG files.

The GIF format also offers other optional features that JPEG does not. The first is transparency. It allows you to have part of the area underneath the image "bleed through". Here are two examples:

Note: For the purpose of this demo, these images were created without using GIF transparency.

You normally do not need to worry about transparency if you are designing a Web page with a solid background color; you can just create your images using that same color as the background in Photoshop. But if your background is anything other than solid black or white, matching the color of the Web page to that of the image can still be difficult. This is one reason we recommend people use a solid white background on pages they design for the OIS. For more about saving with transparency, refer to the Step by Step Instructions section.

Another advantage of the GIF format is interlacing. Because modem connections can be quite slow, this option allows the person viewing your Web page to see the image a little bit at a time, as it is loaded. Rather than simply starting at the top and drawing downward one line at a time, interlaced image data skips some lines during its first pass and then starts at the top again, filling in the rest of the lines. In Netscape, this would be seen as an image which starts out looking blocky, with detail getting filled-in as more of the image is received.

Generally speaking, it is a good idea to save images larger than about 50 pixels in height with the interlace option turned on. Photoshop 4.0 also offers an extension to the JPEG format called "progressive JPEG" which is supported by newer Web browsers, and provides a similar effect to GIF's interlacing.

A more use that has been found for the GIF format involves producing simple frame-by-frame animation. The procedure for creating animations is too complex to cover in this document, however you should consider two factors before using animation on your pages:

• Older browsers which do not support animated GIFs will only display the first frame of the image, so the very first frame should represent the final outcome. For example, if you want to animate a car driving from left to right across the image, you should make sure the first frame has the car at least partially visible, so that people with older browsers will know what the image is supposed to be.

• In general, animated GIFs are starting to become overused, and are getting a reputation for being "tacky". Not only do they take longer to load than regular GIFs, but they can considerably slow down the computer viewing them.

Top | Previous Page | Next Page