Adding Images

What is an Image?

Images are files. Inside, they are ugly. If you didn't know a file was an image then you wouldn't be able to tell by reading it. It takes special programs to read and interpret the data in the file and display it on your screen.

There are two kinds of image file formats that are commonly used. The first format is the .gif file. (Sidebar: is the "g" hard or soft? If I'm talking to someone about these files I usually wait to hear how they pronounce it and then I follow suit. I guess it's not important as long as the computer knows what to do with it.) The second file format is the .jpg or .jpeg format. The first extension is used on computers that only allow 3 character extensions. They mean the same thing. You pronounce it "jay-peg". Thank heavens there is no alternative pronunciation!

The .gif file contains the "palette" that describes which colors are in the image then it contains a pixel by pixel number that corresponds to one of the colors on the palette. The pixel information is generally "compressed" so the file will be small. This file format is very versatile - you can make the background "transparent" or you can use it in an animation. You can make an image file very small by manipulating the color depth in the image. I think they work best for manually created graphics, icons, cartoonish type stuff, where you're not trying to achieve photographic quality.

The .jpg file is my preferred format for photographs. It deals with a 16-million color palette. This means that it has to store a lot of information about each pixel. But sometimes that's the only way to achieve the look you want. Just a couple of words about reality - keep an eye on the file size and understand a lot of users don't have their displays cranked up to handle 16-million colors.

There are two packages I've found useful in manipulating or creating images that I've used. The first is Paint Shop Pro developed by JASC, Incorporated. I've used the shareware download to do some heavy duty editing of images and I really like it. In fact, I like it so much that I'm finally ordering a copy! At $69 + $5 shipping I consider it a real bargain. The second package is GIF Construction Set developed by Alchemy Mindworks. It's an essential tool for the hardy spirit that wants to create some "roll your own" animated graphics.

Putting the Image on the Page

That seems easy enough doesn't it? I mean, after all, all you need to do is put in an <img> thingy and give it the file name and your done! Right? Technically, yes but if you're going to be friendly to your viewers then you need to do a few other things to make it really correct.

The very first thing, and I would make this a requirement of every web author in the world if I could, is to put in the size of your image! This really speeds up the display of your page and makes it so the viewer can start reading your stuff while the images are loading. There are a couple of ways to find out. You can load the image using File-Open in Netscape and when it displays the image it shows you the dimensions on the top bar of the Navigator Window. Microsoft Internet Explorer doesn't do that in 3.x and below (hint-hint Microsoft). Or you can load the image up in one of the paint or image manipulation programs.

You need to be careful about how you specify your sizes because the browsers will make the image fit the box you've defined. If you get the height and width mixed up it can give some comical results.

As an example:

       <img src="../img/bigwave.gif" width="120" height="60">

is displayed as:

If I had gotten confused (an easy thing nowadays) and reversed the sizes like:

       <img src="../img/bigwave.gif" width="60" height="120">

then it would come out like this:

Now, I can almost hear the wheels turning - don't get the big idea that you can use the browser to resize your images! That's not fair! You should make your images the size you want using a real image editing program. The browsers are excellent at displaying images you send but aren't true graphic tools that can do the proper job on resizing. Besides, it just takes more computer power while the browser has to stop and work on the image instead of displaying the text. But if you really did you could make it bigger or smaller like so:

       <img src="../img/bigwave.gif" width="240" height="120">
        <img src="../img/bigwave.gif" width="60" height="30">

which would then look like this:

I did use a <p align=center></p> around the images to get them in the middle. Pretty slick, huh?

Putting Alternate Text

This is a very important thing for you to do. I mean what if some cretin has images turned off! This is your opportunity to put in a little bit of tempting text to encourage someone to look at your images. Of course, this is the only thing a text browser will know about your image. It'll also pop up if someone leaves the pointer on the image for a little bit (at least in Microsoft Internet Explorer). Lastly, it shows up in the block you've defined until the image starts to display.

Don't be lazy - just do it.

It's done like this:

       <img src="../img/bigwave.gif" width="120" height="60" alt="The Big Wave>

and would look like this:

Now I don't know how to demonstrate this but if you REALLY must see what happens then you have to go up and your browser options and find where it says to NOT load images and tell it NOT to load them. Then refresh this page and you should see what the text does.

Aligning the Image

You can do some other things with placement of the image. Alignment is based on the text line the image is on and you can select top, middle or bottom to put the image. I could spend a lot of time trying to explain this but I think it's easier to demonstrate.

This is align=top:

       <p>This is text with image. <img src="../img/bigwave.gif" width="120"
        height="60" alt="The Big Wave" align="top"></p>

looking like:

This is text with image.

This is align=middle:

       <p>This is text with image. <img src="../img/bigwave.gif" width="120"
        height="60" alt="The Big Wave" align="middle"></p>

looking like:

This is text with image.

This is align=bottom (which is the default, by the way):

       <p>This is text with image. <img src="../img/bigwave.gif" width="120"
        height="60" alt="The Big Wave" align="bottom"></p>

looking like:

This is text with image.

This is align=left:

       <p><img src="../img/bigwave.gif" width="120"
        height="60" alt="The Big Wave" align="left">This is text with image. </p>

looking like:

This is text with image.

This is align=right:

       <p>This is text with image. <img src="../img/bigwave.gif" width="120"
        height="60" alt="The Big Wave" align="right"></p>

looking like:

This is text with image.

Space Around Image

Now you might want to set up a "clear" area around the image to move text away from it. I'll set up some examples of the hspace and vspace settings.

First, I'll show it with no settings then add them in as we go along:

<p><img src="../img/bigwave.gif" width="120" height="60"
alt="The Big Wave" align="left">When you go to The Big Wave site then you need to tell my
son how much you like his site and tell him that I sent you. Now if you have your browser
set to a normal, narrow width I wouldn't have to type forever to get the text to flow
around the image like you are seeing now. This is important to see how the text flows
because when you use the <strong>align</strong> tag it can create weird things.

which looks like this with no space:

When you go to The Big Wave site then you need to tell my son how much you like his site and tell him that I sent you. Now if you have your browser set to a normal, narrow width I wouldn't have to type forever to get the text to flow around the image like you are seeing now. This is important to see how the text flows because when you use the align tag it can create weird things.

Now if I add hspace="8" it will look like this:

When you go to The Big Wave site then you need to tell my son how much you like his site and tell him that I sent you. Now if you have your browser set to a normal, narrow width I wouldn't have to type forever to get the text to flow around the image like you are seeing now. This is important to see how the text flows because when you use the align tag it can create weird things.

And if I put in a vspace="20" it will look like this:

When you go to The Big Wave site then you need to tell my son how much you like his site and tell him that I sent you. Now if you have your browser set to a normal, narrow width I wouldn't have to type forever to get the text to flow around the image like you are seeing now. This is important to see how the text flows because when you use the align tag it can create weird things.

Borders on Image Links

Finally, we need to talk about the effect of the border attribute when an image is used as a link. I'll show four examples - with border left off, set to 0, set to 1 and set to 5 so you can see what it looks like:

The Rusk Family . . . "the Legend Continues"