Image Techniques

Ways of Handling Images
Method	How it Renders	Sample HTML
Displayed Image aka inline, embedded
Text Link to Image	Click the text link to see an African woman.
Icon Link to Image	Click the camera icon to see an African woman.
Thumbnail Link to Image	Click thumbnail for a larger image.

Image Displaying

<!-- display an image --> <img src="../image/people/africanwoman.jpg"
width="200"
height="236"
border="0"
align="top"
alt="African woman"
longdesc="describeafricanwoman.txt">
<!-- usually all on one line -->

Img Tag parameters
Parameter	Notes
<img	starts an inline embedded image, that displays a picture
src="../image/people/africanwoman.jpg"	where to find the jpg, png or gif, possibly an absolute url of the form http://mindprod.com/image/people/africanwoman.jpg
width="200"	width of the image in pixels. You may magnify or shrink, but shrinking wastes bandwidth and magnifying generates poor quality images. If you leave it out it the image will render natural size, but will render more slowly.
height="236"	width of the image in pixels. You may magnify or shrink, but shrinking wastes bandwidth and magnifying generates poor quality images. If you leave it out it the image will render natural size, but will render more slowly.
align="top"	control how the image aligns with the surrounding text. Experiment. You may be surprised. choices are: Image Alignments Type Kosher Rendering How Supposed to Render default The quick brown fox emailed ! No special aligning. Inherits the aligning of its surroundings. Don’t key the word default, just leave out the alignment parameter. absbottom The quick brown fox emailed ! Aligns the bottom of the image with the bottom of the current line(including descenders). Not an officially sanctioned value, but it is widely supported. absmiddle The quick brown fox emailed ! Aligns the middle of the current line with the middle of the image. Opera aligns with middle of text. IE aligns with middle of any text or other images on the line. Not an officially sanctioned value, but it is widely supported. baseline The quick brown fox emailed ! Aligns the bottom of the image with the baseline of the current line. Not an officially sanctioned value, but it is widely supported. bottom The quick brown fox emailed ! Aligns the bottom of the image with the baseline of the current line. This is the same as baseline. center The quick brown fox emailed ! Centred left/right. middle centers up/down. Not an officially sanctioned value, but it is widely supported. left The quick brown fox emailed ! Image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image. middle The quick brown fox emailed ! Aligns the baseline of the current line with the middle of the image. right The quick brown fox emailed ! Will align the image aligns with the right margin, and the text wraps around the left. Note how the images jump out of their usual order of embedding in the text. top The quick brown fox emailed ! Aligns itself with the top of the tallest item in the line. There are two images, one, a green square 20 points on a side, and one, a png email address image produced by Masker which has a transparent border around it. It is normally aligned using a CSS mailto style to tweak the position.
alt="African Woman"	Labels the image. This is not displayed. Sometimes the alt text becomes a tool tip hoverhelp line. Used by blind people to at least know what pictures contain. You may use &entities in the alt, but not <tags.
longdesc="describeafricanwoman.txt"	Text file containing a detailed description of the image. Primarily used by the visually impaired.