Web Site Building · Integrating Graphics · Formats

What this is about:

There is no limit in the web specifications to the graphical formats that can be used on the Web. You just need a MIME type so that the format is labelled correctly for transfer across the Web, and so that a suitable viewer (if one exists) can be located at the other end. In practice, certain formats are more widely understood than others; certain formats are more suited to one type of graphical data than another; so you should make an informed choice about what format to use.

Graphics Helpware Tips and Samples

Internet Brothers Logo Most graphic images for the Web are constructed in one of three formats. These are GIF, or Graphics Interchange Format, that is used primarily for computer generated images, JPEG or Joint Photographic Experts Group, usually abbreviated JPG, that is designed for compressing either full-color or grey-scale digital images of natural, real-world scenes like photographs, and PNG or Portable Network Graphics, a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF.

Transparent IB Logo One of the features of GIF is the ability to make backgrounds transparent. In the first example, you can see the black background surrounding the Internet Brothers logo. In this sample the white page background shows through because the black has been made transparent. Most modern graphics editing software offers an option to make GIFs transparent when saving. A single GIF image is limited to only 256 different colors, so you will not see the brilliance of the full spectrum like you can with JPG and PNG.

jpg IB Logo The IB logo on the right is a JPG file that seems to inherit the transparency feature of the GIF above, but instead was created with the same background as the page. Perhaps the best feature of JPEG is its superior file compression capability. JPEG's strong suit is photographs. JPEG is not as well suited for line drawings and other textual or iconic graphics, where the sharp contrasts between adjacent pixels cause noticeable artifacts. Such images are better saved in a lossless graphics format such as GIF or PNG. This image is just a little less sharp than the one above.

png IB Logo PNG offers a variety of transparency options. With truecolor and greyscale images either a single pixel value can be declared as transparent or an alpha channel can be added (enabling any percentage of partial transparency to be used). For paletted images, alpha values can be added to palette entries. PNG uses a lossless data compression method known as DEFLATE to reduce file size. Most contemporary graphics are being created in PNG format. Quality is generally superb.