There's nothing like a graphic to spruce up a Web page. But what exactly is a graphic?
A graphic is anything picture-like. A logo, a photo, or even a button.
But before you insert a graphic, you should make sure it has the proper file format first. Why? Because there are many different graphic file formats available, but not all of them work well on the Web.
A file format is the way in which a file's information is structured and stored so that a program can open, work with, and save the file.
Graphics come in many different file formats. But there are three graphics file formats that are small in file size, and therefore optimized for fast viewing on the Web. These three formats are:
GIF
JPEG
PNG
Each of these formats has advantages and disadvantages
GIF stands for Graphics Interchange Format.
Graphics in GIF format, or GIFs, are recommended when the images contain only a few distinct colors, such as line drawings, logos, or even black and white images. An example of a GIF would be "logo.gif."
Graphics with this file format are typically small in size, and therefore download and display faster.
Another advantage of using GIFs is that you can make their background transparent so that the background color of the Web page shows through.
GIFs can contain no more than 256 colors. This makes them small and speedy because of the small amount of color information stored in the file. However, if you try to use this format for an image that needs more color than that — a color photo, for example — the image may not look good.
This is because graphics such as color photos, gradients, and other images with continuous tones, require more than 256 colors to look good. In fact, they often require thousands to millions of colors. The result, if you put them in the GIF format, is that you will get dithering. Dithering happens when colors aren't available and the pixels in the image are patterned to compensate for the lack of that color, as shown here.
So which format do you use for photos that require lots of color? The next page will explain.
JPEG stands for Joint Photographic Experts Group. Graphics in JPEG format, or JPEGs, are recommended when images contain many continuous colors. Namely, photos. An example of a JPEG file name would be "climber.jpg."
Photos are typically made up of thousands or even millions of colors. The JPEG format can handle that many colors as well as keep the file size to a minimum. The file size might not be as small as a GIF, but the size is still pretty small compared to other formats.
Many people would like their JPEGs to have transparent backgrounds. For example, someone might want to "crop out" the climber in this photo, and have the graphic's background inherit the page background. (Like the GIF example earlier, so that the climber floats on the page.)
However, JPEGs cannot have a transparent background. This is one of their inherrent limitations.
You can work around this if your page background is a solid color. If that's the case, use an image editing program (which we'll explain in more detail later) to paint the background the same color as your page.
But if your page doesn't have a solid background (like the illustration here), then the JPEG may not float on top of the background very seamlessly. You can either change the page background to be solid, or change to a file format that supports transparency.
You might have noticed that, so far, there's a void that is begging to be filled.
The GIF format allows you to add transparency to the image, yet it only allows up to 256 colors.
The JPEG format doesn't allow transparency, yet it does allow more than 256 colors.
Is there a file format that will give you the best of both worlds? Transparency and more than 256 colors? Yes, the PNG format can do all of this, plus keep the file size to a minimum.
PNG stands for Portable Network Graphics, and an example file would be called "climber.png."
Important:
The PNG format is one of the newer Web file formats. Some browsers will open them and show a transparent background, but other browsers will open them and not show a transparent background. In some older browsers, they will appear as a red "x". If you use this format, make sure to test it in various browsers to be sure you like the result.
