Blogspot How to: Host Images on Blogger

Why Should I Upload Images on Blogger???


Image hosting sites like Photobucket & TinyPic have a bandwidth limit. Which means if your uploaded image is viewed too many times then a ridiculous notification will appear instead of your images. So, avoid using such services. Blogger provides 1Gb of free space to every user for images and that's more than enough.

This is why I hate Photobucket!


Photobucket bandwidth exceeded image

Steps to upload your images on Blogger!


To use Blogger as your image host, follow these steps:

1- Log in to your Blogger account click New Post button to create a new post.

Blogspot Tip: It doesn't matter if you have one or multiple blogs, you can create a new post in any of your blogs.

2- In the new post make sure you're working in Edit HTML mode.

3- Now click on the Add Image icon to upload your image.

4- A new small window will open to upload your image or images (maximum 5 at a time).



5- You can either upload images from your computer or give URL of some other picture to add to your post. I'm uploading an image from my computer by clicking the browse button and giving image location on the hard drive. Make sure to chose Large as image size!

6- Once your image is uploaded, you'll see some code like this in the post editor:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_wa6zL1GRiOs/SkS13Dw5_WI/AAAAAAAADEo/vXbTj9bL7V0/s1600/add+new+picture+window.PNG"><img style="cursor:pointer; cursor:hand;width: 400px; height: 262px;" src="http://4.bp.blogspot.com/_wa6zL1GRiOs/SkS13Dw5_WI/AAAAAAAADEo/vXbTj9bL7V0/s400/add+new+picture+window.PNG" border="0" alt=""id="BLOGGER_PHOTO_ID_5351602214730857826" /></a>

7- There are two image URLs in the above picture code, one is the source of the image (Green) and the other (Blue) is the URL to which the image is linked.

Note: As you can see that the source image URL is linked to itself which means that when you'll click on this image, the same image will be opened on the same page.

8- We've nothing to do with the URL of the source image (Green), all we need to do is to copy the other (Blue) URL and use it wherever we want to use.

9- So, this is the URL or address of our uploaded image:

http://4.bp.blogspot.com/_wa6zL1GRiOs/SkS13Dw5_WI/AAAAAAAADEo/vXbTj9bL7V0/s1600/add+new+picture+window.PNG

10- Use it wherever you want. You can also delete the post after uploading your images but I'll recommend you to save it as a Draft because you might need the URLs of the uploaded images again in the future.

Update!


If you guys are unable to upload on Blogger then there is a great alternative out there, imgur. Uploading an image there is incredibly easy and quick.

41 comments:

  1. Isn't the images stored on photobucket itself when you insert images into blogger?

    ReplyDelete
  2. Blogger images have nothing to do with Photobucket, they're stored on Picasa Web Albums.

    ReplyDelete
  3. AHA I found your secret:
    "What if someone tries to open the Page Source, that's my favorite technique of stealing and reverse engineering...."
    I browse the forums to pick up tips and links like the one that got me here. There are a few very helpful, very informative places I found that way. Including this one.

    Everything is so clean and tidy and well-organized here. I'm impressed and envious! (I think your choice of font is a big part of it.)

    I think your tips on uploading images direct to Blogger will come in handy. Thanks much.

    ReplyDelete
  4. hehe thanks for the compliment...

    ReplyDelete
  5. Hey buddy Thanks for this! I think that if we remove the s1600-h part then the image will be hotlinkable only on .blogspot url! For general replace the s1600-h with s800 . That should work fine and we are on a safer side this time :) btw we can also upload it to directly picasa album and then add a parameter ?imgmax=800 at the end of the image url (of course removing the s400 or whatever there on our image) then also it will be hot-linkable!

    ReplyDelete
  6. Thanks Swashata for these useful tips, good to have you here....

    ReplyDelete
  7. When I am in html format in my new post, there is no add picture icon. Is this normal?

    ReplyDelete
  8. @ Bhalachandra, no this is not normal, the "Add Picture" icon must be there!

    ReplyDelete
  9. thnks for the info...how abt picture only appears in the two sides of the page (left and Right ) and not in the center of the page

    ReplyDelete
  10. @ A@Barua, please explain your question, I didn't understand!

    ReplyDelete
  11. Thanks so much for this. This is great for using your own images in the blogger templates.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. ok this is seriously one of the best tutorials i have ever read. thanx so much, i was almost going mad...

    ReplyDelete
  14. Thanks so much for your great tutorials I am including my URL for my blog, would you be able to tell me how to get the left side over further so it fits into the middle of my background. thanks christina
    http://nutnbutdezigns.blogspot.com/

    ReplyDelete
  15. I am using a "simple" template. This part does not come up after I add an image.

    Tip: Always chose "None" as image layout and "large" as image size when using Blogger as an image host.

    The only options are left, center or right. Is there another way to use blogger to "host" the image I want to use for my background? Thanks for any info.

    ReplyDelete
  16. when I'm in edit HTML mode there is no uploead image option???

    ReplyDelete
  17. @ dcraft & musikko, both of you can use imgur.

    ReplyDelete
  18. hi:
    thanks 4 tryin to help us.
    when i go to html edit to upload a foto, there is no add image icon. so now what? i'm trying to use my own foto for the background.

    ReplyDelete
  19. @ Theodore, if you're having problems with Blogger then use imgur.

    ReplyDelete
  20. when you click on edit html then ad image button disappears in my blog. So how can I follow your instructions. It is frustrating.

    ReplyDelete
  21. @ SignWithMe, don't worry just upload the images in Compose Mode and after uploading switch to the Edit HTML Mode. The image code will be there :)

    ReplyDelete
  22. I made this work but had to start in compose mode to use the insert button. I don't have the screen you show above although I swear I've seen it. Thanks for the tip; I've been wanting to be able to do this without being tied to the hosting sites for awhile.

    ReplyDelete
  23. Thanks a lot it is very easy i have done this

    ReplyDelete
  24. Nice tip I have add an picture to my blog title using this tip.

    ReplyDelete
  25. oh man thank you... got it... ............:)

    ReplyDelete
  26. Am I able to do this with animated gif images. Because it appears if I want to use say an animated image in my header then I have to have them hosted elsewhere because Picase does not support gif animation. Is this correct?

    Thank you.

    ReplyDelete
    Replies
    1. Hi JJ, yes Blogger doesn't support .gif images. You can use imgur.com which is a fantastic image hosting service.

      Delete
  27. is there any way to upload images such that the image url they get after the upload is complete is same domain as my blog's domain?

    ReplyDelete
    Replies
    1. Hi HB, no, I don't think that is possible on Blogger even if you have a custom domain.

      Delete
  28. Replies
    1. Hi Mirela, I'm happy that it worked for you :) Please add a link back to betatemplates, I'll really appreciate that :)

      Delete
  29. I followed the instructions to the T and it even said "updated" when I clicked "apply to blog". However, the image has never shown up? Did I miss something?

    ReplyDelete
    Replies
    1. Hi Shawn, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  30. Replies
    1. Hi there, thanks for your comment. Please add a link back to this blog. I'll really appreciate it. Code is available in footer.

      Regards,
      Bilal

      Delete
  31. im a newbie on blogging, this post really helped me. i had the same images from another site but it does not properly display on my blog site.

    ReplyDelete
    Replies
    1. Hi, What do you mean by images not properly displaying? What is your blog address? Can you show me a post where you have uploaded the image and it is not properly displaying?

      Regards,
      Bilal

      Delete

Note: All comments will be moderated.