Quick Introduction to HTML
Images, or pictures, are easy to include in web pages. This document presents the basics of how this is done, and some of the other capabilities of images.
Web page images are stored in a separate image file, not in
the HTML file.
Images files may be included in HTML by the
img tag is self-terminating, so it doesn’t take
an end tag. A simple example would look like
<img src="sailboat.gif" alt="a drawing of a sailboat"
src attribute is a URL indicating the location of
the image file, either as a file relative to the present HTML file,
or a remote file on a different web server.
So the above code is rendered by the web browser as a picture:
alt attribute isn’t strictly required, but it is
strongly recommended for any image that contributes to the information
in the web page. The text may be simply a description of the image,
or a textual replacement of the image. Consider how you want the page
to appear in a web browser that doesn’t support images, or if the
image is lost somehow. Also, web browsers for the sight-impaired
can read aloud the
alt text in place of the image.
aren’t required either. Their function is to let the browser
how much space to reserve for a picture before the picture is
There are three common formats for images on the World Wide Web. Any of these formats are very likely to work well in any graphical web browser. Other formats are very likely to fail on platforms other than the one for which they were created.
The file name suffix of an image file should correspond to the image format so the browser will know what format to expect. (While this isn’t strictly necessary on platforms such as the Mac where file types aren’t specified by file name suffixes, you should use the suffix convention anyway. to simplify a possible move to a different platform.)
Another standard image format, SVG, which is used for line drawings and such, we will mention here, but note its nature and use is quite different from the others.
Graphical Interchange Format
File name suffixes: .gif .GIF
This is the most popular picture format on the Web. It employs a lossless compression algorithm to reduce the size of the file, which means the compressed image will un-compress to be identical to the original. This makes the GIF format especially good for line drawings and diagrams, and any other image that requires perfect reproduction.
GIF’s are rather limited in many ways: they can contain a maximum of 256 different colors, only one kind of transparency,
The GIF format was patented by Unisys and Compuserve in 1994. Many people questioned the ethics of the patent, and many felt that the format should not be used for this reason, but nothing came of it. The U.S. patent has now expired, no harm done. The GIF format is now public domain.
Joint Photographic Experts Group
File name suffixes: .jpg .JPG .jpeg .JPEG
JPEG is an international standard image format, featuring a lossy compression algorithm, which means that the un-compressed JPEG image may differ slightly from the original. They payback for this loss is that the JPEG version of an image may be many times smaller than the GIF version. So a web page including JPEG images may load much faster than a page with the same images in GIF format.
The JPEG format is best used for color photographic images: most pictures of natural things can be compressed into a very small JPEG file with no perceptible change. It is not appropriate for line diagrams because the lossy compression will speckle a solid white background.
When you create a JPEG, you will be asked to specify a compression factor. The greater the compression, the more the loss in fidelity. It is worthwhile to experiment to see how small you can make a picture without changing the image perceptibly.
Portable Network Graphics
File name suffixes: .png .PNG
PNG is an emerging international image format standard. Like GIF, the PNG format features a lossless compression algorithm. It is much more powerful in several ways, including:
- 16 million colors vs GIF’s 256 colors
- Variable transparency vs a single transparency
On the other hand,
- PNG does not support animation.
- Older browsers, such as Netscape 4.x and versions of MSIE 4, do not support PNG well.
For very high-quality images, PNG is often the best way to go.
Scalable Vector Graphics
File name suffixes: .svg .SVG
Unlike the other image formats we have discussed, SVG is not a pixmap. That is, it does not store an image pixel-by-pixel. Rather it describes graphical objects, such as lines, circles, curves, and their properties, such as color and texture.
SVG is ideal for line drawings, diagrams, and many kinds of artwork. SVG images can be printed at any resolution or increased in size, and remain sharp, although the file size may be small. It also has many other advanced features, such as animation, built in.
SVG is included here only for completeness of the discussion of image formats, though. To include it in HTML, you do not use the
<img>tag. Rather. you use the
<object>tag, discussed on the page Plugins and Embedded Objects.
As of this writing, Microsoft browsers do not support SVG natively, but a plug-in is available.
An image tag placed in the text of a web page will be rendered with the picture in-line with the text. How the picture is aligned to the text (the bottom of the image to the text baseline, etc) is a matter for styles.
The most flexible way to align images in a Web page is to use tables.
To place two images in different table cells next to one another
with no gap, you need to set the table’s
Images may also be aligned by using styles. But be warned: to do this by hand is tricky.
The GIF and PNG formats allow parts of an image to be transparent. This is particularly important for line drawings and diagrams. Rather than forcing the background of the image to be the same color or pattern as the page background, you can simply set the image background to be transparent. This way, you can set the page background arbitrarily without having to alter the image.
The PNG format permits different parts of an image to have different degrees of transparency.
The easiest and most portable way to include a short animation in a web page is to use the animation feature of the GIF image format. An image editing program is needed to create an animated GIF. With the image editor, you can set the frame rate, and whether the animation is to play just once or repeatedly.
To put the animation in your page, include the image file using the
img tag as you do with any other image.
Please use some discretion using animations in web pages. For many people, flashy animations are just annoying.
There are limitations to GIF animations. Such an animation should contain only a few frames, otherwise, it will be large and take a long time to load. Also, there is no effective way to synchronize a sound track with GIF animations.
Longer animations, or movies with a sound track, or animations with user interactions, are best handled using various plugin technologies such as MPEG, Quicktime, and Flash. See Plugins.
Another approach to animation, especially animation that is affected by user interaction, uses web page scripting. See Dynamic HTML.
Bear in mind that none of these technologies is part of the HTML standard, and that the farther you stray from HTML, the more users you will exclude from viewing your page properly.
A web page form can contain buttons which are displayed as
images from an image file. This is done with the
input tag and its
An image map is an image with a set of regions defined to take certain actions when the user clicks on them.
In the simplest kind of image map a “client-side” image map, these actions are simply to follow a link, just like any other link in a web page. In a “server-side” image map, the coordinates of the clicked region are passed to the server, which can respond in a very flexible way. It is also possible to script an image map, so that a script in the web page reacts to mouse clicks.
Client-side image maps are preferred over other image map techniques, because they require the least of the user’s browser and of the web server, and are therefore much more robust than the other techniques.
To make an image map requires three HTML tags: the
tag which we’ve already discussed, a
map tag, which
area tags. The
area tags with the image; the
area tags describe the clickable regions of the map,
and the actions to be taken when they are clicked.
usemap attribute of the
associates the image with the
map with matching
name) attribute. Note some browsers
id some use
name. The standard now
says to use
id, but it is safest to use both.
map tag can contain any number of
area tag must have a
attribute and a
coords attribute. The value of the
shape attribute must be one of
"default" indicates the whole image.
"poly" values indicate a rectangular, circular,
or polygonal region, respectively, defined by the
coords attribute value represents pixel
coordinates, separated by commas, whose format and interpretation
depends on the
shape attribute. The coordinates are
with respect to the top-left corner of the image.
For areas of shape
attribute value consists of four integer numbers representing the
left, top, right, and bottom of the rectangle.
For areas of shape
attribute value consists of three integer numbers representing the
center x and y, and the radius, of the circle.
For areas of shape
attribute value consists of any number of x, y value
pairs, representing the vertices of a closed polygon. (If the first
and last pairs are not the same, a pair of values equal to the first
pair is appended to close the polygon.)
href attribute specifies the URL of the page
to which the browser goes when the user clicks the area. Compare
this with the
href attribute of the
For example: the code
<img src="imagemap/map.gif" usemap="#mymap" width="128" height="128" alt="My image map" /> <map name="mymap" id="mymap"> <area shape="rect" coords="4,4,32,32" href="imagemap/rect.html" title="click on the rectangle!" alt="The rectangle area"/> <area shape="circle" coords="66,53,22" href="imagemap/circle.html" title="click on the circle!" alt="The circle area" /> <area shape="poly" coords="11,69,39,86,91,86,110,16,109,113,61,101,15,111,11,69" href="imagemap/poly.html" title="click on the polygon!" alt="The polygon area" /> <area shape="default" href="imagemap/default.html" title="try clicking on the shapes!" alt="The map background" /> </map>
is rendered by your browser like this (click on it!):
alt attribute value is an alternative textual
version of the map
area. If for any reason, the map
image cannot be displayed, this text can be employed by the
browser to produce a usable version of the map. For instance,
a text-only browser might replace the map with a list of
alt values of the map
which the user can then choose.
title attribute value is a textual advisory of
the function of the
area. Many browsers use this
text to produce a “tooltip”, a little text box that appears when
the mouse hovers over the area.
Note that the order in which the
area elements are
listed in the
map element makes a difference: if
two areas overlap, the first one listed gets the mouse click.
Therefore, an area of shape
"default" should come
last in the
map element, or else that area
will get the mouse clicks of any area that comes after it in the
Other uses of image maps: Server-side, scripted.
Imagemaps and the keyboard: accesskey, tabindex
Server-side image maps: ismap attribute of img tag
Some browsers (Netscape) put a border around the image map to indicate that it is a kind of link. You can use styles to get rid of this border, if you like.
Special software is available to facilitate creating image maps and their tags.
Note: there is an issue with XHTML version 1.1 and the map
element. Previous standards have used the
attribute to identify the
map tag, but XHTML states
id attribute be used instead. But many
browsers will not use the
id attribute properly.
It is a conflict between compatibility and consistency; the
solution chosen by the standards committee was sub-optimal.