Images


2.1 Inserting Images

Images are used heavily on virtually all types of web sites. You use the <img src="filename" alt="description" /> tag to insert images into a page. The basic use of this feature is simple, but knowing how to adjust the position and properties of images can be a bit tricky.

First of all, you should make sure the image is in a folder on your web page. Because you will often use many images in the course of building a web site, it helps to make a separate folder titled "images" so that you can keep these separated from your other files.

Let's use an example. My friend Jim Bob has a web site to show off his gnome collection. The web site has a home page, a pictures page, a links page and a history page. The history page contains links to some documents Jim Bob has about the history of gnomes. To organize, Jim Bob has put everything into a folder on his desktop, "GnomeHome". Within the "GnomeHome" folder Jim Bob has a folder for images, "images", a folder for his documents, "gnomedocs" and the pages of his site which are in the main folder, "home.htm", "pics.htm", "links.htm" and "history.htm".

When Jim Bob puts a new image on his site, he must first put the image in his images folder. In this case, the picture is a JPEG called "smallgnome.jpg". Because the image is in the folder below his pages, he must specify the relative path name.

(Find out more in the File Navigation section.)

His image tag will be:

<img src="images/smallgnome.htm" alt="images/smallgnome.htm" />

*The "alt" attribute is required in XHTML 1.0 and above. It speficies text used in place of an image for text based browers. You can use it how you like, I usually just duplicate the file path.

The image will appear in the same state it was saved:

images/smallgnome.jpg

This example shows what browsers will see if they cannot render the image or if the image is unavailable in the specified path:

images/smallgnome2.jpg

Remember that images have much more impact when their use is limited.


2.2 File Size

Ever get an e-mail from Aunt Sally Sue that takes three minutes to download? It seems she got a new gazillion pixel camera that takes pictures that are 5 megs each in size. Though the picture looks nice after it downloads, the resolution is too high for web pages or e-mail. For web sites, images that are 5 - 40 kb in size are preferable. If you can keep your image resolutions relatively low, your web page will be quick to load up and your visitors won't be annoyed, as you were when Aunt Sally Sue sent that mega-huge picture attachment.

An easy way to shrink images is to open them in Microsoft Paint. Select Image, Stretch/Skew, then type the percentage you want to decrease the photo. Put 50% in height and width to reduce each of the attributes by half. Your file size will decrease by more than half. For example if you make the above change on a file that is 100 pixels wide and 100 pixels tall. You will go from (100 p x 100 = ) 10,000 p to (50 p x 50 p = ) 2,500 pixels. You reduced the number of pixels by 1/4. If it was originally 50 Kb, it will now be 12.5 kb. Always make sure you keep your images trimmed down to size!

images/imagereduce2.jpg images/imagereduce1.jpg


2.3 Image Size

It is preferable to save the image in the desired size so that you don't need to manipulate it on your page, but you have the ability to "tweak" the size by using the height and width parameters.

Although many people don't do it, you will help your page load faster by specifying the size in pixels for every picture. The reason you should do this, is so that the Internet browser doesn't have to take the time to find out what the image size is before displaying it.

Open your image in Microsoft Paint, select Image, then Attributes and write down the height and width in pixels. Then put those values in your image tag at the web site. You can get away without doing this, but I'll tell you how I saw the importance of doing this:

I have a web site I put up to share digital pictures with the rest of my family. I set up a main page with thumbnail pictures that I compressed to about 2.5 Kb each. I set these up in a table with each picture as an anchor that links to a larger version of the picture. When I first wrote the image tags, I didn't specify the height and width attributes. The page would load more slowly than I had hoped. I could see the image boxes pop up one at a time. After I included the height and width attributes the page loaded immediately with all picture boxes in place. The pictures still took a little bit of time to load, but the overall load time was reduced significantly.

In any case, here are some examples using these parameters: (Note that the actual picture size is 192 x 144 pixels.)

Normal Method Preferred Method "Tweaking the size"
<img src="images/smallgnome.htm" alt="images/smallgnome.htm" /> <img src="images/smallgnome.htm" height="192" width="144" alt="images/smallgnome.htm" /> <img src="images/smallgnome.htm" height="286" width="216" alt="images/smallgnome.htm" />
images/smallgnome.jpg images/smallgnome.jpg images/smallgnome.jpg

Note that the large picture looks pixelated. Your goal when using images should be to try to make the file size of your image as small as possible while avoiding pixelation.


2.4 GIF's and Animated GIF's

GIF Graphics Interchange Format is an image format that allows for smaller image sizes and transparent color. GIF's only display 256 colors which is great for art and icons, but not suitable for JPEG's. Here are some examples of a typical GIF's:

images/gifarrow.gif images/gifface.gif images/gifbolt.gif

GIF's use transparent color to enable the image to blend with the background. JPEG's are always rectangular and do not automatically blend with the back of a web page.

Animated GIF's are like cartoon flip books. They display a series of GIF images in a loop which creates a short "movie". Though they are fun to use, they are generally considered to be distracting and gimmicky. In any case here are some examples:

Animated GIF Examples

You can create your own animated GIF's with the help of the following program:

GIF Construction Set

There are times when moving graphics can help your site. Demonstrating a sequence of screen captures is a practical example of using animated GIF's.


2.5 Image Alignment

Image alignment can be tricky. Be sure to know how to handle image alignment well. You will frequently need to align images. Available parameters include:

<img src="filename" alt="description" style="float: left or right"

Prevent other elements from wrapping around the image by adding the clear attribute to the element:

<p style="clear: right or left"> text text text</p>

You can also add spacing around images as needed using the following style properties:

margin-top: length
margin-right: length
margin-bottom: length
margin-left: length

These settings can also be combined as follows:

margin: top right bottom left

Look at the example page to see how each of these tags affect images and their surrounding elements:

Image Alignment Example Page

When working with multiple images that are grouped together, you put the images in a table which provides precise controls for alignment and margins.

Tables Tutorial

2.6 Backgrounds

Specify an image for the background of an element using the style property:

background-image: url(url)

Set the image to tile accross the page with this style property:

background-repeat: repeat, repeat-x, repeat-y, or no-repeat

To specify the initial position of the background image:

background-position: [horizontal]% [vertical]%

To contol whether the image scrolls with the page:

background-attachment: scroll or fixed

Here is an example page which demonstrates some different uses of backgrounds:

Backgrounds Example Page

2.7 Image Maps

Image maps are used to create hot spots on images that contain links. In order to implement an image map you will need to use these tags:

<map name="YourImageMapname"> - This declares that you are going to use an image map.

<area shape="rect" OR circle OR poly coords="NUM,NUM,NUM,etc..." href="YourLink">

The shapes are the individual hot spots in the picture.

rect takes two pairs of coordinates.
The first two numbers are (x,y) of the upper left corner,
the second two numbers are (x,y) of the lower right.
The format is shape=rect coords="X,Y,X,Y".

circle takes a pair of coordinates followed by radius.
The format is shape=circle coords="X,Y,R".

poly plots coordinates of any shape you want to draw.
The format is shape=poly coords="X,Y,X,Y,X,Y,X,Y,etc...".
Note that you must eventually return to your originating coordinates.

</map> - You need to close the map tag after you have put in your shapes.

Additionally you will need to invoke the image map in the corresponding image tag:
<img src="YourImage" usemap="#YourImageMapName">

Things can get a bit tricky, if the area of the image you want to select is not a regular shape. There are programs that can help you to set up image maps, however with a little practice, you should be able to handle basic image maps on your own.

Here's an example page which shows the steps in creating an image map:

Image Map Example


XHTML 1.0 compliant