Free unlimited bandwidth image hosting for Blogger blogs

This tutorial is about hosting images that are used in parts of your layout –images for backgrounds, buttons, badges etc. We usually host them on a free image host because Blogger does not provide hosting for images other than the main background image, images in your posts, header and picture gadgets.

But do you know there is a trick you can use to make Blogger host these images?

Now why would you want to use Blogger when you have Photobucket, Flickr, ImageShack, TinyPic, Imgur and many other free image hosts available out there? Here’s why:

 

I. Reasons why you should host images on Blogger

1. Bandwidth
   
   These dreaded “bandwidth exceeded” images say it all. Free image hosts usually impose a bandwidth limit. Exceed of the limit and you will see one of these images instead of your image.
   Blogger on the other hand, provides unlimited bandwidth.
   Almost all free third party Blogger templates use free image host (with limited bandwidth) to host their images. If you are one of the users, beware! Sooner or later your blog also might be littered with “bandwidth exceeded” pictures!

   (If your site is self-hosted e.g. WordPress, consider putting it up on a dedicated server for faster speed and a lot more bandwidth).

2. Speed
   Hosting all images on Blogger (rather than Blogger plus other external servers) will reduce HTTP requests, therefore reducing loading time. Besides, Blogger is a part of Google –known for its super fast servers.

 

II. How you go about hosting your images on Blogger

1. Go to post editor to create a new post.
2. Add (upload) the image just like you add any other image to a post.
3. Switch to Edit HTML mode.
4. You will see the code for the image, somewhat like this:

   <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUhWkBNrHmHQ44l523TDLZrB8GSZKM7nkYkejaSeTCQi9mvBxj7Rn7-qd_RtFpSp9zIL4DfId6TOCb0mkuEdpGWf4-9mWTMMRMbKEApereXh5k5n_3jsOE7xmFoo29kWxiddpSspcqCc/s1600/imagename.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUhWkBNrHmHQ44l523TDLZrB8GSZKM7nkYkejaSeTCQi9mvBxj7Rn7-qd_RtFpSp9zIL4DfId6TOCb0mkuEdpGWf4-9mWTMMRMbKEApereXh5k5n_3jsOE7xmFoo29kWxiddpSspcqCc/s320/imagename.png" /></a></div>

   Notice the code has two URLs in it.

   • The first URL (in green) comes after “href”. This is the link to your original image.  It should come with "s1600" in the path, like this:
     http://3.bp.blogspot.com/………………………/s1600/imagename.png
   • The second URL (in blue) comes after “src”. This is the link of the image you see on your post.
5. We are only interested in the first URL, the one with "s1600". You want this URL since it is the direct link to your original image.
6. Copy and paste it your HTML.
7. Exit the post editor. You don't have to save  post as the image is
   already stored in Blogger server.

Enjoy!

Last update: December 12, 2011