Images are one of the most common tools in HTML, and if used correctly can enhance a web page
and increase reader interest. Used badly, images can make the page unreadable or very hard too
read. Also, overuse of images makes the page download slower. This also decreases view enjoyment,
and a slow loading page is more likely to be ignored by the viewer.
The defacto standard formats for images in HTML documents are the Graphics Interchange Format
(GIF) and the Joint Picture Experts Group (JPEG) format. Note that JPEG is usually abbreviated
to JPG. Both formats use compression to decrease picture size, however, they each have specialised
purposes. The GIF format has a maximum colour depth of 256 colours. Due to this, and the compression
it uses, GIFs are suited to graphics of text and other simple objects. GIFs have several sub-formats.
GIFs also have the ability for transparency and animation.
JPEGs are a little more complicated. The JPEG can either be 256 colours (8-bit) or 16.7 million
colours (24-bit). Most commonly, the 24-bit variety is used. There are also progressive JPEGs, which
allow the picture to be assembled while downloading, as opposed to after the download with regular JPEGs.
A Portable Networks Graphic (PNG) may also be used; they are higher quality and support transparency as
well, but only in FireFox 2+ and Internet Explorer 7+. They are quickly becoming the standard type of
graphic.
In summary, GIFs are good for text while JPEGs for photographs and similar type graphics; PNGs are good
for non-photographic graphics as well, and support differing levels of transparency, though only in newer
browsers. Below is an example of an image tag. Note that you can set the height and the width of the image;
if you do not use the height and width attributes, the image will display at normal size.
