How to post larger pictures on Blogger

I’ve always wondered why uploaded pictures in Blogger are so small. I mean, images are one of the most important aspects of a blog. And more important when they are part of a story. They are to small to make a difference and is annoying when you have to click them to get a larger version and then hit back again to return to the story.
I’ve tried on my own to find a method to post my pictures in a larger format that the one from above. The example is a photo of me when I was very little. The car in the back was our first car and it was 1 year younger than me. I’m sure you can see the car but I don’t know if you can see me 🙂
So, in order to enlarge the pictures I have gone to the other side. The programmers side. I’ve hit it! The Edit HTML button on this article (and any article) is the key.
First you will see a language from another world and finally realize why those IT guys are getting paid so much money. But soon you will start to understand some of the mysteries. Let’s take a closer look at the below print screen.

If you take a quick look at the alpha-numeric characters you will find a html address. http://3.bp.blogspot.com/_6fMjShU0ByU and so on… That’s the link to the image that you have uploaded into your automated created Picassa account. And if you continue looking you will eventually find the Holy Grail, the resolution of the image, as per the below print screen. As you can see, the largest image blogger wants you to upload is with the width of 400 pixels. But go ahead and change that resolution, but be careful. You must preserve the aspect ratio of the picture and not go beyond your blogger’s template. I have choose mine to be the largest one, so let’s say I want to enlarge my picture to 720 pixels width. Just look for the resolution in the code and change it.
But then all I got was an enlarged fuzzy image. It’s blurred because it’s an image that has been scaled from 400 to 600 so is normal to have a poor quality. Not pleased by the results I’ve started googling the issue. And surprise, all I could find was the same thing that I did so far. Everybody showing me how to change the resolution, but in their cases it worked. The images were scaled to their original resolution. No blur involved.

Then I’ve returned to the Edit HTML and started reading again the whole code and I’ve found something that may help those who bumped into the same problems I did. I’ve seen as per below print screen that there are actually two links to my pictures and they looked the same. But not quite. If you take a closer look you will see the difference. First link begins with “href” which I don’t know what it stands for but is important. Maybe is reference or high resolution format. The second link begins with “src” which must be the source of the picture. So, there’s no point in changing only the resolution in the code if you don’t modify the link also.
You just have to make sure that the link from the “src” is the same with the “href”. And that will only take to change characters “s400” to “s1600”. I know that it might take a lot if you have a lot of pictures but I think you can copy the whole text in to an text editable software and change all that begins with… with…

So there you have it. The final product, larger and cleaner. The original image in a bigger version. This time I think you will be able to see me without problems. Hope this was useful.

Leave A Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.