In HTML, images are embedded within a web page using the <img /> tag. The image itself is not part of the HTML document itself, but is in a separate image file that is referenced by the src attribute. The value assigned to the src attribute is a URL – that of the file containing the image information. Assuming that the image file resides on the same server as the HTML file that references it (this is usually, though by no means always the case), the |URL is usually a relative, as opposed to an absolute URL. Note that because the <img /> tag is not used to directly enclose any content, it is said to be an empty tag. Empty tags, like other tag sets, must be closed. They therefore include a solidus (forward slash) immediately before the closing angle bracket. The following example shows how the <img /> tag is used:
<img src="images/myimage.gif" />
The image referenced by the above example is in a directory called "images", which is a subdirectory of the directory holding the file in which the <img /> tag is located. Note that the image could just as easily be referenced using an absolute URL. Note that the file extension is .gif. This is a GIF file, one of two file formats that are commonly used on the Web. The second type is a JPEG file, which has a file extension of .jpg. Both file formats employ a compression algorithm to reduce the size of the image file, ensuring that files are optimised for the purpose of using Internet bandwidth as efficiently as possible (and keeping download times to a minimum). The position at which the image appears on the page depends on where in the HTML code the tag is used. If the tag is used between two paragraphs, for example, the browser displays the first paragraph, then the image, then the second paragraph. Note that this will not always be the case. A style sheet definition may have been defined for the image that uses absolute positioning to specify its screen coordinates.
The width and height attributes can be used to specify the size in pixels at which the image is displayed on screen. Care should be exercised when using these attributes, as the use of a different aspect ratio to that of the original image will result in it being stretched, either horizontally or vertically. The aspect ratio is the relationship between the width and the height of the image in pixels, so an image that is 640 x 480 pixels has an aspect ratio of 4:3. There may be other side-effects that result from the resizing of an image. If the image is greatly reduced in size, for example, there will almost certainly be a significant loss of detail. If on the other hand the image is displayed at two or three times its original size, it may appear "blocky". The same image is shown below three times - at its original size, scaled down to half its original size, and scaled up by a factor of two.
The same photographic image displayed with different screen dimensions
Two other attributes that should be mentioned here are the alt attribute and the title attribute. The alt attribute defines the text that will be displayed if the image itself cannot be displayed by the browser. It should not be overly verbose, but should provide sufficient information to inform the user about the nature and purpose of the image. This is particularly important for visually impaired users who may be using a screen reader to read a web page. The screen reader cannot interpret the contents of an image, but it will be able to scan and convey to the user the contents of the alt attribute. For that reason, W3C recommend the use of the alt attribute for all images. The title attribute is use to provide additional on-screen information about the image displayed when the user hovers over it with the mouse. The text defined for the title attribute is displayed at the location of the mouse pointer in the form of a "tooltip". The same image that we used above could have both the alt and title attributes defined with the same (or different) text, as per the following example:
<img src="images/mypic.jpg" alt="A lovely picture of me!"
title="A lovely picture of me!"/>
While the text for the alt attribute is not displayed when the user hovers over the image with the mouse, the text for the title attribute is. Hover over the image below to see the resulting tooltip.
The title attribute produces a visible tooltip when the user hovers over an image
Graphic Interchange Format (GIF)
The Graphic Interchange Format (GIF) was developed during the 1980s by the CompuServe Information Service (CIS), the first major commercial online service in the US. It was later adopted for use in web documents because of its efficient compression algorithm, and because it was already a widely used format. The Lempel Ziv Welch (LZW) compression scheme used (named after the individuals responsible for developing it) is described as "lossless", because although file size is reduced, image quality is preserved. The main limitation is that, because GIF images have a fixed colour depth of 8 bits, the number of different colours in any one image is limited to 256. The relatively simple nature of the compression algorithm means that GIF files are best suited to storing images that have large areas of a single colour, such as block diagrams, company logos and so on. They are not suitable for storing complex photographic images that contain a large number of colours. The following images were created from the same bitmapped image of coloured blocks. The image on the left has been saved as a GIF file, however, while that on the right has been saved as a JPEG file.
The same bitmapped graphic image saved as a GIF (left), and as a JPEG (right)
Photographic images can be saved as GIF files, although the results can be unsatisfactory due to the limited number of colours. The reduction in colour depth often requires a process called dithering to create the impression that there are more colours present in the image than there actually are. Pixels of two different colours are positioned next to each other to create the illusion that a third colour is present. The result is often a good approximation of the original 16-bit or 32-bit photographic image, although some image quality is inevitably lost. Since most computers in use today have graphics adaptors that allow millions of colours to be displayed, there is no real reason to store photographic images as GIF files. The two images below illustrate the difference in quality between GIF and JPEG file formats for photographic images. The image on the left is the GIF file. Close inspection will reveal that it is somewhat grainy in appearance by comparison with the JPEG image on the right (both images have been enlarged by a factor of three).
The same photographic image stored as a GIF (left), and as a JPEG file (right)
The compression algorithm used by the GIF file format is not efficient when applied to photographic images. Although the images shown above are of exactly the same dimensions (180 x 160 pixels), the GIF file is more than four times bigger than the JPEG file. GIF files are more suitable when the number of colours in the image is relatively small, or where there are large contiguous areas of the same colour. When saving graphic images as GIF files therefore, use the least number of colours that provides an acceptable result.
The GIF file format allows you to select one colour to be transparent (usually the background colour). This is usefully for graphic images that are used as logos over a coloured background, or for diagrams with clean lines that are superimposed over a coloured background or other graphic images. There can be unexpected results if the graphic contains dithered or anti-aliased edges, however, or if it contains areas other than the background itself which use the background colour. Both of the GIF images below are the same as the graphic containing coloured blocks that we saw above, set against a coloured backdrop. The image on the right, however, demonstrates how the use of a transparent background colour can make a graphic image look more integrated into a web page.
The images are identical, but the second has a transparent background
Joint Photographic Experts Group (JPEG)
JPEG images usually have a colour depth of 24 bits per pixel, allowing an image to have up to 16.8 million colours. In reality, a single image is unlikely to use anywhere near that many different colours, even if it has 16.8 million pixels or above. The availability of such a large palette, however, makes JPEG image files a favoured option for digital photography, graphic design, and multimedia. The nature of the algorithms used for JPEG file compression (essentially a sophisticated mathematical conversion process called discrete cosine transformation) allows users of graphics packages such as Adobe Photoshop to select the degree of compression required for each image. There is a trade-off to be made, however, between the degree of compression and the quality of the resulting image.
A JPEG file can be up to one hundred times smaller than the equivalent uncompressed bitmap image. The algorithm discards as much of the file's data as possible during the compression process, retaining only enough data to be able to render an acceptable approximation of the original image. JPEG compression is referred to as a "lossy" compression technique due to the inevitable loss of image quality that results. Compression is also very much a one-way process. Once you have compressed an image file and saved it as a JPEG file, you cannot restore it to its original state. For this reason it is probably a good idea to retain a copy of the original bitmap image file as a backup, in case you wish to start processing the image again from scratch. Consider the two images below. The one on the left has been saved in JPEG format with a standard compression factor of 15% and has a file size of 6,144 bytes, while the one on the right has been saved with a compression factor of 90% to give a file size of 1,444 bytes. Note that for a given compression factor the file size will reduce further, and image quality degrade more, each time the file is saved again as a JPEG file (although if a large number of successive file save operations are carried out, the degree of change will eventually become negligible).
Different compression values produce differences in picture quality
Portable Network Graphics (PNG)
The PNG image format was developed by a consortium of graphic software developers as a non-proprietary alternative to GIF (the LZW compression scheme was developed for GIF by CompuServe and patented by Unisys Corporation, and software developers whose applications saved files in GIF format were therefore at one time obliged to pay royalties to both companies). The PNG format was designed specifically for web page images, and offers a number of advanced features that include lossless compression, support for a range of colour depths, and the ability to accommodate a short embedded text description of the image. This latter feature enables PNG image files to be indexed by search engines.
PNG can be used for both the kind of web graphics traditionally represented by GIF files (thanks to its lossless compression) and for photographic images that require 24-bit colour depth. The lossless compression used by PNG results in files that are much larger than their JPEG counterparts, however. The PNG format is at its best when used for line art, logos and diagrams of the type traditionally stored in GIF format. The result in terms of image quality is usually as good as the equivalent GIF image, and results in a file size that is on a par with, or smaller than, GIF. Unfortunately, inconsistent browser support for PNG graphics (Internet Explorer, in particular, does not fully support all the features of PNG graphics) has meant that widespread adoption of the PNG format has not yet occurred.