• Images: format, size, resolution
• Image attributes
• <BR> revisited
• Images as links / thumbnails
• Free image resources

Use the sample pages you created in previous lessons to practice what you learn here. After this lesson, you should be well on your way to creating a great looking web site. You should be using much of your own content now.

What would a web site be without images... well, just a lot of text. Where do you get images? The complete answer would be a very long list. A short list might include: digital cameras, scanned photographs, created with computer software, purchased on CD's, from web sites offering free images for web pages, clip art, a graphic designer, out of a hat (no wait, that's a rabbit)... well I think you get the idea.

This lesson is not about creating images, but instead how to use them on your web page. If you are learning how to create a web page by using this tutorial, you might not have any images to practice with, so I will supply you with some (later in this lesson).

If you have some experience using images for output onto paper, you will have to adjust your thinking to use them on a web page. Imagine opening a magazine and having to sit there and wait while all the pictures slowly appear. You probably wouldn't wait very long. Images used on web pages need to load fast. You can not use the big files you might for output onto paper, for a web page - unless you expect your web visitor to go out for coffee and donuts while your page loads on their monitor.

When you print an image on a piece of paper, you do not have to worry about what someone will use to view it - the options are usually, with or without their eyes open. Images on web pages are viewed by visitors not only with various computers and monitors, but also with various software programs. Fortunately, there are some standards you can rely on. The two most widely used formats for images on web pages are GIF (name.gif) and JPEG (name.jpg) files.

Images saved in a GIF format are images with a lot of solid areas such as logos and line drawings. Images such a photographs are saved as JPEG files which handle the wide ranges of color better than GIF's. GIF files may also appear as animations.

Images on paper are very often printed at a resolution of 600 dots per inch (dpi) or higher, and the width and height are only limited to the size of the paper. Images on web pages are measured in pixels per inch (ppi) and do not need to be more than 72 ppi.

Monitors with a viewing area of 640 pixels wide by 480 pixels high were the standard many years ago. Today most have a viewing area of at least 800 pixels wide by 600 pixels high. Still, it is smart to make sure your web page fits in a viewing area of 640x480 to make sure your visitors do not have to scroll horizontally - a major "no-no" in web design. Set page margins, keep images small, and perhaps use Tables (lesson 9).

Do not get output resolution confused with monitor resolution. If you have an image 640x480 pixels and print out the image at 200 ppi, it will be slightly larger than 3x2 inches. However, if you put that same image on your web page, and the resolution of your visitor's monitor is between 72 and 100 ppi, that same image will appear larger than 7x5 inches. The larger the file, the longer it takes to appear on your web visitor's monitor.

As you progress in building a web site, if you plan on using many images, I recommend you get a book that will tell you more about creating and working with images for web pages.

If you do not have any images which you can play with while you advance through this lesson, you may click here to download the apple.gif image I use throughout this lesson. Remember, to download an image to your computer, you right click on it and select SAVE AS. Save the image to the same directory where you will create your sample page so you can use my first example of image code shown below (without a directory path).

section 1

Now lets put an image on a web page.

Above is the code you would add to your web page file to make an image appear when a visitor views the page. Between the quotes you would substitute the actual file name of the image. Include the full path if the image is not in the same directory as your html file for the page.

If you are building a web site with a lot of pages and images, it is usually easier if you organize your images by putting them in a directory of their own. The example hierarchy of a web site we used in Lesson 7 (see illustration to the right) shows the image files are in a directory called images. If the image is to be displayed on the home page (index.htm) your code for the image (apple.gif) would look like this:

If the image is to appear on the page called lesson08.htm, the code for that image would have to show the path to the image like this:

... because the file for the web page is not in the same directory, nor is it in a higher one, so the browser needs to be told to back up out of the tutorial directory, where lesson08.htm is stored (by adding ../ before the image location), before it can go into the image directory to get the file for that image to be displayed on that web page.

If the apple needs to appear on the page called jenny.htm, the code to make the image appear would look like this:

section 2

This is apple.gif it is 86x95 pixels.

This is the code to create the above line:

You can see I have added 6 attributes to the image code.

* = not shown in the link example above (not needed there).

section 3

<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" HSPACE="10" ALIGN="middle" alt="GIF image of an apple">

Alternate Text (alt="text") should be included in all links. When someone views your web page, if for some reason the images do not appear, the alternate text will show in their place. Also, some viewers may have images shut off... so only text appears when they view web pages. Some browsers will show this text when a visitor moves the mouse pointer over the image (the tool tip feature). Browsers for the blind will actually read this text out loud.

section 4

<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" HSPACE="10" ALIGN="middle" alt="GIF image of an apple">

Image size (width="pixels" and height="pixels") When a browser encounters code for an image, it does not know how much space to allow for it until the image is fully loaded - unless you use these attributes. By specifying the dimensions in your code, the browser can allow for this space and continue putting the text on the viewer's screen while the image loads. You should always use these attributes to make your pages load faster.

These dimensions do not have to be the exact size of the image. You can use this attribute to scale an image. If the original size of your image is 400x200, you can put 200x100 in the code to make the image appear 50% smaller, and in proportion to the original. If you enlarge images this way, keep in mind the more you enlarge the original, the grainier it will appear. Note: Using code to reduce the size of a large image will not make it load as fast as if it were actually the smaller size you specify.

If you do not know the size of an image, one way to find that out is to include the image on your page, test the page in your browser, then right click on the image. Select properties to see the dimensions. Now go back and add the width and height attributes to your code. You can set just the width or height and make the browser figure out the other dimension proportionally.

Width at 40. Height left at 95.   Apple on a diet?

section 5

<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" HSPACE="10" ALIGN="middle" alt="GIF image of an apple">

The Border attribute (border="number") really comes in handy when you are using an image as a link. You know the browser default for a text link is usually to make the text blue and to underline it, well for an image link, the browser wants to put a blue box around it. Some browsers will box images whether it is a link or not. Setting the border attribute to zero keeps the browser from boxing your image. However if you do want a box around your image, you can use this attribute to do that. By setting border="1" for instance, you will add a 1 pixel border.

border="0"    border="1" 

section 6

<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" HSPACE="10" ALIGN="middle" alt="GIF image of an apple">

Adding additional horizontal (hspace="pixels") or vertical space (vspace="pixels") around an image can often make your page look better to your visitor. Look at the examples below.

The apple with text around it looks better with added horizontal space as do the two apples side by side.

This is apple.gifhspace="10"

Each apple below has hspace="10" so there is a total of 20 pixels between them, and 10 on the outer sides.

Apples hateto be crowded.

Crowded apples without hspace:

This is apple.gifit is not happy.

Crowded applesmay rot faster.

Vertical spacing works the same way. You may want to use it to add vspace when one image is above another or when text wraps around (above or below) an image. See use of this attribute in the section below.

The number you set for these attributes adds to both the left and right sides (hspace), or the top and bottom (vspace) of an image. You can not use them to add to only one side.

section 7

<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" HSPACE="10" ALIGN="middle" alt="GIF image of an apple">

Aligning images and text is easy with align="value" where value is one of the following: top, middle, bottom, left, right. However, alignment with more than one image on a line has different effects depending on image size, where they appear in-line, and the browser (and version) your visitor is using. It is more reliable to stick with one image on a line when using this attribute. When you learn about tables in the next lesson, you will see better ways to put more than one image on a line.

This is the apple.gif with a top alignment.

This is the apple.gif with a middle alignment.

This is the apple.gif with a bottom alignment.

This is the apple.gif with an alignment of left. The image code comes before the paragraph text. It will stay to the left of the type in a paragraph until the type goes beyond the height of the image. Then it will flow under the image and continue the full available width. This is a good example when you might want to include the HSPACE and VSPACE attributes to add extra buffer space around the image, as I have done here. In this example, I have added a value of 10 for hspace and 5 for vspace. The added space will make it look as if the type is flowing around it nicely.

This is the apple.gif with an alignment of right. The image code comes before the paragraph text. It will stay to the right of the type in a paragraph until the type goes beyond the height of the image. Then it will flow under the image and continue the full available width. This is a good example when you might want to include the HSPACE and VSPACE attributes to add extra buffer space around the image. In this example, I have added a value of 10 for hspace and 5 for vspace. The added space will make it look as if the type is flowing around it nicely.

This is the apple.gif with an alignment of left. The image code comes immediately after this sentence. However, the code won't take effect until a new line starts. Then it will stay to the left of the remaining type in the paragraph until the type goes beyond the height of the image. Then it will flow under the image and continue the full available width. In this example, I have added a value of 10 for hspace and 10 for vspace. You can choose to make the alignment of the image on the right side, within the paragraph as shown on the left here, simply by editing the code from left to right values. I don't think I need to create another example to prove that to you.

This is the apple.gif with an alignment of left. The text will wrap around the image until it clears it, as shown in the above examples,<BR clear=all> or I can add the line breaking tag with an attribute of clear=all, as I have done here. That forces all type after it to continue below the image. The image code is placed before the paragraph.

For your information, absmiddle, absbottom and texttop were developed as image alignment values for Navigator. Current versions of Explorer now claim to support them. Earlier versions of Explorer may treat absmiddle as middle, absbottom as bottom, and texttop as top. However, I have not had consistent results when testing them with Navigator nor Explorer so I do not recommend using them. I am only mentioning them here, in case you read about them elsewhere, so you do not think I forgot them. To get similiar results, I prefer tables (lesson 9).

section 8

You know how to make a link (lesson 7), and you now know how to put an image on a web page, so here is how to make a link USING an image.

This is a link code example:
<A HREF="destination here">label here</A>

This is the image code for the apple image we have been using:
<IMG SRC="images/apple.gif" WIDTH="86" HEIGHT="95" BORDER="0" alt="apple image">

Now combine them...

Below is the code for a link to the destination hello.htm, a web page file, but the label (shown in blue type) is not clickable text, instead it is the code for the apple image - now a clickable image.

The code above creates this apple.

Click on it...

section 9

Have you ever heard of thumbnail images? These are small, simple versions of a larger, or more detailed image. They come in handy when you want to put many images on your web page, and serve to minimize the loading time of the page. This prevents you from having a very slow loading page due to many large detailed images. That often frustrates visitors, especially if they only want to see some of the images. If a web page is slow loading, they usually leave. Most of us are not patient web surfers.

To allow your visitor to select only the images they want to see full size, or in more detail, you make the thumbnail images clickable links to the larger image files (usually making them open in a new window with the target attribute). In the code below, the link destination is not a web page file, but a JPEG image file (shown in blue type). Remember a JPEG image file is usually a larger sized file than a GIF image file because a JPEG file renders a full range of colors, like a photograph.

The code above creates this thumbnail apple image.

Click on it...

When you clicked on the simple apple.gif image above, it acted like a clickable thumbnail image, and a new window opened to display the apple.jpg file (much more delicious looking). That new window is not a web page file. I did not have to create a special web page to display the apple.jpg image - your browser did that automatically when you clicked on the apple.gif image since it needed a place to display it. Without the target attribute, it would have displayed the image in this window, but still no web page file would be required.

High speed access? Click this apple.

section 10

These are links to sites offering free images which you may use on noncommercial web sites.

http://www.freeimages.com

http://www.htmlgoodies.com/freeimages

http://www.clipart-graphics.net

http://www.pics4learning.com

http://www.photosphere.com

http://www.gifworks.com