Quick Introduction to HTML
Images

Introduction

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.

The img tag

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.

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" width="128" height="125"/>

The 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:

The 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.

The width and height attributes aren’t required, either. Their function is to let the browser how much space to reserve for a picture before the picture is loaded.

Image formats

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.

• GIF

  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.

• JPEG

  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. The 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.

• PNG

  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.

• SVG

  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 may use <object> tag, discussed on the page Plugins and Embedded Objects, or the HTML5 <svg> tag, as discussed in Media.

  Some browsers, especially Internet Explorer, were very slow to support SVG natively. But nowadays SVG is pretty well supported by all graphical browsers.

Image Alignment

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 traditional 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, it is preferred to use styling: set the table’s CSS property border-collapse to collapse. (Formerly, the table’s cellpadding and cellspacing attributes would be set to "0".)

Images may also be aligned by using styles. But be warned: to do this by hand is tricky.

Transparency

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.

Animation

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 soundtrack with GIF animations.

Longer animations, or movies with a soundtrack, 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.

Image buttons

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 src attribute.

Image maps

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 img tag which we’ve already discussed, a map tag, which contains area tags. The map tag associates 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.

The usemap attribute of the img tag associates the image with the map with matching id (or name) attribute. Note some browsers use id some use name. The standard now says to use id, but it is safest to use both.

The map tag can contain any number of area tags.

Each area tag must have a shape attribute and a coords attribute. The value of the shape attribute must be one of "default", "rect", "circle", and "poly". The value "default" indicates the whole image. The "rect", "circle", and "poly" values indicate a rectangular, circular, or polygonal region, respectively, defined by the coords attribute.

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 "rect", the coords attribute value consists of four integer numbers representing the left, top, right, and bottom of the rectangle.

For areas of shape "circle", the coords attribute value consists of three integer numbers representing the center x and y, and the radius, of the circle.

For areas of shape "poly", the coords 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.)

The 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 a tag.

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!):

The 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 the alt values of the map area, from which the user can then choose.

The 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 map element.

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 name attribute to identify the map tag, but XHTML states that the 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 suboptimal.