Image Tag
HTML: <img>
XHTML: <img />
Use the image tag to add an image to your page. Be aware that images will always slow down your load time, so watch those file sizes.
Rule
Always transload or beam any images that you want to display on your pages. Hot-linking from someone else's site is a major NO-NO.
The image tag is an empty (non-container) element. There is no </img> closing part, so we have to close it with a space and a slash in XHTML.
Here is a 329 x 372 sample image for this discussion:
http://www.gnu-bee.com/thanksgiving/fall_farmscene.jpg
src="URL"
width="?"
height="?"
alt="?"
Src="URL"
You can't show an image at all if you don't have an image file. In other words, no URL, no image.
The URL may be absolute (complete) or relative (short). Relative URL's load faster.
Code showing absolute and relative URLsAbsolute URL
<img src="http://www.gnu-bee.com/thanksgiving/fall_farmscene.jpg" />
Relative URL
<img src="fall_farmscene.jpg" />
Width and Height
width="?"
Use a number (pixels) or a percentage (of page width).
height="?"
Use a number (pixels). You can use percentage, but the image should be
contained in something such as a sized table cell or a div.
Always use width & height. This will speed up load time a bit. A browser will assign the correct amount of space to your page and go on loading your page while your image is staring to show. You can use the "natural" size or you can change the dimensions that will be displayed to make it appear larger or smaller. You can warp it out of shape if you want (see below).
Code so far(full size) <img src="fall_farmscene.jpg" width="329" height="372" />Alt="?"
(1/2 size) <img src="fall_farmscene.jpg" width="165" height="186" />
(1/3 size) <img src="fall_farmscene.jpg" width="110" height="124" />
The alt attribute is used to provide "alternate text". It describes your image while your page is loading or for viewers that browse with images turned off or use a text reader.
Alt's are immensely appreciated by people with low vision. It's an accessability issue. Alt's are so important that there are forums discussing how to write them well. Your alt can be brief or exhaustive. CNN often provides a complete paragraph.
Sample alt attributesalt="My friend, Bob"Complete (minimal) image tag
alt="Austin pipe organ at Balboa Park in San Diego, CA. This is the largest outdoor organ in the world. Free concerts are held every Sunday at 2:00 pm. Used with permission."
<img src="fall_farmscene.jpg" width="329" height="372" alt="farm scene with turkey" />
Recommended Attribute: border="?"
Use a number (pixels) or percentage.
You can add a border to your image if you like. Or set it to "0" (zero) if you don't want a border. Most browsers have a default border setting of 1.
If you use a clear (transparent) image as a spacer, the border could show, which you don't want. Border="0" solves the problem.
Complete image tag<img src="fall_farmscene.jpg" width="329" height="372" alt="farm scene with turkey" border="4" />
By the way, I've added an animated image to my sig for a special effect (see below). Most people will find this very annoying, but it serves as an illustration of how an image can be resized with width and height.
Code<img src="http://www.wtv-zone.com/gnubee/images/color-donut_sm.gif" width="90%" height="3" alt="animated image used as horizontal rule">
Happy coding!
Gnubee
