Images

 

One of the most compelling features of HTML is the ability to embed small picture files that can be viewed using a graphical browser. This is done using the <IMG> tag, as shown below.

 

<IMG SRC="picture.gif">

 

Notice, first of all, that this is a tag containing various options. In this case the SRC attribute specifies the source file, or the graphic to be displayed. Here the source is a picture named "picture.gif" that is in the same directory as the HTML file itself.

Image Formats

 

There are two common file formats for pictures that you are likely to see on the Web - GIF and JPEG.

 

GIFs

 

GIF stands for Graphic Image Format. This is the most popular format for storing graphics on the Web at present. The inventors of the format pronounce its name "jiff" but some people say it "giff".

 

GIF files are compressed, so they take up a minimal amount of space on disk. A GIF picture can have up to 256 colours or as few as 2. Generally, GIF files bear the suffix ".gif".

 

JPEG

 

JPEG is another standard for graphics. This is not as popular as GIF, but is growing rapidly in popularity. JPEG stands for Joint Photo Expert Group and, as its name implies, is suited for large quality photographic images. A JPEG file can contain thousands or even millions of colours, and uses sophisticated compression methods to make the picture as small as possible. JPEG files are suffixed as ".jpeg" or ".jpg" files.

 

Image Attributes

 

ALT

 

A cautionary note about graphics.

 

It's very possible that some people will view your web page in a non-graphical way. They could be visually impaired, using a text browser or simply have turned off graphics to speed up their browsing. Whatever the case it is good form to always include a value for the "ALT" attribute of the "IMG" tag:

 

<IMG SRC="picture.gif" ALT="Welcome!">

 

People viewing this code with a graphical browser get to see a graphic, and people using a text-only browser see the text "Welcome!". Try to keep the text relevant to the image. Another useful trick is putting in blank or "null" ALT field. If you do this:

 

<IMG SRC="picture.gif" ALT="">

 

people with text-only browsers won't see anything at all! This is useful if the graphic is purely decorative and serves no other function. You have to put in an ALT tag with an empty quoted string - nothing between the quotation marks. If you omit the ALT tag then text-only browser users will see the message "[IMAGE]", which is rather ugly.

 

ALIGN

 

Aligns text around an image in a word wrap style. Can be TOP, MIDDLE, BOTTOM, RIGHT, or LEFT

 

<IMG SRC = "picture.gif" ALIGN = "LEFT">

 

BORDER

 

Specifies the pixel size of the border that surrounds the image

 

<IMG SRC = "picture.gif" BORDER = "10">

 

HEIGHT

 

Spcifies the height of the image in pixels

 

<IMG SRC = "picture.gif" HEIGHT = "202">

 

HSPACE

 

Specifies the horizontal margin around the image in pixels

 

<IMG SRC = "picture.gif" HSPACE = "5">

 

VSPACE

 

Specifies the vertical margin around the image in pixels

 

<IMG SRC = "picture.gif" VSPACE = "5">

 

WIDTH

 

Specifies the width of the image in pixels

 

<IMG SRC = "picture.gif" WIDTH = "202">