A few words about those pesky image tags

This is a standard image. This is the IMAGE TAG you would use on your blog:

‹img src="http://peoriapundit.com/images/bloggerbash6.jpg"›

It's always in the form of a URL address, unless the image comes from the top directory of your Web host, then it could be shorter. If you are using an image hosting service like Photobucket, you will use the address they give you.

Remember, hotlinking -- the practice of using the URL of someone else's images without permission -- is considered theft of intellectual property and theft of bandwidth. No one will throw you in jail, and it is ubiquitous, but it can cause you all sorts of grief.

This is the exact same image except for one difference. Roll your mouse over the first image, than the second. Notice that the IMAGE TAG shows up on the second, and not the first. That's because I added an ALT attribute to the tag:

‹div align="center"›‹img src="http://peoriapundit.com/images/bloggerbash6.jpg" alt="http://peoriapundit.com/images/bloggerbash61.jpg" border="1"›‹/div›

It's a good idea to use these because it tells readers that the image is yours. It also is what shows up on your site if the image fails to load properly, making it easier for you to track down what is wrong. You don't have to make the title the same as the IMAGE TAG. For example:

‹div align="center"›‹img src="http://peoriapundit.com/images/bloggerbash6.jpg" alt="Peoria Blog Bash 1" border="1"›‹/div›

Also note that I centered the image with a DIV tag.


It's always a good idea to store on image on your server in the exact same size you wish the picture to appear. Sometimes, that's not possible. If that is the case, you can change how the wise appears on your site. The above picture normally would appear 400 pixels in width. I lowered it to 100 for layout purposes. It would have been much better to have simply stored a separate image on my server that was smaller. You can change a pictures' WIDTH or it's HEIGHT in this manner. NEVER CHANGE BOTH unless you know the exact proportions. Browsers will read one, and adjust the other to keep the image from distorting.

Also note that I used an ALIGN tag to flush the image to the left of the test, and that the text flows around the image. Also, notice the tiny amount of white space between the text and the image? That's there because I added a VSPACE tag. Without it, the words would be touching the picture. It looks unprofessional and ugly.

Notice, how the border has a color now? That's because I LINKED the image to a URL for a full size, original image. Click on it to see. It will open in a completely new browser window.

Why do this? Because the full size picture might be wider than the width you have reserved on your template for posts. Huge pictures take longer to load, and people who host their sites using their own domain name -- like peoriapundit.com -- are allowed to transmit only a certain amount of data on their Web pages. Large pictures send more data, and take up bandwidth. Not everyone is going to click on and view the larger picture, but a Webmaster might want to make it available anyway for those who want to see it.

Notice that I took out the ALT attribute from the IMAGE TAG. That's because the LINK TAG now includes a TITLE that shows readers where clicking the link will take them. That's more important than knowing where the image is stored. Readers want to know if they are are visiting a safe site or not.

‹a href="http://peoriapundit.com/images/bloggerbashlarge.jpg" title="http://peoriapundit.com/images/bloggerbashlarge.jpg" target="_blank"›‹img src="http://peoriapundit.com/images/bloggerbash1.jpg" align="left" vspace="6" align="left" width="100" border="1"›‹/a›