Using Images

Image Layout

INTRODUCTION
In this module, we will discuss the steps which are followed to add pictures to your web page. The major headings are:

So, as you can see, this module may be a little overwhelming. Be prepared to read it several times. After you have completed the associated assignment, it would be useful to re-read this module. It will make more sense to you, after you have some experience with the material.

Most web browsers can display images that are saved in either GIF or JPEG format. Each image takes time to process and slows down the initial display of the document, so generally you should not include too many or overly large images, especially if your audience is made up of users that don't have high-speed Internet access.

To include an image in a web document, you need to use an image tag,
<IMG SRC=imageaddress>, where imageaddress is the address and name of a given image file. If the image file is a GIF file, then make sure your imageaddress ends with .gif (for example, consider a GIF picture of a mailbox called mailbox.gif). Similarly, JPEG-formatted images end with .jpg.

Let's start off with an image called mailbox.gif:

To show this image, I used the image tag
<IMG SRC="mailbox.gif">.

Pretty simple stuff. But let's say we wanted include this image with some text, let's say, the following:

This image of a mailbox can be used to indicate where the 'email' link is on a web page.<IMG SRC="mailbox.gif">

You can put the picture first -- if you wish.

<IMG SRC="mailbox.gif">This image of a mailbox can be used to indicate where the 'email' link is on a web page.

This code yields the following result:

This image of a mailbox can be used to indicate where the 'email' link is on a web page.

The image of the mailbox appears to the left of the text, but it doesn't look too great, since the text doesn't wrap around the image. To accomplish this, use an alignment tag. For example, <IMG ALIGN=LEFT SRC="mailbox.gif"> allows us to align the graphic to the left of the text, simply by inserting ALIGN=LEFT into the middle of the image command. With this, we get a wrapped-around image like this:

This image of a mailbox can be used to indicate where the 'email' link is on a web page.

Similarly, change the ALIGN tag to ALIGN=RIGHT and it moves the graphic to the right of the text:

This image of a mailbox can be used to indicate where the 'email' link is on a web page.

Using Images as Hypertext Links

Advanced web developers love to activate images as hypertext links. It's very easy to do - simply start off with a hypertext link tag, and then use the image tag as your link instead of text. Check this out:

Creating this simply required the following HTML:

<A HREF="http://wtc.cc.tx.us"><IMG SRC="wtclogotr.gif" ></A>

I started off with my hypertext link to a web page called "wtc.cc.tx.us" using a regular hypertext tag, <A HREF="wtc.cc.tx.us"></A>, and then inserted <IMG SRC="wtclogotr.gif"> in the middle of it, right in the place I might otherwise insert some text.

One last trick: As you can see above, turning a graphic into a hypertext link puts a highlighted border around the image. If you don't want that border to appear for one reason or another, yet still want to have a hyperlinked image, you can use what's known as a border tag, or BORDER=X. When using this tag, you change the letter X to the size of the border you want around the image. So, if you don't want any kind of border, you'd have insert BORDER=0 into your larger image tag, like so:

It's still an active hyperlink, but the border is no longer there. Try it out.

And of course, the converse of this would be to give the image a large border, such as BORDER=20. The results of that would look like

Picture Sources

Obviously, graphics are useful on your web page. They can provide useful information or entertainment. As a wise philosopher once said, 'A picture is worth a thousand words.'

Where can you get pictures? There are many sources on the web for 'clipart' and other pictures. If you see a picture on the web and you would like a copy of it. Then use a RIGHT mouse click and select 'Save Image As'. Save the image on your disk or hard drive. Here is a picture, try it...

If you needed a map of a certain area, then go to Mapquest and locate the area of interest to you. Right click on the image and save it.

To find clipart - use a search engine and search for clipart.

You can also use digital cameras or a scanner to get computer-ready images of your pictures. Many photo developing companies now offer the ability to have your pictures stored on a CD. These pictures can be imported into a web page.

Image Types

There are several different picture formats that you need to know about:
The different formats are important as you consider the speed at which your images will download. Generally, if it takes a long time for a picture to download, then the user will get impatient and will move on to someone else's page. On the other hand, if your pictures are of low quality, then users will not enjoy them. So, you need to strike a balance between quality and download time.

With that in mind, here are some comments about the various graphic formats....

JPEG files tend to be about half the file size of TIFF files. JPEG or JPG compression is what image gurus (or geeks) call lossy - meaning the format compresses the image by identifying and discarding extra data that aren't essential to the image's display. JPG is one of the better formats to use for photographic images.

TIFF images have more clarity and resolution. These images are 'lossless' - they don't discard detail from the image - so what you see is what you get.

GIF images take up the least file size; but they also come with the lowest resolution. They are useful when the file size needs to be small. This file type is especially useful for drawings.

WMF format files are generally reserved for PowerPoint presentations.

BMP files can be created with Windows Paintbrush. Unfortunately, they are so large that they are not useful for web pages. However, an individual could draw a picture with BMP and then later convert it to another format - there are several format conversion programs available.

In summary,
GIF files have good resolution and small file size.
JPG files have better resolution and medium file size.
TIFF files have the best resolution and large file size.

Image Gotchas

Often, a picture will appear as a broken image, such as

Here is the code that was used:
<img src="wttclogo.jpg">

The mistake is the extra 't' in the filename. When a broken image appears, the first thing to check is the spelling of the filename. Next, check to see if the image is where the reference expects it to be.

Another, even more subtle problem can arise. Depending upon the type of server where the web site is stored, capital letters can make a difference. For example, if the web site is stored on a Windows-based server, then upper or lower case will not make a difference. However, if the website is stored on a Unix (or Linux) server, then caps will be important. If caps are important, then there is a difference between wtclogotr.gif and wtclogotr.gif.

Image Size

Sometimes, the web page author will want to change the size of an image. There are two techniques that can be used: To change the size of the picture before it gets to the web page, use image editting software to reduce (or enlarge) either the physical size or the resolution (or both).

To change the size of the picture after it gets to the web page, use HEIGHT and WIDTH. Here is an example:

Here is the code:>
<img src="wtclogotr.gif" height=100 width=200>

Of course, the creator can distort the images, if so desired. Here is an example:

Here is the code:>
<img src="wtclogotr.gif" height=50 width=400>

The measurements (50,100, 200, etc.) are in pixels. So, on a 600 x 800 screen, the last image would be cover about 1/2 of the screen's width (400 pixels/800).

The aspect ratio, (the ratio between the height and width), is important. The web page author is in control and by changing the ratio between the height and width, the picture can be made skinny or fat.

Also, remember if you change the size after it is on the web page, then the file size stays the same - so the download time will not change.