Advanced

Using Color Images to Optimize Your Website

Optimizing and using color images for web page content is the most effective way to appeal to humans and search engine spiders alike. It requires a solid understanding of the “Alt and Title” page elements to maximize your efforts. There are many page elements, that determine how different web browsers display your page. Here we’ll focus on the use of the “Alt and Title” attributes in relationship to using color images.

 Definitions

 The “Alt” attribute is designed as an alternative text description for the color image, as simple as that. The Alt text is displayed while the image is loaded into the browser and it’s specific purpose is to provide a description of that image. The “Alt” attribute is dedicated for images as tags to describe the image and is not used anywhere else in HTML code. Search engine spiders love Alt text and the title text and consider it as web page content. So….keyword usage is important for optimizing your images to the search engine and the complex algorithms that the spider uses to determine your page ranking. It is also used in browsers that are text based, like Lynx in lieu of displaying the image. Alt text and titles have the functionality of being heard while using screen readers and assisted technologies for the visually impaired.

 The “Title” attribute has a much more versatile use in the the HTML source code. It can be used in just about any page element. You can use the title attribute to describe images, tables, links, and many other HTML “structural” elements. If you mouse over an image on any web page that is “optimized” correctly the “Title” attribute Tells the browser to display It.

 Move your mouse over the Image below.

Notice how “Parcheesi” is displayed. This is done with the Title attribute inserted into the code, when using color images.

Let's Play!


Understanding HTML code in relationship to images.

As I mentioned earlier, the “ALT and TITLE” attributes of all images viewed on the Internet is located in the HTML code or source code of the web page. The complete HTML line code for an image has many attributes or parts to it. Its purpose is to instruct the web browser. What size the image will be displayed. Where on the page to display the image. Whether or not the image has a border. If the Image is linked to another page or website. And the most important! The title of the Image. And the description of the image. It’s important to remember to use your keywords in the title and alt attributes for your website to be found only for the sake of the image. For example if someone enters Fly fishing pictures in the search engine query, your image has a better chance of displaying in the first few results, simply as a result of the use of the alt and title attribute. But…it is also important to keep in mind that your page content reflects this. In other words, if your image of fly fishing was optimized correctly but placed on a page where the content was about sewing, than this would directly impact the page rank. So use relevant images with relevant page content, optimizing both in the same way compliment each other and increase the page rank.

It is very simple to add the Alt and Title attributes to your HTML code.

Let’s use “Fly fishing” as an example.

 Take a look at the following.

 “Used in an Image” <img src=”color image of fly fishing.jpg” height=”200″ width=”200″ title=”Fly Fishing the Big Horn River” alt =”Family enjoys the summer sun fly fishing the Big Horn river”>

“Used in a Table” <table width=”100″ border=”2″ title=”Fly fishing Guided Tours”>

“Used in a Link” <a href=”page 2.html” title=”Fly fishing – A river in Wyoming”>The Big Horn river>

As seen above the Alt and Title attribute provided more information to the browser about the page elements. Alt was used to describe the color image (Family enjoys the summer sun fly fishing the Big Horn river). The Title attribute was used to describe the purpose of the element within a table using your keywords. The last example shows how your keyword is used while giving your link a name.

 


 

 

Benefits

Using the alt and title tags in these ways add valuable keyword content to your web page for search engine spiders while improving your site’s accessibility to more people. So you could surmise that using alt and title text correctly has “distinct advantages” which overall enhances keyword density to your web page. If these attributes are used to their full potential when images, links and tables are placed on your website, they can attract more visitors. Images can be displayed at the top of Google’s search results if someone searches for an image in the query, if the page and images are relevant to each other and are optimized using these techniques.