Working With Images

When uploading images to Blogger you should  normally see two options. Uploading from the web, and uploading from your computer.  Now Blogger has a limited amount of space so it is best to upload to Imageshack or some other free hosting site. Then choose to upload from the web options. However you can do it anyway you please. If you choose to upload it from your computer I would recommend using  MS Picture Manager  to decrease the size of the image.  This will not cause any distorting in the image.

Now after uploading a image you are giving some size options to choose from. But what if you want a  different size then the ones giving? Well their is a method to resizing the image and not getting a distorted image.

 If your uploading from your computer you can use this method. After uploading the image to a blog post you can switch over to Edit HTML and you will see something like this below.

<a href="http://2.bp.blogspot.com/_AQcoraOfS38/TG-I-M2wWyI/AAAAAAAAAOw/h92AriBGd44/s1600/1112.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_AQcoraOfS38/TG-I-M2wWyI/AAAAAAAAAOw/h92AriBGd44/s320/1112.png" /></a>

The Red  is your maximum size or real size. The Blue is you current size.  If  you change the Blue to a number under 1600 this will change the size of the image without distorting.

When using image from the web its safer to re-size in %

<a href="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="800" src="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" width="400" /></a>

See the code above.  The actual size of this image is  800x400. Now we can change of this image without distorting it by changing by the same percent. This just happens to be half percent so it make re-sizing easy.

<a href="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="1000" src="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" width="500" /></a>

As you can see I added  200px onto the width which is 25% increase. So I increase the height by the same. This will now show up as a larger image but without the distorted look.


Adding Borders:

Rather you upload from the web or computer their will be a place in the code for a border.

<a href="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="http://www.filetransit.com/images/screen/897f3bc5ce5da76f1f50c03b84c2a4d1_COOL_MP3_Splitter.gif" width="320" /></a></div>

As you can see above in Red the border the border size. Normally this is set to 0 which will display no border. Change this to the width of the border you want. This is a standard solid border.