How To: Optimize Your Images for Search

Have you every gone to Google image search looking for a quick photo, image or wine label? Image search is an area often overlooked when first dipping your toes into the world of search engine marketing.

Remember, search engine bots are a series of algorithms and routines that determine ranking and image search engines are no different. But, you can't expect a bot to be as perceptive as a human and identify what your keywords your wine images should relate to.

So, give them a hand. Effectively labeling your wine (or any) images and alt tags is a great start. But, do so within reason. A few months ago we posted about the abuse of search engines by black hat developers who used 'keyword stuffing' on their meta tags to lessen the relevance of certain determination factors such as meta tags - and it too has been done in image tagging. This shouldn't thwart you from using images as an effective means of SEO however - but do so within reason and without keyword spamming.

Properties to understand about images.

Naming: When saving or selecting a filename for your image, be sure to use something which is relevant not only to the image description, but the overall keyword theme for your specific site or page.

Do's: Separate words with hyphens. Search engines cannot decipher where one word begins and another ends without an identifiable delimiter such as a hyphen (-).

Example: wine-marketer-logo.jpg not winemarketerlogo.jpg.

Don't: Separate words with spaces or underscores when a hyphen will do.

Example: wine marketer.jpg will conver to wine%20marketer.jpg.

Alt Tags: Alt tags allow you to provide a description of your image to visitors and search engines for multiple purposes. First, the alt tag will show prior to an image being displayed should it take a few seconds to load and will give visitors a description of what is loading (or even maybe pointing to a bad link). Second, they provide a hover over effect on the image, allowing visitors to see a description of images they place their cursor on. Third, they display an image description for browsers or users who are unable to load your site images including those visually impaired. Lastly, and most importantly for this article, they provide a description to search engines of what this image is about. Pairing this with the selective keywords on your site and image filename, it is another opportunity to reinforce your search engine worthiness!

Here is an example of SEO friendly image naming and alt tag in HTML format:

HTML format: < src="specify image path here" width=" " height=" " alt=" write text that you want to show if an image is not appearing ">

Remember to use alt tags whenever possible as another form of traffic allocation through image search and in helping boost your organic search results by providing even more keyword relevancy for your site.

Suprisingly Wine.com adheres to alt tag standards however does not relate this into the their image filenames. All the little things make a difference in SEO!

For More details Visit My Site : www.sbeermohamed.co.nr

Preload Images with CSS

Posted in CSS, December 23, 2004

As support for CSS improves, pseudo-selectors like :hover, :active and :focus will become more widely used. Already :hover is in use on many sites to provide rollover states to buttons, as on this site (the menu bar). The other pseudo selectors will, in time, give far more opportunities for the use of rollover images.

One potential problem with image rollovers, though, is that in order for an image to be displayed, it must be downloaded. Consequently, for rollovers to work smoothly and quickly, all the necessary images must be already available on the user's PC. Otherwise, the rollovers will behave badly, like in this example using large images.

Until recently, rollover effects were achieved through use of JavaScript, and as a result, a plethora of solutions to the preloading image problem in JavaScript are available. However, using JavaScript to preload images, though not a bad idea when using JavaScript to control rollovers, becomes less bright when it is CSS that's controlling them. A user could very easily (and this is becoming more common) have a CSS-capable browser without JavaScript support or with JavaScript turned off.

So there's a clear need for a way to use CSS to preload images or find another way to avoid the problem. Which gives us two relatively simple solutions to our problem.

The first solution is to create a single background image for your element that actually contains both the rollover and non-rollover images, and then position is using the background-position CSS property. Instead of changing the image when the mouse moves over the element, you can simply change the background-position to reveal the previously hidden rollover image. There's a more detailed explanation of this technique over at WellStyled.com.

The other option available to you is to trick the browser into downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.

First, you need to select an element that doesn't currently have a background image. If so select an element that does have a background image, you will either end up not preloading the image you are after, or you will prevent the element's normal background displaying. Neither is ideal.

Once you have picked an element to use for this purpose, you need to add the background image. The following CSS can be applied to the element and will place the background image outside the viewable area of the image:

background-image: url("rollover_image.png");
background-repeat: no-repeat;
background-position: -1000px -1000px;
Your rollover image will then be loaded when the page itself is initially loaded, along with the other images. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.

For any questions please visit my site : www.sbeermohamed.co.nr