Use these to jump around or read it all…
[The Visual]
[Height and Width Commands]
[How Do I Find an Image’s Size]
[The ALT Command]
This is a nice, short tutorial I put together thanks to those of you who write to me. I had been getting a good many letters asking how I get my pages to load so quickly. I was perplexed by the questions because my pages don’t load any faster than anyone else’s. Then someone explained the question.
The Visual
Have you ever gone into someone’s site and you sit there waiting, looking at a blank page? You know the page is loading because the little numbers across the bottom are rolling, but there’s nothing. Well, my pages don’t do that.
When you log into HTML Goodies, the entire page loads right away. All the text is there. What’s not there yet are the images. But there are little boxes that appear to be pressed into the page just waiting for the image to arrive. (To learn how to get those images up faster, check this out.) Sometimes there’s even text in the box telling you what’s going to go in the box. Neat trick, huh?
How To Do It
Actually, it’s not all that tough to do. What you do is make a point of denoting every image on the page with HEIGHT, WIDTH, and ALT commands.
Height and Width Commands
Here’s an example of what’s in an image command:
<IMG HEIGHT=”45″ WIDTH=”22″ SRC=”image.gif”>
The commands are denoting the image’s height and width in pixels. Pixels are little colored dots. If you put enough of them close together, they form a picture. The word “pixels” actually is a pushing together of two other words: “picture” and “element.”
Those of you there with vivid imaginations know that the height and width commands can be used to change the shape of an image. If the image is really 50X50 and you put in height and width commands of 150 and 10, you will distort the picture pretty well. For an example, see the Manipulating Images primer.
A better way to use the commands is to denote the exact height and width of an image. I know that seems a bit silly on the surface, but if you do it for all the images on your page, then what happens is the page and its text loads completely, leaving open spaces for the pictures to load later. Your viewer is reading and surfing your site immediately rather than waiting for the whole page to load in.
But How Do I Find Out Each Image’s Size?
One of two easy ways:
- In Netscape, right click on the image. MAC users click and hold. Choose the menu item, “Show Image”. The height and width will be in the title bar.
- In Internet Explorer, right click on the image. MAC users should click and hold. Choose the menu item, “Properties”. You’ll see the height and width in the box that pops up.
OK then. Neat trick, eh? Now, I know what most of you are saying…
AAAAAAUUUUGH! Why didn’t I know about this earlier? My pages are written! AAAAAUGH!
Easy there, big fellah. It’s not a concern. I’ll give you a hint on two quick ways to do it.
First Way
By hand is not that tough. What you do is load your page. Then you systematically go from image to image with your pointer. When your pointer is on an image, click the right mouse button. (Mac users click the button and hold it down.)
Second Way
Pay someone to do it for you. That’s not really the second way, but it’s pretty good. Actually, there are programs that do it for you. Bing, bang, boom. All done.
…either way will work just fine.
The ALT Command
I get letters from people saying they want the commands that place text in those little pressed in boxes, or they want the commands that make the little yellow boxes pop up when a mouse pointer is placed on an image. Well, here you go… the ALT command.
ALT is short for alternative. It’s the text that pops up as an alternative to the actual image. It also sits inside the pressed in box and pops up in the yellow box like you want it to. All that for one little command. It’s a great world, isn’t it? Here’s what it looks like:
<IMG ALT=”picture of a dog” SRC=”My Dog”>
The text following the ALT commands would be used to tell the viewer what’s coming. Other text could be entered so that more information about a picture could be given as the person lays the mouse pointer over it.
ALSO! Persons using disabled-assistant browsers have the ALT text “read” to them by the computer. So use text that represents the image when you set up the ALT attribute.
And that’s that. There’s not much new information here, but a pretty good tip to help your viewers along.
[The Visual]
[Height and Width Commands]
[How Do I Find an Image’s Size]
[The ALT Command]
