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
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.
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.
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 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.