why this is here

Many people will probably wonder why I have something about image attributes in a Web Design Tips section instead of a HTML Tutorials section. The reason? Well, you could just use the <img src="???"> tag and be done with it, but it is not good practice to do so. Instead, let's take it a few steps farther.

how big is it?!??

The two most important attributes to define in all image tags: width and height. By simply defining these attributes, your page will load faster and will be less jumpy. If you don't define these tags, the browser has to automatically. When it finds the src of the image, it automatically has to scan it for the exact height and width. Unless, you define these for the browser!

Before the browser finishes scanning the image(s) for the exact height and width, it will simply display them as the default graphic logo. Then, suddenly, when it finds the size of the image, they will just pop up out of nowhere, distracting your attention on what you are doing or reading.

too much work, darnit!

Yeah, your right. It's a hassle to define all these width and height attributes inside of the <image> tag. But, hey, when you do this, you get a better page, and that's what this site is all about, right? Oh, darn. The secret is out. This doesn't really have to be as much of a hassle as it seems like it would be. If you have a good HTML editor (such as HomeSite), it will automatically put the width and height attributes inside of the <image> tag! This feature definitely saves much time while making web pages.

AHHH..what is it??

Now, let's admit it. We have all had the problem of having a image not load and not knowing what the image is supposed to say. Isn't that just so annoying? Well, the truth is, you can fix this problem by simply putting the alt attribute inside of the <image> tag. Alt stand for alternate - this means that while the image loads this text will be shown in the image's place.

So, if I simply typed in <image src="myimage" alt="Look at this!">, the text Look at this! would be displayed in place of the image while it finishes loading. There are lots of impatient people on the internet, and some would rather go to a page now instead of wait 30 seconds for it to finish loading. Besides, if your server has problems, the text will be shown instead of the nice little broken image icon.

you know it - so use it!

Actually, I shouldn't need to write this Image Attributes tutorial. If you know HTML, you should probably already know what the alt, width, and height attributes do. I wrote this so designers would actually know why they should put these attributes in their pages! Go ahead, spend an extra 2-4 minutes putting these attributes in your page. It should really help out in the long run.