Resize Blogger Post Image

I have been wanting to write a post on this for quite some time now. I have written a tutorial on how you can control the target size of an image when you click on it. This tutorial uses the same idea. When you upload an image to Blogger, you can resize them by clicking on the image once. But you are only allowed to choose between Small, Medium, Large, Extra Large and Original sizes. What if you want a custom size that is not defined by any of these selectable sizes? Sometimes, you have to make your post images really small to line up few images in a line.

You can easily adjust the size of your image to fit whatever size that you want it to be. See this image for example. I have adjusted the size of this image to fit the width of my main posting area, with some room to breathe at either sides of the image.

Go ahead and upload the image that you want to your Post Editor using Compose Mode. Then, click on Edit HTML to view the HTML counterpart of your image. This is the code for the image that I have uploaded above:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yCYNkyvoSZr_1OJ3gniD5_tBNP75onDot9bpVkVmj0vbf0D1YeNBnbyPgUU7whHysEyJiBOzrsYHaAvdyoSo-f6EwvM7O8yJ58Mj_htaKXUDU_z4Z-ggdpqQjtk7Eru7McVtyyWWhj8V/s1600/P1070217.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yCYNkyvoSZr_1OJ3gniD5_tBNP75onDot9bpVkVmj0vbf0D1YeNBnbyPgUU7whHysEyJiBOzrsYHaAvdyoSo-f6EwvM7O8yJ58Mj_htaKXUDU_z4Z-ggdpqQjtk7Eru7McVtyyWWhj8V/s320/P1070217.JPG" width="320" />
</a></div>

You have to make two changes to the original HTML code that you have.

1. Delete the 'height' and 'width' attributes in Line 3.

2. Change the number before your filename in Line 3. This number will usually be either s200, s320, s400, s640, s1600 or some other letters associated with a number, depending to the size of your original image. You have to change this number to the value of your preferred width.

After deleting the height and width attributes, and changing the width (from 320px to 516px), this is what I have:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yCYNkyvoSZr_1OJ3gniD5_tBNP75onDot9bpVkVmj0vbf0D1YeNBnbyPgUU7whHysEyJiBOzrsYHaAvdyoSo-f6EwvM7O8yJ58Mj_htaKXUDU_z4Z-ggdpqQjtk7Eru7McVtyyWWhj8V/s1600/P1070217.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yCYNkyvoSZr_1OJ3gniD5_tBNP75onDot9bpVkVmj0vbf0D1YeNBnbyPgUU7whHysEyJiBOzrsYHaAvdyoSo-f6EwvM7O8yJ58Mj_htaKXUDU_z4Z-ggdpqQjtk7Eru7McVtyyWWhj8V/s516/P1070217.JPG" />
</a></div>

To make things simpler, see the 3 highlighted parts below. All you have to do is change this:

<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yCYNkyvoSZr_1OJ3gniD5_tBNP75onDot9bpVkVmj0vbf0D1YeNBnbyPgUU7whHysEyJiBOzrsYHaAvdyoSo-f6EwvM7O8yJ58Mj_htaKXUDU_z4Z-ggdpqQjtk7Eru7McVtyyWWhj8V/s320/P1070217.JPG" width="320" />

to this:

<img border="0" src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s516/P1070217.JPG" />

Have fun.