You may read the following sections in their entirety
or use these choices to go directly to a section.

| Images - introduction | | Placing images on your web pages | | Saving (downloading) an image | | Image formats | | Image attributes | | Images not appearing in your browser? |

I have a directory or folder set aside for images that I download from the net and because there are so many images out there, I have sub-directories to categorize them. Some of my categories are: backgrounds, buttons, religious, animated images, lines, etc. If I need an image for a web page, I just copy it to the directory I need it in.

While images can really add to a web page, be careful that you do not overuse them. It takes time for a browser to display an image and so a lot of images can take a lot of time. Also, the bigger the image, the longer it will take to display. Many viewers, especially those with dial-up connections or with slower high speed connections, do not want to wait a long time for a web page to display. What often happens then, is that viewers will leave your site before having really seen it. Now it is possible to do certain things to speed up the displaying of text and images and we will get to that later in this lesson.

<IMG SRC="image.gif">

The chain at the top of this lesson:

was put there with this command:

         <IMG SRC="hrchain.gif">

A discussion on this image command.

1. I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace an <HR> or Horizontal Rule command. There are many places on the web where you can find line images to replace horizontal rules. Here is one of them:

   http://members.aol.com/dcreelma/imagesite/image.htm

2. IMG stands for "image" (IMaGe). It means that an image will be placed here. The IMG tag is used to insert images within the text. These are often called "inline" images.
3. SRC stands for "source" (SouRCe). It is an IMG attribute that tells the browser where the source for the image is, that is, the name of the image and where to find the image. Thus the SRC attribute specifies the name and location (URL) of the image file. It can be a relative or an absolute URL. The image should be located in the same directory as the web page it is to appear on. Since no directory is given, the source is assume to be the current directory - the directory of the web page.
4. "hrchain.gif" is the complete name of this image and this name follows the same format as your HTML document names. That is, you have the name (in my case it is "hrchain"), a dot, and then the suffix ("gif").

To quickly save an image (this should work on most browsers), just place the mouse pointer anywhere on the image, and click once with the RIGHT mouse button (that is, the opposite button that you would normally use when clicking with your mouse). If this doesn't work, then click and hold the mouse button down. A menu will pop up beside the image with a number of choices. One of these choices is Save Image As ... or Save Picture As ... or Save Link As .... Choose the option that applies to your browser and the usual dialog window will open up asking you where on your hard drive you want the file (that is, the image) saved. For example, to practice saving an image, go back to the chain image at the beginning of this lesson and save it (it is free to take).

This same method for saving an image can also be used to save a background image. If you see a background (wallpaper) you like and are allowed to save it, just click anywhere on the wallpaper with the right mouse button and follow the same procedure as described above for saving an image.

Finally, if you want to try my examples with images, you will need to save the images in my examples into the same folder that you are saving my web page examples in (using the above method to save images). If you do not save the images to your working folder, the images will not appear on your web pages.

1. .gif (gif is pronounced "jiff" by some people, but most people pronounce gif with a hard g as in gift). GIF stands for General Image Format. This format was invented by Compuserve and is the most common format on the World Wide Web. Its simple format is a series of pixels that line up to form a picture. This format can store black and white, grayscale, and color images.

   With images in this format, you are limited to a maximum of 256 colors for any image. If you were to examine an image in a paint program such as Paint Shop Pro, it will take the raw image data and determine the 256 (or fewer) colors that best describe the color content of the image and creates a color table changing these colors into integers (or decimal numbers as they are called) ranging from 0 to 255 (= 256 numbers). Thus a picture of a blue sky will have mostly blues in the color table while a picture of trees will have a lot of browns and greens in the table. Each actual pixel in the original image is then examined for its true color and matched to the closest color in the color table. The pixel is then assigned the corresponding decimal number which is called the "color index value". The result of all this a table of color indexes along with a color map table that maps each of these indexes into the chosen colors.

   Color maps are known by a variety of names such as Color Table, Indexed Color, Palette, and Color LookUp Table. Thus the GIF format stores its colors in a 256 color indexed color map. This technique can do a very good job in creating images that are near identical to the original image. The GIF format is ideal for images that contain larger single-colored regions (no more than 256 colors) such as buttons, logos, icons, lines and clip art. If the image has more than 256 colors, you will have to reduce the number of colors in the image to 256 (by dithering for example). Also, remember that the fewer colors you use, the smaller the file.

   Color photographs, on the other hand, often contain more than 256 colors and with no large single-colored regions. GIF images use a form of "lossless" compression called LZW named after its creators. LZW compression works by finding repeated patterns within the image. The more repeated patterns, the better the compression. Thus images with large blocks of color work great as GIF files because they can be compressed so well. Scanned images such as photographs have fewer large blocks of color and therefore do not compress as well. Thus photographs in GIF format tend to look grainy and blotchy. There are two versions of the GIF format - GIF87 and GIF89. The GIF89 format allows you to also make one of the colors of the image transparent (such as the background color).

2. .jpeg or .jpg stands for Joint Photographic Experts Group. Recall that for IBM and IBM compatibles not running Windows 95 or higher, only a 3 letter suffix is allowed, while for MAC, Unix, Amiga and Windows 95 or higher users, a four character suffix is allowed. As the name Joint Photographic Experts Group implies, this format was created especially for storing photographic images, and it does this in a compact digital format. Thus this format can support any number of colors (millions more than the 256 maximum number of colors in a GIF image) as well as images that have no large single-color regions.

   So if you are dealing with photographic images, JPEG format is recommended because of image quality and image file size. JPEG file sizes are not determined by the number of colors, but by the amount of compression. When you save an image in JPEG format, you choose how "lossy" you want the compression to be - from lossless to extremely lossy. The more lossy the compression, the smaller will be the resulting file size but also the less clear the detail. Extremely compressed JPEG images can also look very grainy or blotchy. Therefore, if you are using JPEG format, try different levels of compression to see what gives optimum quality.

   A compressed file must be decompressed to be displayed and JPEG images can take significantly longer than GIF images to decompress and display. This is because JPEG is a more complicated form of compression. You might save file space on the Hard Drive with a JPEG image and so save time loading the file, but decompressing and displaying the image can negate the time savings.

There are a number of attributes that go with the IMG command (SRC is only one of them) and we will begin our study of them with the BORDER and ALIGN attributes. Recall that an attribute supports or modifies a command.

BORDER ATTRIBUTE

<HTML>

<HEAD>

<TITLE>HALL RENTAL</TITLE>

</HEAD>

Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see:

ABOUT OUR HALL

We are wheelchair accessible.

Now for a discussion on the above HTML document.

1. The ALIGN="LEFT" before the IMG command tells the browser to place the image on the left side of the screen (which is actually the default value).

   Problem 1: SWITCH to your text editor and change the ALIGN="LEFT" to ALIGN="CENTER". Save the change, SWITCH back to your browser, and load the document. What change do you see?

   Problem 2: Now repeat this process and change to ALIGN="RIGHT". What happened this time?

   | Click here to go to the answer section |

   Using a value of LEFT or RIGHT will make the image and text line up against the left or right margin of the browser screen.

2. The BORDER="0" means that we want no border. It is clear from the image that we do not need a border. Border widths are measured in pixels. Try a border of 10 pixels, that is, replace the number 0 with the number 10 - as in BORDER="10". Note the difference. Sometimes you will want a small border if the image comes with a clear or transparent background - especially if you want the image to be a link (we will study images as links in Lesson Eight). Also, in some situations, a browser will automatically place a border around the image and you may not want that to happen. To avoid these situations, control the border with the BORDER attribute.
3. Exactly how big is one pixel? Does it have a specific size? The answer is that a pixel does not have a specific size. Its size depends on a number of things. One of them is the resolution of the monitor being used. A high resolution monitor has a smaller size pixel than a low resolution monitor because a high resolution monitor has more pixels to the inch (or centimetre). Therefore the size of your image will vary a little from browser to browser. However, your images (and text) will always be in the right proportion no matter which monitor they are viewed on - and so they will always look good in any browser.
4. Images can have text printed next to them. The ALIGN="MIDDLE" that you see after the BORDER attribute tells the browser to align the words "We are wheelchair accessible" with the middle of the image. Note that the command is "MIDDLE" and not "CENTER".

   Also, only one line of text is allowed with this ALIGN command. If the line is too long or you have more than one line, the rest will be placed below the image. Try adding some words or another line to the words "We are wheelchair accessible" to see this happen.

   Problem 3: Change the ALIGN="MIDDLE" to ALIGN="TOP". What happened?

   Problem 4: Change to ALIGN="BOTTOM". What happened this time?

| Click here to go to the answer section |

The values TOP, MIDDLE and BOTTOM specify where any text following the image should be placed. Remember that if more than one line follows after the image, the additional lines will be placed below the image. You can also force text below such an aligned image by using the BR tag with the CLEAR attribute as in <BR CLEAR>. You may want to experiment with this attribute.

WIDTH, HEIGHT and HSPACE attributes

To understand the WIDTH, HEIGHT and HSPACE attributes, SWITCH to your text editor and make changes to our wheelchair accessibility example so that it now looks like:

<HTML>

<HEAD>

<TITLE>HALL RENTAL</TITLE>

</HEAD>

Now save the document, SWITCH back to your browser, load the document and this is what you should see:

ABOUT OUR HALL

We are wheelchair accessible.

The WIDTH and HEIGHT attributes involve the size of the image. This size is measured in pixels. Thus our size has a width of 96 pixels and a height of 90 pixels. In pixels, the difference between 96 and 90 is very small and may not even be noticeable. It is important for you to include the size of your image. When you include the size of the image, the browser can then immediately set aside the required space for your image and begin loading and displaying your text while the image is still being loaded. This is important since most often images take longer to load than text. Remember also that the bigger the image, the longer it will take the browser to load and display it. That is why you often see text being displayed before images are completely displayed. If the browser does not know how much space to set aside for your image, it will not know where to place the text. The browser then has to work on displaying the image before the text. In other words, use the WIDTH and HEIGHT attributes as this allows a browser to lay out a page in advance, as it then knows where the text around the image should be placed.

Leaving out the WIDTH and HEIGHT attributes is also not considered good HTML coding practice. In other words, if you want to follow good coding practices, the WIDTH and HEIGHT attributes must be included with the IMG tag.

So you are strongly encouraged to include the WIDTH and HEIGHT attributes with your IMG tag. The ideal situation is to have the WIDTH and HEIGHT sizes the same as the original image. That is, the WIDTH and HEIGHT attributes should contain the actual image's dimensions. Using WIDTH and HEIGHT with incorrect values, or with percentage values is not recommended. Most browsers will resize the image to the indicated size, but this often gives poor results.

There are programs on the web that can be downloaded that create, change, modify and work with images. These programs (for example, Paint Shop Pro) will tell you the size of your image and allow you to change its size to suit your needs (that is, you can resize the image).

If you see an image's size in a paint program or elsewhere written as 120 x 80, it means that the WIDTH is 120 pixels and the HEIGHT is 80 pixels. The first number is always the width and the second number is always the height. If there are three numbers as in 120 x 80 x 16, then the third number is the number of colors associated with the image.

Problem 5: What do you think is the effect of the HSPACE attribute?

| Click here to go to the answer section |

The ALT attribute

To see the effect of the ALT attribute, SWITCH to your text editor and make changes to the last program so that it now looks like:

<HTML>

<HEAD>

<TITLE>HALL RENTAL</TITLE>

</HEAD>

Now save the document, SWITCH back to your browser, load the document and note carefully what is printed in the space reserved for the image before it is displayed. Hopefully you will notice what was printed - if not, try again.

Before an image is displayed, you often see a box or frame placed first and then the image is placed in the box or frame. The "ALT" attribute allows you to write something in the frame before the image is placed there.

Although the ALT attribute is not required for the image to be displayed, you should include it to follow good coding practices. It should be used to replace the image's meaning, and not just to provide a description of the image. In general, ALT text may not contain markup tags.

Why would we want to write something in the image box?

1. The ALT command is used to specify a text string to be displayed in browsers that do not support images. If the browser is a text only browser (such as Lynx), the text in the ALT command will replace the image. This then lets the person know that there is an image there and what it consists of - something the viewer will appreciate .
2. Any user has the option of turning off the graphics display. If the the graphics display is turned off, then your image will not be displayed and what is written in the frame is all that will appear in its place. This again lets the person know what the image would have been if it had been allowed to be displayed. So, when the image cannot be displayed for whatever reason, the browser will display the ALT text instead.
3. While the image is being loaded (which can sometimes take awhile), the user will know what is being loaded and can decide to wait for the image to load or go on to something else.
4. If you are interested in eventually placing your website on the internet through Search Engines such as AltaVista, InfoSeek, Yahoo, WebCrawler, etc., you are recommended to use the ALT attribute -- especially if the page you are submitting contains multiple images or image maps at the top of the page. Some search engines take into account the text written in the ALT attribute when creating your website's description, keywords, and where your website will be placed in a search result.

The ALT attribute simply gives the user information about the image. If you do not want to have anything printed in the frame, then use the command:

ALT=""

One example where you may not want something printed is in decorative images to prevent something from being written in text only browsers. So if the image is purely decorational, use ALT="" or you could use a decorative ALT text like "*".

Here is a summary of all the above attributes associated with the IMG tag. You can use them in any order.

ALIGN  can be "TOP" "MIDDLE", or "BOTTOM". Used for aligning one line of text beside the image.
BORDER  used to place a border or to specify no border around the image
WIDTH  used to state the width of the image that is to appear
HEIGHT   used to state the height of the image that is to appear
ALT  used to place text in the space where an image is located
HSPACE  used to create horizontal space around the image
VSPACE  used to create vertical space around the image

Of all these attributes, only the WIDTH, HEIGHT and ALT attributes are to be included for good coding practices. The rest of the attributes are purely optional and you use them based on your presentation needs.

Also, as you might have expected, the IMG attributes and values are not case sensitive. Thus, for example, ALIGN="MIDDLE" is the same as ALIGN="middle" which is the same as align="middle".

We know that the ALIGN="MIDDLE" command places one line of text with the middle of the image. Similarly ALIGN="TOP" will align one line of text with the top of the image and ALIGN="BOTTOM" will align one line of text with the bottom of the image. Suppose you want more than one line of text to be displayed beside the image. For example, the following has four statements beside the image:

BUCHANAN VILLAGE

An Adult Lifestyle Community for Seniors

Operated by the Retirement Home Association

• What is Buchanan Village all about?
• What is a "Life Lease" Retirement Community?
• The benefits of a Life Lease
• Who to contact for more information
  
  

Problem 6: Now write the HTML document that gives the above "Buchanan Village" example, keeping the following points in mind:

1. The image is named cross1.gif
2. The width of the image is 60 pixels
3. The height of the image is 85 pixels
4. There is to be no border around the image
5. There is to be a horizontal space of 20 pixels around the image
6. The word "Cross" is displayed before the image is displayed
7. Each choice beside the cross is to be a link to another page (the links do not work as they are only examples of what you can do)
8. Make up your own suitable file names for the links
9. The first title (BUCHANAN VILLAGE) is a level 1 heading
10. The second title (An Adult Lifestyle Community for Seniors) is a level 2 heading
11. The third title (Operated by the Retirement Home Association) is a level 3 heading

| Click here to go to the answer section |

Our first example about the wheelchair accessibility in our hall, had the words "We are wheelchair accessible" written beside the middle of the wheelchair image and to the right of the image. These were the lines that gave us this result:

<HTML>

<HEAD>

<TITLE>HALL RENTAL</TITLE>

</HEAD>

Problem 7: Change whatever is necessary so that the words are written on the left side of the image and everything is aligned to the right side of the browser screen as in the following (in some low level browsers, the ALIGN="RIGHT" does not work and so everything will still be aligned to the left side of the screen):

ABOUT OUR HALL

We are wheelchair accessible.

1. First make sure that the name of the image and the extension matches exactly the name and extension used in the coding. For example, if the image is named gardens.jpeg, then the coding must be:

   <IMG SRC="gardens.jpeg">.

   If you accidentally write:

   <IMG SRC="garden.jpeg"> (name does not match)

   or

   <IMG SRC="gardens.jpg"> (extension does not match)

   then the browser cannot display the image because there is not an exact match.

2. Place the images into the same folder as the web page. Often if they are not in the same folder, they do not get displayed. So your best results will occur if the images are in the same folder as the web page. If you place the images in the same folder as the web page, then the format for the coding would then be simply:

   <IMG SRC="ImageName.jpg">

   as no path to the image needs to be specified.

3. If your images appear in your browser when you are working off-line, but they do not appear in your browser after you have uploaded your web page to the internet (to your host server), then make sure that you have also uploaded each image to your host server. You not only have to upload your web pages to your host server, but you also need to upload each individual image.

1. The image and the words "We are wheelchair accessible" are placed in the center instead of on the left side of the browser screen.
2. The image and the words are right justified.
3. The words "We are wheelchair accessible" is aligned with the top of the image.
4. The words "We are wheelchair accessible" is aligned with the bottom of the image.
5. HSPACE lets you determine the amount of horizontal space between the image and the text (measured in pixels). In our example, I left 10 pixels of space between the wheelchair image and the words "We are wheelchair accessible".
6. Here is one way to solve the problem:

   <HTML>

   <HEAD>

   <TITLE>RETIREMENT LIVING - BUCHANAN VILLAGE</TITLE>

   </HEAD>

   <BODY>
   

   <H1 ALIGN="CENTER">BUCHANAN VILLAGE</H1><HR>
   <H2 ALIGN="CENTER">An Adult Lifestyle Community for Seniors</H2>
   <H3 ALIGN="CENTER">Operated by the Retirement Home Association</H3>
   <IMG SRC="cross1.gif" ALIGN="LEFT" WIDTH="60" HEIGHT="85" BORDER="0" HSPACE="20" ALT="Cross">
   <UL><LI><A HREF="About.htm">What is <EM>Buchanan Village</EM> all about?</A>
   <LI><A HREF="Lifeleas.htm">What is a "Life Lease" Retirement Community?</A>
   <LI><A HREF="Benefits.htm">The benefits of a Life Lease</A>
   <LI><A HREF="Moreinfo.htm">Who to contact for more information</A><BR><BR>
   </UL><HR>
   </BODY></HTML>

   This problem is a little unfair as it involves something we have not discussed yet (using ALIGN="LEFT" in the IMG tag). Note that the ALIGN="MIDDLE" was not used as this would only have allowed us to write one line of text beside the image. Instead we use ALIGN="LEFT" which in effect places the image to the left side of the browser screen thus allowing several lines of text on the right side of the image. Note that to make this work, the ALIGN attribute must be part of the IMG tag.

   If the HSPACE attribute is not used in the above IMG tag, the bullets will be hidden behind the image in some Explorer browsers.

   Also, I have inserted two <BR> tags at the end of "Who to contact for more information". I needed these tags to make sure the Horizontal Rule was placed below the image and not beside the image. However, adding two <BR> tags will not guarantee that the Horizontal Rule will be placed below the image. Whether the Horizontal Rule appears in your browser beside the image or below the image is dependent on text size and on the width of the monitor screen. For example, if the text size setting in a visitor's browser is a little smaller than normal, your browser will be able to place more text beside the image and so there may be room for the browser to also place the Horizontal Rule beside the image. If the text setting is a little bigger than normal, you will get fewer words beside the image and so the Horizontal Rule will end up below the image. Also, if the monitor is a wide screen monitor, a lot more text can be placed beside an image than in a smaller width monitor. Thus with a wide screen monitor the Horizontal Rule can end up beside the image while in the narrower width monitor it can end up below the image. In Explorer, Firefox and Netscape, if you go to the "View" menu, choose "Text Size" and then change the size of the text to see the effect on the positioning of the Horizontal Rule. This problem is solved when we study tables in Lesson 11 and 12. With tables, you can place the image and text in a borderless table and then place the Horizontal Rule below the table.

7. Only one line needs to be changed. The ALIGN="LEFT" becomes ALIGN="RIGHT" and the words "We are wheelchair accessible" must be placed in front of the IMG tag as in:

   <H4 ALIGN="RIGHT">We are wheelchair accessible.<IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE"></H4>

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eight |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca