wayne on October 22, 2008
Knowing some basics of HTML is always handy, especially when it's as simple as adding an image to your blog post or web page. To define an image, all one needs to do is create an <img> tag and apply the correct properties to it. How would you do that one might ask?
Knowing how to work with the <img> tag will also help you become a better blogger. Not in writing mind you, but in form and style. It can also help you on other networks as well. Imagine you wanted to add an image to your MySpace profile, would you know how? What if you wanted to put an image in an area that most people only put text? Perhaps by including an <img> tag you could impress your friends by injecting an image where they were not able to, or didn't think to.
Before we dig in, I want to point out that we first started with how to create a hyperlink and explained a little about it. Then we took that a step further and defined the title property of the hyperlink and what that will do for you. To round off the hyperlinks, I showed you how one might use the target property of the hyperlink to retain visitors on your site. I am building on the knowledge within those posts, so if you are finding yourself a bit lost, try reading through those posts. If all else fails, I'm always here to help you out.
Also, so I don't confuse anyone, I wrote a post that also explains how to include an image in your Blogger posts. The methods I'll describe here will take you to the nuts and bolts of adding an image by writing the HTML yourself. Sometimes writing it yourself is quicker, other times the automated interfaces we use will be easier. That is for you to decide.
Basic Structure of the Image Tag
The image tag is no different than any other tag, except for a few minor differences. Firstly, let's take a look at the tag itself and examine what makes the <img> tag tick.
<img src="http://www.waynejohn.com/images/someimage.jpg"
alt="my alt text"
height="20px"
width="20px"
title="the title" />
The first thing you might notice is that the whole <img> tag is wrapped neatly. Don't fear, that's just me making what would be a REALLY long line of text look nicer for readability. Normally, you wouldn't do this unless you were explaining it to a bunch of random strangers (and some not so random) like I am here.
The second thing you might notice is that there isn't an ending tag. Remember with the hyperlink anchor tag we had both a starting and ending tag set, like this:
<a href="SomeUrl>blah</a>
Instead, the <img> tag is one of those self-closing tags I mentioned. You don't need to have, in fact it is improper to have an ending </img> as part of the structure. Instead, we end the tag with the self-closing />.
Also keep in mind that each of the properties (src, alt, height, width and title) are property value pairs. This means that each will follow the same conventions of:
PropertyName="SomeValue"
With those basics covered, lets take a closer look at each of the property value pairs normally found in the <img> tag.
Image Tag Properties
There really is only one property you need to include with each image tag, and that is the src property. Well, if you want to conform to web standards, you should also include the alt property as well (I'll explain more about that soon). Some systems may barf when it's not included, so keep that in mind.
The src Property
The src property stands for 'source' as you might have already guessed. It points to where the image is on either your server, or on another domain. The src property tells the <img> tag where the source image file is located, and when a browser reads this tag, it will reach out to grab the image based on what you provide as the value for the src property.
There are many ways to refer to a source image, too many to list here. In fact, that will be another post in itself. Subscribe now so you don't miss it. (personal plug)
The alt Property
The alt property allows a browser to display the text contained in this property when the image cannot be displayed. Sometimes people surf without seeing any images either because they turned them off, or because they are using a text based browser that doesn't interpret images (like the old OLD days). The alt text will display in place of the image in these cases.
According to W3C standards, each image tag should contain an alt property value pair, even if the value part is simply "" (an empty quote). This is for XHTML accessibility and validity purposes. If you want to know more about that, click here.
The title Property
The title property works just like our hyperlink title property. It will give the user a yellow tooltip when the user passes their mouse over the image. This is handy for including a little more about the image or perhaps adding additional instructions to users. There is also talk of Google and other search engines looking at the title property of the <img> tag to gain more information about the page and image being scanned. Whether this is true or not, I don't know. What I do know is that to be thorough, you might want to include a title property on certain images.
The Width and Height Property
The width and height properties are completely optional. If you choose to leave them out, the image will render in what I call it's "normal viewing dimensions". It's like looking at an 8x5 photo and wishing you could make it a wallet size. The 8x5 photo is the images normal viewing dimension. To make the image wallet size, you would include the width and height property to size the image to the dimensions you would like.
When you do this, you might happen to 'skew' the image. This happens when the ratio that you increase or decrease the image is disproportionate to the images normal viewing dimension. You'll know when this happens when you look at your image and it looks like the end of a Bruce Lee film, where everyone is suddenly tall and lanky. On the other end of that spectrum is the short and squatty image.
Important to note! When you resize the dimensions of an image, it still retains all the bytes of it's normal size. For example, you can't take your huge desktop wall paper that may be 3 megabytes in size (much too large for display on the web) and make it the size of an Altoids tin and expect the number of bytes to drop. It will still load as slow as molasses, but it will be much smaller in dimension! To actually 'resize' an image can mean two things, dimension or byte size. I have only mentioned dimension size here, not byte size. That is also another post for another day.
Conclusion
Now it's time for those of us adventurous types to play around with the image tag a bit to embed it in our brains. It's handy to know these things and it will only serve to make you a better blogger or web designer.
Do you have any questions relating to the image tag or anything found in this post? Please feel free to ask by leaving a comment. I left many holes in this topic due to the elaboration one might have to go through to cover all the points. I plan to cover everything about this in due time. Until then, let me have it with any questions you might have.
Resources
W3C's HTML Images Page
Alt Attributes: Describing Your Images for Better Web Accessibility
Entrecard DropSurf