GIFs and JPGs

Graphics on the Web can be in one of three formats: 1) Joint Photographic Experts Group format, or JPG (pronounced "jay-peg"); 2) Graphics Interchange Format, or GIF (pronounced "jif" or "gif"); or 3) Portable Network Graphics, or PNG (pronounced "ping"). Unfortunately, PNG support is less than minimal, so we won't cover them here.

GIF and JPG graphics serve two different purposes, and should be used for two different kinds of graphics. The JPG format is good at compressing graphics with a natural gradient of color, such as photos or paintings, like the balloon image used on the "Adding Images" page. That graphic is 14 kilobytes. If it were a GIF, it would be 30 kilobytes. JPGs have to have at least 16.7 million colors (24-bit palette). Also, you lose data every time you save a JPG file. Therefore, if you're planning on saving a graphic as a JPG, it's best to save it in some other format, like TIFF or PICT, while working on it, and then save it as a JPG when you're done.

The GIF format, on the other hand, is good at saving clip art or line art graphics, like the orange bar and blue ball used on the previous page. GIFs cannot use more than 256 colors. GIFs do a good job of compressing graphics that contain large areas of the exact same color.

GIFs can also be made transparent and interlaced.

Transparent GIFs

Transparent images are images that have a specific color designated as transparent. This lets the web browser use its background color or background image for the designated color in the image. It makes the background color (or pattern) of the page show through the image so that the image has the appearance of "floating" on the home page.

An image with no color set to transparent.

A similar image with the gray set to transparent.

Notice, the image background color is visible in the non transparent image while the page background is visible in the transparent image. Images must have appropriate backgrounds to be made into transparent images. The background of the image must be a single color, not a combination of colors since only one color in the image's color map (palette) can be designated as transparent. The background color should not be used anywhere else in the image. Any pixel in the image using the designated color will appear in the browser as the page background color or pattern, possibly distorting the image.

Only GIF89a files support transparent images. There is an older format known as GIF87a. Usually, the program that creates transparent images will accept regular GIF, JPG and other image formats. Once the transparent image has been created by designating the background color, the image can be saved in the GIF89a format if it isn't already. Programs that convert images to transparent images exist for all platforms. You can find graphics applications for your platform and price range in the Tools section.

Some Notes and Reminders

The image background should be a single color.
The color designated for the background should not be used extensively elsewhere in the image.
Photographs do not work well since it is hard to define a single background color.
Images created in paint programs, buttons and icons work the best.

Steps to Make Transparent Images Using LView 1.x
Steps to Make Transparent Images Using LView 2.0

Interlaced GIFs

Interlaced images are saved in such a way that they load differently in browsers. Only GIF files can be interlaced. An interlaced image loads on a web page first as a low resolution graphic, then slowly becomes clearer. The load time doesn't change, but viewers can get an idea of what the image looks like before it is finished loading, or if it is an image map, to click on the appropriate spot and move on. Interlacing is not important for small graphics, which already load quickly. Not all browsers support interlaced images; they will load the image fine, but not in an interlaced manner. To see the difference, check out how these two graphics load: Non-Interlaced GIF; Interlaced GIF

Steps to Make Interlaced Images Using LView

JPG also has a format like Interlacing. It is called "Progressive JPG." If you have a pretty nice graphics program, you can see if you have the option to save JPGs as Progressive. Not all browsers support Progressive JPGs, but the graphic should still appear in the browser, as with Interlaced GIFs.

Previous: The ALT Attribute
Next: Aligning Graphics and Text