How To Make SEO Friendly Images in Blogger

I sat down last night to find out why Wordpress blogs have better search engine rankings when compared to the Google's Blogger. The answer which I found was that Wordpress blogs are highly SEO optimized (especially those run on Thesis Theme), meaning that the plugins on WP make it flexible for the user to optimize his/her blog more compatible with the search engine algorithms. Whereas, this is not the case with blogger.
You Can Get More Traffic By Images : Add Pinterest Pin it Button For Blogger
This post basically deals with one simple trick that will make our blogger/blogspot blogs more search engine friendly. I have sufficiently talked about title tags and meta tags in my previous posts. So, I have discussed only about optimizing our images in this post. Follow these simple steps every time you post an image on your blog and I'm sure your blog will rank better than it did before. Moreover, you will drive traffic through your images by doing this.
Once you upload an image using the post editor, click on the HTML mode. You will find a code something like the one shown below. Its now time to optimize this code for better SEO.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s1600/image.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s200/image.png" width="200" /></a>

1. ADD THE TITLE TAG

Title tags basically display the text when the mouse is hovered over the image. So, how do I add this tag to my image? It is very simple. Just add the following piece of code and insert the text that best describes the post. For example, I want the message "CSS Tutorials" to get displayed when I hover my mouse over the image on the right. To do this, I should modify/add the code as follows.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s1600/image.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img title="CSS Tutorials" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s200/image.png" width="200" /></a>

2. ADD THE ALT TAGThe alt (alternate) tags are basically those text which appear instead of the image, that is, when the images do not upload faster either due to a slow connection or host problems, these text will be replaced in place of the image. So, it is very vital that every image on your blog has an alt tag. To add this, add the text highlighted in green. For example, my alternate text for the picture above would "CSSEditLogo" and I have highlighted the same in the code below.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s1600/image.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img title="CSS Tutorials" alt="CSSEditLogo" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkp_22Ql8BFdCZ4px7EgRN9zQjh-b_BUjRx4SAuCYmxUxA-iwWwPJSOQeTao_B6BFxPzyjP3hTWuwq5PPFp-lKzO_Xm0_6wNojhYakfgBiX5XIxsvakV4WKjFNfE9xVCEmnyhWrqkXw/s200/image.png" width="200" />
</a>

3. PROPER IMAGE NAME

The most important factor regarding the SEO would be a proper name to the image. Make sure you include the keywords when you name your image and let it be relevant to the image. It is very important that you avoid spaces because these are generally replaced by %20 and will have no value when it comes to SEO. So, the general idea would be to use '-' or '+' sign for blank spaces.
Example: Instead of CSS Edit Logo, it is better to use CSS+Edit+Logo or CSS-Edit-Logo as your image name. You can completely avoid this confusion by using Resizer.
I suggest you to use Any Resizer before you upload your images to Picasa because it speeds up your blog by decreasing the size of your image.

It is important to note that even though your image size is reduced, your image quality will still be retained.

I hope these tips would be handy for newbies to optimize their blog SEO. I'm sure if you practice this on a regular basis, your blog will rank much better on Google and various other search engines.