<img>

Forces the alignment of the surrounding text with the image. Note the operative word here is text. The image sits where you place it, only the text moves, relative to the image.

This causes another situation to be presented. How do I center an image? Well, Netscape has the <center> tag.

Example:
<center>This is centered text<br>and the Max image<img src="max.jpg" width="151" height="142" hspace="5" vspace="5" align="middle"> from above. This is text after the image. Note that the text on both sides of the image dictate where "center" actually is.</center>

This is centered text
and the Max image from above. This is text after the image. Note that the text on both sides of the image dictate where "center" actually is.

Microsoft does not recognize the <center> tag so you have to do it a little differently. Fortunately, Netscape 2.0+ will recognize the <p> tag so you need only use one structure.

Example:
<p align="center">This is centered text<br>and the Max image<img src="max.jpg" width="151" height="142" hspace="5" vspace="5" align="middle"> from above. This is text after the image. Note that the text on both sides of the image dictate where "center" actually is.</p>

This is centered text
and the Max image from above. This is text after the image. Note that the text on both sides of the image dictate where "center" actually is.
I have not been able to get text to "flow" around both sides of the image... yet. I have found the only way is with tables, but that is an absolute pain to control.

<img src="max.jpg" width="151" height="142" align="bottom">
this forces the adjacent line of text to start aligned with the bottom of the image and subsequent lines to wrap below the image.

<img src="max.jpg" width="151" height="142" align="middle">
this forces the adjacent line of text to be aligned with the middle of the image. The next line would continue below the image.

<img src="max.jpg" width="151" height="142" align="top">
causes the text to be aligned with the top of the image. It continues across the window and the next line begins on the line below the image.

This attribute provides a method of introducing text in the event that a browser cannot download in-line images. If you need to see this one work, turn off "auto load images" and reload the page.

Use the ani attribute to set the URL of an animation cell resource.

Since the ani attribute is a WebTV extension, use the src attribute to specify an image that other browsers can display instead of the WebTV animation.

"Use the animateonselect attribute with the ani attribute to start an animation in motion only after the viewer has selected it. Each time that the viewer selects the image, the animation restarts."

"Use the anistartx attribute to set the initial position of the animation, relative to either the page or the table cell that contains it. The origin of the coordinate system is the top-left corner of the container, with positive values of x going to the right and positive values of y going down. There is no default value for anistartx; the attribute is not used if it is not specified."

"Use the anistarty attribute to set the initial position of the animation relative to either the page or the table cell that contains it. The origin of the coordinate system is the top-left corner of the container, with positive values of x going to the right and positive values of y going down. There is no default value for anistarty; the attribute is not used if it is not specified.

Use the anistarty attribute with the ani attribute."

<img src="max.jpg" align="left" width="100" height="50">
<img src="max.gif" align="right" width="100" height="50">
This pair of images uses both the height="" and width="" attributes. Notice, the browser does not "shrink" the image it changes it dramatically. Again, the image on the left is a "*.jpg" image and the one on the right is a "*.gif" image.

This attribute allows the downloading of a low resolution "src" or a reduced size "src" that will be replaced by a larger/more detailed image later in the download. An example of this can be found at: WWW.HIGHWAY57.CO.UK. When you access the page, look at the initial image. It is a pencil mock-up of the page. Watch closely, it will almost immediately be filled in with the proper image. It is a Netscape 1.1 extension.

Example:
The image on the left is the low resolution file. The image on the right is the high resolution image.

The image(s) on the left are the *.gif implementations whereas the ones on the right are *.jpg.
Reload the images several times. Unless your system is very fast, you should be able to see the low resolution image briefly before the high resolution one loads.
Note: you cannot mix the formats. I tried the *.gif file with the *.jpg file - it didn't work.
Second Note: Take a look at the gyrations that I had to go through to format this properly for the page. It's quite a look. What's a real pain is that MSIE won't recognize <p align="left">. It ignores it.

Answer:

It's an irritation from Adobe's Pagemill("PML") & Sitemill("SML"), WYSIWYG HTML editors currently shipping for the Mac, in the works for Windows. They always write out width and height attributes on every image. Here's their explantion for the tag:

The problem comes with this scenario:
1. Drag image onto page. You choose not to scale or resize it.
2. Save. PML/SML writes out the explicit width & height of the image.
3. Update the image in an image editor or switch files in the finder, so the image dimensions change.
4. Reopen the file in PML/SML.

Here's the question - which dimensions should it display the new logo file with? Should PML/SML use the explicit dimensions that were written out with the file, or should it change the dimensions to prevent squishing the image? HTML doesn't make a distinction between "here's the exact height & width that I want this image to be scaled to" and "here's the image's natural height and width just as a hint to make the browser run faster". However, people use the width & height ability of HTML to serve both purposes.

The NATURALSIZEFLAG makes that distinction. It tells PML/SML whether you explicitly set that dimension (either through the attribute inspector or by interactively resizing the image), or whether PML/SML wrote out the height & width for browser speed. If you scaled the image, then PML/SML will force the updated image into the dimensions indicated in the HTML file; if not, we'll resize the image and write out new height and width values.

NATURALSIZEFLAG can have four values:
0 - user explictly set height and width; use those numbers (squish)
1 - user set height explicitly, width can change freely
2 - user set width explicitly, height can change freely
3 - user hasn't set and specific size, both dimensions can change.
Typically, you'll see just 0 or 3.

from: Chris Ogden ChrisOgden@infovista.com

Use the reload attribute to specify how frequently the image should be reloaded. By default, there is no image reloading.

"The SEETHRU attribute can be used to designate a chromakey so that the image background matches the document background. This is an experimental feature and the format of the attribute's value has yet to be defined - suggestions are welcomed." (HTML+)

Use the selected attribute together with the usemap attribute or the ismap attribute. With the usemap attribute, the value you set for selected is the index of an area in the initial selection in the associated client-side map. When the WebTV interface displays the page, the cursor will be positioned over this area. With the ismap attribute, the value you set for selected is the x,y pair for the initial cursor position in the image map.

Note that in either case, the coordinates for the selected attribute should be calculated relative to the image, rather than the web page. That is, the origin of the image is its top-left corner, with positive values of x going to the right and positive values of y going down.

Use the transparency attribute to allow the background to show through the image. The transparency of the image can range from 0 (fully opaque) to 100 (fully transparent). The default value for transparency is 0. Note that the WebTV interface has implemented optimizations for a transparency value of 50 that make images draw faster.