Image Too Large When Clicked On

This is a very common modification that blogger would like to make but has no direct solution to it. Here's the problem. You have a cool camera, and you want to upload pictures that you have snapped to your blog. But when you have done this, the target image when it is clicked on appears to be very big, huge!

There are two ways to work around this issue. The first one is the obvious and tedious one, to resize your image before you upload to your blog. There are hundreds of online websites where you can resize your pictures. Alternatively, you can use software like Windows built-in MS Paint or Adobe's Photoshop to resize your image. You can even download third party software to resize your image in a batch.

But that is not what this post is about. In this quick tutorial, I am going to teach you how to resize your target image without going through the hassle of resizing your image before uploading. You can simply 'tell' (with machine language of course, but not literally 'machine language') blogger to show your image at a different size. And it's rather easy and flexible, as you can change to a different size whenever you change your mind without having to upload your image all over again.


Here's an example. Take a look at the images below. They are the same image, uploaded only once. But with a nice trickery, the second image opens a much smaller image compared to the first one:

Clicking this will open a huge target image

This one has a smaller target image

So here's how. Let's try this together. Go ahead and upload a really huge image to your post using the compose mode. Then click on Edit HTML. The HTML portion of the image will look something like this in the new editor:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s1600/P1070013.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s320/P1070013.JPG" width="320" />
</a></div>

Note that there are two image URLs in the code above. One corresponds to the size of image before you click on, and the other refer to the size of the target image that we are concerned about. In the HTML above, the URL that we are talking about starts with the tag <a href....>, I have highlighted that line for your convenience. This is how the URL looks:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s1600/P1070013.JPG

Now, just before your image name, you will be seeing some number. Usually it is s1600, although there can be some variations like s1600-h and so on. If your image is not that big, you will see a smaller number instead of 1600. Here comes the fun part. Change 1600 into something smaller, and your target image will be much smaller. I wanted my image to be half the size of what it was before, so I'm going to change it to 800. Here's how my URL look like now:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s800/P1070013.JPG

And here's how my HTML portion look:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s800/P1070013.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-9QJNMiuTTOdsXu-qZiXFbXwz3p9Ce73G7bxpxGDCeiVNlEuA4w79buep6Sw8sAHJgKzj4svfpxqpeP5gDQZwfJGon5a2nbE5fxf2uoXn984QmcwtQjKheJxoO85_mDXeWzIjKBS8-8J/s320/P1070013.JPG" width="320" />
</a></div>

So in summary, all you have to do is change the number before your filename to a smaller number in Edit HTML mode. And be sure to change the number on the correct URL, as there are two URLs for one image in Edit HTML mode. Good luck!