The <IMG> Tag

Images are linked to Web pages using the <IMG> tag. Graphics are downloaded when the page is loaded unless the reader has set the browser's preferences to not auto-load images. A few Web browsers do not even support images.

Also be aware that Web browsers generally work to fit pages into the size of the current window. A Web page may appear quite different in a large window than a small one. Some users may have small monitors. Some users may want to print a Web page. Test!

Attributes Of The <IMG> Tag

The <IMG> allows a lot of flexibility for displaying images:

The SRC attribute	Relative vs. Absolute addressing
The ALIGN attribute	Vertical alignment
The ALIGN attribute	Horizontal alignment
The BR CLEAR attribute	Stopping alignment
The HSPACE & VSPACE attributes	Adding space around an image
The HEIGHT & WIDTH attributes	Scaling images
The ALT attribute	Displaying text when images are supressed
The BORDER attribute	Adding or removing borders on images
The LOWSRC attribute	What to dislay while the image loads

The SRC Attribute

The example below shows the basic code to display an image.

The SRC attribute provides the URL (Uniform Resourse Locator) of the image that is being displayed. The rules for pathnames of images are the same as linking HTML pages. They are listed again here for convenience:

• An image does not have to be in the same folder, directory or server than the HTML file that calls it--the image can be anywhere in the world
• An image must be called by its exact and complete filename
• An image may be addressed by its relative address or absolute address:

Example: <IMG> Tag Using Relative Addressing
< IMG SRC="../Images/Back.gif"> ____________</Example>

Result:

The graphic file "Back.gif" is being referenced. It is on the same hard disk as the HTML file doing the call. The graphic is being referenced as follows: ../ means "up" one folder (or directory in the file hierarchy towards the root) then "down" Images/ means "down" one folder (or directory) to the "Images" directory Back.gif is the exact name of the file. Capitalization is a consideration. ____________</Result>

Absolute addressing is usually used with images on different physical hard disks. The address "points" to the exact, literal, and complete name of the graphic (known as the file's URL or Uniform Resourse Locator). It must be absolutely correct and the Web browser must have access to the server. Absolute addressing often makes the Web page less portable.

Example: <IMG> Tag Using Absolute Addressing
< IMG SRC="www.on-the-web.com/product-library/widget7.jpg"> ____________</Example>

Result:

The graphic file "widget7.jpg" is being referenced. It can be anywhere in the world. The Web browser must have access to the Web site for the image to load. The graphic is being referenced as follows: www.on-the-web.com means that the Web browser will look on the Internet for "on-the-web.com" product-library/ means that the image is in the "product-library" directory on the server housing "on-the-web.com" widget7.jpg is the exact name of the file. Capitalization is a consideration. ____________</Result>

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.

Example: <IMG> Tag ALIGN=TOP
<IMG ALIGN=TOP SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

Vertical image alignment: ALIGN=MIDDLE

Aligns the center of the image with the middle of the line of type. The baseline of the type is usually placed at the vertical center of the graphic.

Example: <IMG> Tag ALIGN=MIDDLE
<IMG ALIGN=MIDDLE SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

Vertical image alignment: ALIGN=BOTTOM

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

Example: <IMG> Tag ALIGN=BOTTOM
<IMG ALIGN=BOTTOM SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

Other attributes (not supported by all browsers) 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

Example: <IMG> Tag ALIGN=TEXTTOP
<IMG ALIGN=TEXTTOP SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

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).

Example: <IMG> Tag ALIGN=ABSMIDDLE
<IMG ALIGN=ABSMIDDLE SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

Vertical image alignment: ALIGN=BASELINE

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

Example: <IMG> Tag ALIGN=BASELINE
<IMG ALIGN=BASELINE SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

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).

Example: <IMG> Tag ALIGN=ABSBOTTOM
<IMG ALIGN=ABSBOTTOM SRC="Images.gif">Imagine That! ____________</Example>

Result:
Imagine That! ____________</Result>

Horizontal Alignment Attributes

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. Some older browsers that can only interpret HTML 2.0 only allow one line of type on one side of an image before continuing the type below the 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.

Example: <IMG> Tag ALIGN=LEFT
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Horizontal image alignment: ALIGN=RIGHT

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

Example: <IMG> Tag ALIGN=RIGHT
<IMG ALIGN=RIGHT SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Stopping Text Wrap (BR CLEAR)

One consideration of horizontal text wrap not found in vertical text wrap is the need to stop the text wrap. Once you start wrapping text, the Web browser will continue to wrap all images until there is an instruction to tell it to stop. The code is similar to the <BR> tag which is used to force a line break.

• <BR CLEAR=LEFT> This code forces the Web browser to continue the type on a new line (below the image) if the image is ALIGN=LEFT.
• <BR CLEAR=RIGHT> This code forces the Web browser to continue the type on a new line (below the image) if the image is ALIGN=RIGHT.
• <BR CLEAR=ALL>This code forces the Web browser to continue the type on a new line (below the image) regarless of ALIGN= attribute.

Example: <IMG> Tag CLEAR=LEFT
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That!<BR CLEAR=LEFT>..... ____________</Example>

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. ____________</Result>

Example: <IMG> Tag CLEAR=RIGHT
<IMG ALIGN=RIGHT SRC="Images.gif">Imagine That!<BR CLEAR=RIGHT>..... ____________</Example>

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. ____________</Result>

Example: <IMG> Tag CLEAR=RIGHT with ALIGN=LEFT
<IMG ALIGN=LEFT SRC="Images.gif">Imagine That!<BR CLEAR=RIGHT>..... Note the <BR CLEAR=RIGHT> when used with <IMG ALIGN=LEFT> ____________</Example>

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. ____________</Result>

Adding Space Around Images

Images can stand out more and have greater impact with a little "white space" around them. This can be done with spacing attributes of the <IMG> tag:

• HSPACE
• VSPACE

These attribute are used to specify the number of pixels of white space to the left/right (HSPACE) or above/below (VSAPCE) an image. They can be used by separately or together. When combined with the ALIGN attribute, a variety of effective results are possible.

Example: <IMG> Tag with HSPACE=9
<IMG HSPACE=9 SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Example: <IMG> Tag with VSPACE=9
<IMG VSPACE=9 SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Example: <IMG> Tag with HSPACE=9 & ALIGN=RIGHT
<IMG HSPACE=9 ALIGN=RIGHT SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Example: <IMG> Tag with HSPACE=15 & VSPACE=15 ALIGN=LEFT
<IMG HSPACE=15 VSPACE=15 ALIGN=LEFT SRC="Images.gif">Imagine That! ____________</Example>

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. ____________</Result>

Scaling Images Using HEIGHT And WIDTH Attributes

Your pages can load a little faster with the help of the HEIGHT and WIDTH attributes. As a page is interpreted, a Web browser will generally display elements as they are encountered. With images, the Web browser usually reads the entire image (or at least the header information) before any more data is displayed.

The HEIGHT and WIDTH attributes allow the browser to set aside space for the image and continue to interpret the data. Older browsers that do not support HEIGHT and WIDTH will ignore the commands. 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 often make it look smoother or sharper.

Example: Height and Width Attribute (100%)
<IMG HEIGHT=72 WIDTH=72 SRC="Q_72.gif"> NOTE: 72x72 Image is displayed at 100%. ____________</Example>

Result:
NOTE: 72x72 Image is displayed at 100%. ____________</Result>

Example: of Height and Width Attribute (50%)
<IMG HEIGHT=36 WIDTH=36 SRC="Q_72.gif"> NOTE: 72x72 Image is displayed at 50%. ____________</Example>

Result:
NOTE: 72x72 Image is displayed at 50%. ____________</Result>

Example: of Height and Width Attribute (Anamorphic)
<IMG HEIGHT=36 WIDTH=144 SRC="Q_72.gif"> NOTE: 72x72 Image is displayed at 50% HEIGHT, 200% WIDTH. ____________</Example>

Result:
NOTE: 72x72 Image is displayed at 50% HEIGHT, 200% WIDTH. ____________</Result>

The <ALT> Attribute

Some Web browsers do not auto-load images or use a text-only interface. Sometimes remote sites are not available when viewing a page. The <ALT> attribute offers a way to provide a text tag that will display when an image does not load.

The only way to display the result of the <ALT> tag is with a broken link. The following examples are intentional.

Example: Broken Link Without <ALT> Attribute
<IMG SRC="Missing_Image.gif"> NOTE: Broken link is intentional. ____________</Example>

Result:
NOTE: Broken link is intentional. ____________</Result>

Example: Broken Link With <ALT> Attribute
<IMG SRC="Missing_Image.gif" ALT="[ Missing Image.gif ]"> NOTE: Broken link is intentional. ____________</Example>

Result:
NOTE: Broken link is intentional. ____________</Result>

Example: Broken Link With <ALT> Attribute And HEIGHT & WIDTH
<IMG HEIGHT=36 WIDTH=36 SRC="Missing_Image.gif" ALT="[ Missing Image.gif ]"> NOTE: Broken link is intentional. NOTE: Use of HEIGHT and WIDTH may prevent <ALT> tag from displaying in some browsers. ____________</Example>

Result:
NOTE: Broken link is intentional. NOTE: Use of HEIGHT and WIDTH may prevent <ALT> tag from displaying in some browsers. ____________</Result>

Borders

Images usually display borders in Web browsers only when they are links. The <BORDER> attribute can remove a border or increase the size of a border.

Example: Image With Link
<A HREF="RESULT"><IMG SRC="Images.gif"></A> NOTE: Link is to Result. ____________</Example>

Result:
NOTE: Link is to Result. ____________</Result>

Example: Image With Link & BORDER
<A HREF="RESULT"><IMG SRC="Images.gif" BORDER=5></A> NOTE: Link is to Result. ____________</Example>

Result:
NOTE: Link is to Result. ____________</Result>

Example: Image With Link & No BORDER
<A HREF="RESULT"><IMG SRC="Images.gif" BORDER=0></A> NOTE: Link is to Result. ____________</Example>

Result:
NOTE: Link is to Result. ____________</Result>

The <LOWSRC> Attribute

The <LOWSRC> attribute will load an alternate (low resolution) image and continue to interpret the page, displaying the image only after it is fully read by the Web browser. The advantage is that the reader has an opportunity to view other content on the page while waiting for images.

NOTE: The image 1x1_Pixl.gif would load before displaying Images.gif.
____________</Example>

Example: of LOWSRC Attribute

Result:
NOTE: The image 1x1_Pixl.gif would load before displaying Images.gif. ____________</Result>