Valid Code For Images

Images are the backbone of blog and web content.  They capture visitors and hopefully, increase the time they spend on your site.  Good choice of images can also make your site more "sticky", encouraging repeat traffic. Just as important as the image itself is the code that you include. Bad coding can hurt the return you invest in locating and editing images. A few simple tweaks in you XHTML can make your images more search engine friendly and improve your search engine optimization.

Use of XHTML is good practice. Editing content is easier. Syntax rules are clear. If your editing software gives you the option, select XHTML as your markup language. OK, so you've written a good piece.  You've found the perfect image. Now it's time to look at your code. Most editors will give you the option to view the source. This is where you need to clean up and add to the image code.  When you insert an image, you will see code that looks something like this, enclosed in <>:

img src="http://www.anysite.com/images/widget.jpg"

The img is a tag used to define an image.  The src attribute, as you see, specifies the location. If you checked the code on that tag, undoubtedly you would get an error. New standards with XHTML require the use of an alt attribute, which specifies alternative text to appear if the image is unavailable. Having the alt attribute specified makes your site more accessible.  There's more to that attribute though, than accessibility.

The alt attribute is an opportunity to use keywords. Keywords, of course, are key to search engine optimization and driving traffic to your site. If you used this image to write about how this widget saves you money, your alt text may include something like "widget saves money." You've used your keyword, widget, an additional time in your content thus increasing its keyword density, one factor in determining your page rank. So now our bit of code looks like this:

img alt="widget saves money" src="http://www.anysite.com/images/widget.jpg"

Notice that the value for the alt attribute is enclosed in quotes, important for the code to be valid. What else can we do to improve our optimization? Specifying the height and width of an image can help it load faster. You can view the image's properties to get these figures if you don't know the height and width. Our coding gets better.

img src="http://www.anysite.com/images/widget.jpg" height="16" width="16" alt="widget saves money"

Notice again that the values are in quotes.  This is standard with XHTML. Now, the code is optimized, but there are still some problems. The code is invalid. One keystroke will fix the code.

img alt="widget saves money" src="http://www.anysite.com/images/widget.jpg" /

Did you catch it? That simple / closes the img tag and makes the code valid. Again, this is a convention of XHTML. Another convention is the use of lower case. The URL doesn't matter or what is in quotes. All code must be in lowercase. While standards such as lowercase have been added, so have some been taken away or deprecated. Use of the attribute border, for example, is not accepted.  If you seen border= in your code, delete it. Often you see this attribute so that a link isn't made obvious with a border around it.

One word of caution regarding valid code in images: if you use banners or ads from affiliate sites make sure and check the code for these attributes.  Oftentimes the text will be invalid because it follows the old HTML standards.

Writing valid code for your images is easy once you know what to look for. Using it will help optimize your site and make it more search engine friendly, the goal of any webmaster or blogger.