Inline Web Graphics.

Computing & Information Services Department.
jim.cerny@unh.edu

This page illustrates common uses of inline and external graphics, with emphasis on the <IMG> tag and its attributes. We are assuming use of an up-to-date graphical browser that supports the features of HTML 3.2 or higher.

    SRC   HEIGHT   WIDTH   ALT
    VSPACE   HSPACE   BORDER   LOWSRC   ALIGN

    LEFT   RIGHT   CENTER   BASELINE

    SRC   WIDTH   HEIGHT   ALT

1. Graphics that are hyperlinks.

This shows a simple inline cow graphic (GIF, 32 colors, 4.3K bytes, 120 x 66 pixels) as the selectable hypertext that links to an external cow picture (GIF, 32 colors, 16.K bytes, 170 x 200 pixels). This involves using an <IMG> tag as the hyperlink "text" within an (anchor) tag. A very useful technique.

Once upon a time and a very good time it was there was a moocow coming down the road and this moocow that was coming down along the road met a nicens little boy named baby tuckoo. . . .
 - James Joyce,  A Portrait of the Artist as a Young Man.

2. ASCII art alternative for non-graphical browsers.

With some cleverness (borrowed from Laura Lemay's HTML book), it is possible to use the ALT attribute on the IMG tag to provide ASCII art for non-graphical browsers. Check this out with Lynx.

This is a cow from Cow Hampshire!

3. Border, stand-off space, and size possibilities.

Normally text wraps very close to an image. We can specify a stand-off space around the image. And we can specify an explicit border around the image, with the same color as the page text. This example uses the attributes of:

     VSPACE=1  HSPACE=60  BORDER=5

We can increase (or decrease) the size of a displayed image by sending resizing instructions with HTML, without the need to edit the image itself. The original image (used above) is 120 x 66 pixels and we are doubling that to 240 x 132 pixels with a default alignment . If we wanted to have the graphic aligned to the left margin and without text wrapped beside it, such as this:

we need to add the ALIGN=LEFT attribute on the IMG tag and to precede and follow the image with the following tag:

4. Alignments.

The ALIGN= attribute on the IMG tag allows some gross control over the positioning of a graphic. The following examples use a small (196 bytes) diamond-shaped icon to show values of LEFT, CENTER, RIGHT, and BASELINE

5. Low Source.

Sometimes a striking effect can be achieved by loading in a small (LOWSRC) version of a graphic that will appear quickly while the more detailed version of the graphic is downloading. The LOWSRC version is often black and white. Consider this example of T-Hall. The LOWSRC version is just black and white and is 6880 bytes, while the full version is 15503 bytes (the effect is more pronounced when the full version is larger, say, more than 150K bytes).