Imagine That! (Page 5 of 5)

The <IMG> Tag

Pictures are worth thousands of words, especially in terms of downloading. Images on your Web pages that are placed using the <IMG> tag are inline graphics that are downloaded when the page is loaded unless the reader has set their browser's preferences to not auto-load images. Not everyone can tolerate waiting for the next advertisement to pop up with its animated GIF banner. Some readers use browsers that do not even support images. Try to be considerate and tolerant when writing code and take these people into consideration.

Also be aware that different browsers will display text wrapping differently, monitors will display images differently based on preferences and number of colors available, and different browsers do not support all HTML commands. Your page may be displayed in a manner that may surprise you. Browsers that only support HTML 2.0 will constrain type to a single line on one side of an image. Readers with different fonts can have different vertical alignments.

It is wise to test your pages in a number of different browsers before publishing them on the Web.

Enough lecture. Here is the <IMG> tag and its attributes including:

Basic stuff
Relative vs. Absolute addressing
Vertical alignment
Horizontal alignment
Stopping alignment
Adding space around an image
Scaling with the HEIGHT and WIDTH attributes
The <ALT> tag
Borders
The <LOWSRC> tag

Bacic <IMG> Tag Stuff

The basic code to display an image is:

     <IMG SRC="image.gif">

The SRC attribute is the URL of the image that is being displayed. The rules for pathnames of images are the same as for linking HTML pages. Let's go over that again, anyway, to beat it to death and prevent confusion.

An image can be in the same folder/directory as the HTML file that calls it.

An image can be in a different folder/directory (anywhere in the world) than the HTML file that calls it.

An image can be called by its exact and complete name (known as the URL or Uniform Resourse Locator). This is known as an absolute pathname (it must be absolutely correct!).

An image can be called by relative addressing (as in: go up one folder/directory and down again into the Images_Used folder/directory and the file is in there).

Relative vs. Absolute Naming Revisited

Absolute pathnames are not portable. If the file moves, your link will not work. If you make a mistake (anywhere) in the pathname, the link will not work. I would not reccommend absolute pathnames for general Web publishing, but for instances where there are security concerns or the files will not leave a corporate network. An example of an absolute link to a graphic is:

<A IMG SRC="D:/confidential/new_logo_design.gif">
The graphic file new_logo_design.gif is located on Drive D: in the confidential folder/directory
<A IMG SRC="G:/secure/president_sig.gif">
The graphic file president_sig.gif is located on Drive G: in the secure folder/directory

Relative pathnames are very portable. The files can be copied from one place to another and the links will be retained. Here are some examples:

<A IMG SRC="../Images/Back.gif">
The graphic file Back.gif is one folder/directory higher in the heirarchy, and then down one in the Images folder/directory
<A IMG SRC="../../Images/New/Back.gif">
The graphic file Back.gif is two folder/directories up in the heirarchy, then down into the Images folder/directory and down again into the New folder/directory.

Vertical Alignment Attributes

There are several options for vertical alignment:

ALIGN=TOP
ALIGN=MIDDLE
ALIGN=BOTTOM
ALIGN=TEXTTOP
ALIGN=ABSMIDDLE
ALIGN=BASELINE
ALIGN=ABSBOTTOM

Vertical image alignment: ALIGN=TOP

Aligns the top of the image with the topmost element in the line:

Code:
<IMG ALIGN=TOP SRC="Images.gif">Imagine That!
Result:
Imagine That!

Vertical image alignment: ALIGN=MIDDLE

Aligns the center of the image with the middle of the line of type. The middle of the line of type is usually calculated from the baseline, so the visual effect is usually not exactly what you would expect it to be; the type does not appear to be perfectly vertically centered to the image. This is more noticeable with larger type:

Code:
<IMG ALIGN=MIDDLE SRC="Images.gif">Imagine That!
Result:
Imagine That!

Vertical image alignment: ALIGN=BOTTOM

Aligns the bottom of the image with the bottom of the line of text:

Code:
<IMG ALIGN=BOTTOM SRC="Images.gif">Imagine That!
Result:
Imagine That!

Other supported attributes include:

Vertical image alignment: ALIGN=TEXTTOP

Aligns the top of the image with the top of the tallest text element in the line of type (where ALIGN=TOP references the tallest element overall, other images included):

Code:
<IMG ALIGN=TEXTTOP SRC="Images.gif">Imagine That!
Result:
Imagine That!

Vertical image alignment: ALIGN=ABSMIDDLE

Aligns the center of the image with the center of the largest element in the line (where ALIGN=MIDDLE usually uses the baseline of the text as a reference):

Code:
<IMG ALIGN=ABSMIDDLE SRC="Images.gif">Imagine That!
Result:
Imagine That!

Vertical image alignment: ALIGN=BASELINE

Aligns the bottom of the image with the baseline of the text:

Code:
<IMG ALIGN=BASELINE SRC="Images.gif">Imagine That!
Result:
Imagine That!

Vertical image alignment: ALIGN=ABSBOTTOM

Aligns the bottom of the image with the bottommost element in the line (although when type is involved, usually the baseline of the type is used):

Code:
<IMG ALIGN=ABSBOTTOM SRC="Images.gif">Imagine That!
Result:
Imagine That!

Horizontal Alignment Attributes & Text Wrap

It is important to remember that not all readers will see your page through the same Web browser and some variation is to be expected. Try to plan for it in your design. Older browsers (HTML 2.0) especially only allow one line of type on either the left or the right of an image. Newer attributes for text wrap include:

ALIGN=LEFT
ALIGN=RIGHT

Horizontal image alignment: ALIGN=LEFT

Positions the image on the left side of the Web page with text to the right:

Code:
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That!
Result:

Imagine That! Remember that a paragraph of type may display differently in another Web browser. Some Web browsers and those supporting older versions of HTML (HTML 2.0) will only allow a single line of type to be displayed next to an image and the rest of the paragraph will be pushed to a new line that will start below the image. This is usually not desirable but your page may attract readers who will see you page in this fashion. It is not always possible to design perfect layouts for all browsers, but it is important to be aware that this type of event is possible. One of the best ways to prepare your pages for the Web is to preview the pages in a variety of browsers to see for yourself how the presentation will appear.

Horizontal image alignment: ALIGN=RIGHT

Positions the image on the right side of the Web page with text to the left:

Code:
<IMG ALIGN=RIGHT SRC="Images.gif">Imagine That!
Result:

Stopping Text Wrap

Once you start wrapping text, the Web browser will continue to wrap all images until there is a bit of code to tell it to stop. The code is similar to the tag used to force a line break, with some flexibility:

BR CLEAR=LEFT
BR CLEAR=RIGHT
BR CLEAR=ALL

Stop image alignment: BR CLEAR=LEFT

This code forces the Web browser to break to a new left margin (below the image) if the image is ALIGN=LEFT. If the image is ALIGN=RIGHT, the attribute seems to have no effect. Remember, results may vary:

Code:
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That! .....
Result:

Imagine That!
NOTE: CLEAR=LEFT with the IMAGE on the LEFT WILL STOP text wrap. Remember that a paragraph of type may display differently in another Web browser. There are a number of instances where only a single line of type will display next to the image and the rest of the paragraph will be pushed to a new line that will start below the image.

Code:
<IMG ALIGN=RIGHT SRC="Images.gif">Imagine That! .....
Result:

Imagine That!
NOTE: CLEAR=LEFT with the IMAGE on the RIGHT WILL NOT STOP text wrap. Remember that a paragraph of type may display differently in another Web browser. There are a number of instances where only a single line of type will display next to the image and the rest of the paragraph will be pushed to a new line that will start below the image.

Stop image alignment: BR CLEAR=RIGHT

This code forces the Web browser to break to a new left margin (below the image) if the image is ALIGN=RIGHT. If the image is ALIGN=LEFT, the attribute seems to have no effect. Remember, results may vary:

Code:
<IMG ALIGN=RIGHT SRC="Images.gif">Imagine That! .....
Result:

Imagine That!
NOTE: CLEAR=RIGHT with the IMAGE on the RIGHT WILL STOP text wrap. Remember that a paragraph of type may display differently in another Web browser. There are a number of instances where only a single line of type will display next to the image and the rest of the paragraph will be pushed to a new line that will start below the image.

Code:
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That! .....
Result:

Imagine That!
NOTE: CLEAR=RIGHT with the IMAGE on the LEFT WILL NOT STOP text wrap. Remember that a paragraph of type may display differently in another Web browser. There are a number of instances where only a single line of type will display next to the image and the rest of the paragraph will be pushed to a new line that will start below the image.

Stop image alignment: BR CLEAR=ALL

This code forces the Web browser to stop text wrap regardless of whether the image is on the left or the right. The code is similar to CLEAR=LEFT and CLEAR=RIGHT:

Code:
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That! .....
Result:

The results are shown above. The command was used after each example.

Adding Space Around Images

Images can stand out more and have greater impact with the use of "white" space around the image. This can be done with the HSPACE and VSPACE attributes. These attribute are used to specify the number of pixels of white space to the left/right or above/below an image:
They can be used by themselves or together The sample code is shown next is included to give an idea of what the default settings for your browser will display without the HSPACE and VSPACE attributes:

Code:
<IMG ALIGN=LEFT SRC="Images.gif">.......
Result:

Remember that a paragraph of type may display differently in another Web browser. Some Web browsers and those supporting older versions of HTML (HTML 2.0) will only allow a single line of type to be displayed next to an image and the rest of the paragraph will be pushed to a new line that will start below the image. This is usually not desirable but your page may attract readers who will see you page in this fashion. It is not always possible to design perfect layouts for all browsers, but it is important to be aware that this type of event is possible. One of the best ways to prepare your pages for the Web is to preview the pages in a variety of browsers to see for yourself how the presentation will appear.

Adding space around images: HSPACE

Use this attribute to specify the number of pixels of white space to the left/right an image:

Code:
<IMG ALIGN=LEFT HSPACE=10 SRC="Images.gif">.......
Result:

Adding space around images: VSPACE

Use this attribute to specify the number of pixels of white space above and below an image:

Code:
<IMG ALIGN=LEFT VSPACE=10 SRC="Images.gif">.......
Result:

Adding space around images: Using both HSPACE and VSPACE

The attributes can be used together as demonstrated in the following example:

Code:
<IMG ALIGN=LEFT HSPACE=10 VSPACE=10 SRC="Images.gif">.......
Result:

Code:
<IMG ALIGN=LEFT HSPACE=20 VSPACE=20 SRC="Images.gif">.......
Result:

Combinations Of Attributes

Browsers today are not likely to support some combinations of attributes and the results can be unexpected. Again, test your pages in several Web browsers before publishing. Here are a couple of examples of attribute combinations::

Code:
<IMG ALIGN=TOP ALIGN=LEFT SRC="Images.gif">.......
Result:

Code:
.......<IMG ALIGN=BOTTOM ALIGN=RIGHT SRC="Images.gif">
Result:

Scaling with the HEIGHT and WIDTH attributes

Your pages can load a little faster with the help of the HEIGHT and WIDTH attributes. This works because the browser will create a space for an image the size of the number of pixels specified by HEIGHT and WIDTH (instead of waiting until it reads that information from the image itself) and continue to format the page around this space.

Browsers that do not support HEIGHT and WIDTH will ignore the commands, so it doesn't hurt to use them, but it does imply that you know the size that the image will be when it is created and displayed.

If the size of the actual image does not match the size of the HEIGHT and WIDTH size in pixels, the image will be scaled. Scaling an image up to a larger size can make an image look pixelated or bitmapped, while scaling an image down will make it look smoother.

Scaling images down will take longer to load than an image scaling up because of file size.

Example of HEIGHT and WIDTH attributes
Code: <IMG SRC="Q.gif"> (Graphic is 72x72 pixels at 72dpi shown 100%)	Code: <IMG SRC="Images.gif"> (Graphic is 72x44 pixels at 72dpi shown 100%)
Code: <IMG SRC="Q.gif" HEIGHT=36 WIDTH=36 > (Scaling to 50%)	Code: <IMG SRC="Images.gif" HEIGHT=22 WIDTH=36 > (Scaling to 50%)
Code: <IMG SRC="Q.gif" HEIGHT=144 WIDTH=144 > (Scaling to 200%)	Code: <IMG SRC="Images.gif" HEIGHT=88 WIDTH=144 > (Scaling to 200%)
Code: <IMG SRC="Q.gif" HEIGHT=88 WIDTH=144 > (Anamorphic scaling)	Code: <IMG SRC="Images.gif" HEIGHT=144 WIDTH=144 > (Anamorphic scaling)

Providing A Clue Without a View:
The <ALT> Tag

Many individuals bent on speed will not auto load images or will use text-only browsers to get through the Web as quickly as they possibly can. Sites that do not provide them with options to navigate will be lost on them. Use the <ALT> tag to give your readers a way to navigate your pages.

The following is an example of what a Netscape browser would display for a missing link:

Code: <IMG SRC="WhiteElephant.gif">
Result:

Use of the <ALT> tag gives the reader an idea of the content of the image, which may be especially useful for icons such as "HOME", "BACK", etc.

Code: <IMG SRC="WhiteElephant.gif" ALT="WhiteElephant">
Result:

[ Personally, I like to put my ALTs in square brackets ]

Borders

Normally, an image on a web page will not have a border unless it is a link as shown below:

This image is a link:
This image is not a link:

The width of the border of an image can be changed or removed as shown:

Example of removing the border from an image with a link:
Example of increasing size of border:

Fast Previews With The LOWSRC Attribute

If you are looking to optimize your Web page, the LOWSRC attribute could be for you. The idea is to get the browser to load a very low resolution image on the first pass and after the page is initially loaded and displayted, the image specified as the high resolution image by the SRC attribute is loaded and fades in to replace the LOWSRC image. This is entirely optional and older browsers ignore LOWSRC.

Code:
<IMG SRC="VeryBig.gif" LOWSRC="VerySmall.gif">

There are different ways to work with LOWSRC:

You could save the large image with a different name at a very low resolution creating the smallest possible file size
You could use a completely different very low resolution image, for instance, one with a message that the file is not completely loaded or is still in progress.