How to Post Large Images in Blogger Blog posts

Few days back a hardcored WordPress user pointed out a Limitation of Blogger ( Blogspot) platform saying that "You cannot post large images in Blogger? WTF blogger Sucks big time man switch to WordPress today!!" And then I actually realised that yea that was one feature blogger team should implement. But sadly until they do something out of it, We need to play around. So voila! Rohith and I, we were exchanging some ideas and I proposed him this problem and after checking out the codes and after trial and error sessions we cracked it up ;)

Yup You can get rid of the blogger default blurry blog images!

This tweak isn't easy neither that hard to understand and implement. Have a careful look at the code segment below

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://chethstudios.blogspot.com/"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrSb0Cc9_l0-sIpOvYehDhZ1P9WUCNLBfGyuN_A_fN6zM3UZTUUP5m2MVgJG_if8z8bWhpHoey3vPDoKWOXhHqcGA19CFbrb9i3F7gK59VF4u2_npNjolT3S-F9OzdPeib2Kk4bKhJws/s400/blogger blogspot.jpg" alt="Blogger blogspot wallpaper download" id="BLOGGER_PHOTO_ID_5295464218500039458" border="0" /></a>

and this is how it looks



In the href section did you notice " /s1600-h/ " and in the src section of the image code did you notice " /s400/ " yes they are the culprits responsible for those frustrating blurry images on Blogger platform. You may not agree sometimes. But try posting a large image and note down its size and now publish the blog post and then you will notice that blogger image uploader has broken down the image size to its default ie 400px. So the next time you need an image with slightly higher screen size then before you publish your blog post. If you are in compose mode then switch to Edit HTML mode of the Post Editor. and Search for " /s400/ " without the quotes and replace it by " / " Yup, and don't forget to change the image size values to a bigger size in this example the initial sizes were " width: 400px; height: 300px " and I resized them into " width: 500px; height: 374px "

So now the image code after all the editing part mentioned above is.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://chethstudios.blogspot.com/"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 500px; height: 374px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrSb0Cc9_l0-sIpOvYehDhZ1P9WUCNLBfGyuN_A_fN6zM3UZTUUP5m2MVgJG_if8z8bWhpHoey3vPDoKWOXhHqcGA19CFbrb9i3F7gK59VF4u2_npNjolT3S-F9OzdPeib2Kk4bKhJws/ blogspot.jpg" alt="Blogger blogspot wallpaper download" id="BLOGGER_PHOTO_ID_5295464218500039458" border="0" /></a>

and now the image looks like

Compare both the code segments above and you will notice 3 changes.

1. I remvoed /s400/ from the src code replaced it with just /
2. I resized the image width from width: 400px to width: 500px
3. I resized the image height from height: 300px to height: 374px

That's it. Guys. Its easy but if you are a blogger who uses loads of images in your blog post. Then use the little trick that I use personally. Before publishing your blog post. In your Post Editor go to Edit HTML and copy all your blog post codes and Open Windows notepad or any other text editor. Now paste your code to the editor. In the Edit section of your editor go to Replace > Now using the option replace /s400/ by / and you can do the same trick with image width and height if you posted images of same size.

Phew! Hope blogger makes life easy by implementing some image options while uploading. haha anyway now I know this post was useful to you. How about dropping a comment? Do feel free to ask me if you have any doubts. Peace!

You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email