Tag: <img>

<img> Syntax

<img> Description

src

Specifies the source image, which may or may not be on the same machine as the HTML document.

lowsrc

Specifies a low-quality (and presumably smaller) version of the source image specified in the "src=" parameter. The purpose for this tag is to allow a functional-but-not-glitzy version of an image to be loaded quickly, and then the high-quality-but-slower-loading file afterwards. This is usually used to allow navigation via an image map without waiting for the glitzy version to download. Obviously, this is more of an issue for those with slow connections to the server.

Note that the low-quality image is often a 1-bit GIF to minimize file size, but this image probably should not contain dithering to simulate gray shades, as the dithering patterns do not compress well--try to stick to larger areas of black and white. You could also use a highly compressed and therefore low-quality JPEG file, but the blockiness resulting from high JPEG compression could result in text becoming unreadable: often undesirable for image-map purposes.

alt

Specifies the "alternate text," that text that is displayed if the image itself isn't transmitted successfully (whether because of actual transmission problems or because the user clicked the Stop button), or if the user turns off images to save download time.

align

Specifies the image's alignment, relative to surrounding elements. The alignment values fall into two categories: vertical alignment and horizontal alignment. The values pertaining to vertical alignment are as follows:

• align=top aligns the top of the image with the top of the tallest item in the line, be that text or another image.
• align=texttop aligns the top of the image with the top of the tallest text in the line (this is often, but not necessarily, the same as align=top).
• align=middle aligns the baseline of the current line with the middle of the image.
• align=absmiddle aligns the middle of the current line with the middle of the image.
• align=baseline aligns the bottom of the image with the baseline of the current line.
• align=bottom is identical to align=baseline (baseline is now the preferred term).
• align=absbottom aligns the bottom of the image with the bottom of the current line.

The values pertaining to horizontal alignment (which cause "floating images") are as follows:

• align=left causes the image to float down and left, into the next available space in the left margin, and subsequent text will wrap around the right-hand side of that image.
• align=right causes the image to float down and right, into the next available space in the right margin, and subsequent text will wrap around the left-hand side of that image.

If two images, one with align=left and the other with align=right, are close to each other, the wraparound text will proceed through the channel that exists between them. If there is not room in the current window/frame width to allow the two images to exists side by side, the second one will move down until sufficient room is available.

width, height

Specify the size of the image on the displayed (which may be different from the size of the image in the file). By using the width and height parameters, you can resize an image to make it larger or smaller than it would be by default.

Note: even if you are displaying an image at its actual size, it is recommended to specify its width and height, as this allows the browser to allocate the required screen real estate and go on with displaying subsequent parts of the document. If you do not specify width and height, the browser must wait until the image (or at least part of it) is loaded to determine its dimensions, before displaying subsequent parts of the document. The result of this is slower document loading without width/height specifiers, versus faster document loading with width/height specifiers.

hspace, vspace

Specify, for images with align=left or align=right, the amount of horizontal and vertical space to allot around the image. The hspace and vspace parameters all you to control how close the wraparound text is able to get to the image--if text gets too close to the image, the whole page's appearance is degraded. Note that hspace and vspace apply only to images aligned left and right; they have no effect on other alignments.

border

Specifies with thickness of the border around the image. The default value differs, depending on whether the image is hyperlinked (default=1) or not (default=0). The color of the border is the same as the text color if the image is not a hyperlink, and the same as the link or the vlink color if it is a hyperlink (see <body> for details on these).

ismap

Specifies whether or not this image is an image map (see also usemap, below).

usemap

Specifies the url of the image-map specifier to use, which will associate certain areas of the image with corresponding URLs, allowing the user to click in multiple areas of the image, and loading a different document each time. See <map> for usage.

name

Specifies the name to be associated with the image. This is typically used in conjunction with JavaScript code, which must have some way of identifying individual images, as in button rollover. See the button-rollover example below for details.

Small images can be used to bolster HTML's less-than-stellar handling of extended character sets. While there is a "standard" HTML character set called the ISO 8859 set, different browsers on different platforms (Mac, UNIX, PC) don't handle all the characters consistently. One way around this is to use small inline images. For each character in the table below, its name, its real typographical appearance, its typical ASCII approximation, and the <img> tag used to access the image file, are shown (of course, the "../symbols/" pathname used below is likely to be different in your pages). The images below used to be XBM (X BitMap) files, but they were changed to GIFs with transparent backgrounds when it was discovered the Internet Explorer couldn't handle XBM images.

Character	Real	ASCII	Tag Used
Angle Brackets		< >	<img src="../symbols/LAngle.gif" alt="&lt;">   <img src="../symbols/RAngle.gif" alt="&gt;">
Bullet		*	<img src="../symbols/Bullet.gif" alt="*">
Copyright		(c)	<img src="../symbols/C.gif" alt="(c)">
Degrees		deg	<img src="../symbols/Degrees.gif" alt="deg">
Em Dash		--	<img src="../symbols/EmDash.gif" alt="--">
Approximately Equals Less Than or Equal To Greater Than or Equal To Not Equal To		~= <= >= /=	<img src="../symbols/Approx.gif" alt="~=">   <img src="../symbols/LessEq.gif" alt="&lt;=">   <img src="../symbols/GreatEq.gif" alt="&gt;=">   <img src="../symbols/NotEq.gif" alt="/=">
Pi		pi	<img src="../symbols/Pi.gif" alt="pi">
Prime		'	<img src="../symbols/Prime.gif" alt="'">
Registered		(R)	<img src="../symbols/R.gif" alt="(R)">
Right Arrow		->	<img src="../symbols/RArrow.gif" alt="-&gt;">
Multiplication		x	<img src="../symbols/Times.gif" alt="x">
Trademark		(TM)	<img src="../symbols/TM.gif" alt="(TM)">
Vertical Ellipsis		...	<img src="../symbols/VEllipsis.gif" alt="...">

The advantages of using the ISO 8859 characters is that they obey the current character attributes (e.g., size, color, etc.), as specified by the user's browser or the page's tags; the disadvantages are that the the characters you need may not eist in the ISO 8859 set, and even some of those that do, differ from platform to platform. The advantages of using inline images like the ones in the table above, is that you can represent any character you need, but the disadvantage is that they do not obey current character attributes.

<img> Examples

Here is a photo of Earth taken by Apollo 11 astronauts.

Here is a photo of Earth taken by Apollo 11 astronauts.

Here is a photo of Earth taken by Apollo 11 astronauts.

Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.

Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.

Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.