Graphic used as a background
Banner graphic
Company logo
Graphical bullets
Link bar with graphic navigation buttons
Graphical horizontal line
Choose a file formatWhen you are ready to add graphics to your Web pages, you must determine how you should format them. A graphics file in its natural state is too large to download quickly over the Web, so you must reduce the size of the file by compressing it.
The standard file formats for Web pages are GIF, JPEG, and more recently PNG. There are many factors that determine which file format you will use for each graphic. The best format depends on the type of graphic you're working with, the size of the file, how small you want the graphic file to appear, and the way you want the image to download.
- GIF Graphics in GIF format are best when used with images that contain only a few distinct colors, such as line drawings and black and white images.
One of the advantages to GIF compression format is that you can interlace it to improve the browser download experience. An interlaced GIF appears first with poor resolution and then improves until the entire image arrives. This allows the viewer to get an idea of what the graphic will look like while they are waiting for the graphic to appear.
Another useful aspect of graphics in GIF format is that you can make the background of a GIF transparent, so you see the background color of the browser window you're in.
- JPEG JPEG format is commonly used for photo-realistic graphics
containing thousands or millions of colors. Graphics in JPEG format are useful because
you can control the file compression by changing the graphic quality. The lower
you set the quality, the higher the file compression will be. As a result, the
file size is decreased.
Graphics in JPEG format permit a greater degree of compression than the GIF format alternative, enabling quicker downloading times for larger graphics. However, a browser can only download a graphic in JPEG format linearly, from the top row to the bottom row.
- PNG PNG
format is an alternative to GIF and JPEG that supports transparency for graphics
containing thousands or millions of colors. Some Web browsers cannot
display graphics in PNG format without a special plug-in. The following are the types of PNG formats that you can choose:
- PNG-8 format is similar to GIF but it offers better 8-bit color support. It efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. This format is not very common and it is not supported by all browsers.
- PNG-24 format is also similar to GIF and it supports 24-bit color. Like JPEG format, PNG-24 preserves the broad range and subtle variations in brightness and hue found in photographs. Like the GIF and PNG-8 formats, PNG-24 preserves sharp detail, such as that in line art, logos, or illustrations with type. This format is not very common and it is not supported by all browsers.
You can also add graphics in the following file formats:
BMP The native bitmap format of the Microsoft Windows environment is a picture made from a series of small dots and it supports images up to 24 bits.
WMF Microsoft Windows Metafile format supports bitmapped, vector, and Encapsulated PostScript (EPS) data.
An animated GIF is a type of graphic that you can use to create movement or animation by combining several sequential images into a single GIF file. You can create an animated GIF in a graphics program, and you can find animated GIFs on the World Wide Web. You can then add them to your Web site.
The animation in this example plays once when the page is opened.
