Saturday 26 September 2009

Changing image size in blog posts

I had earlier tried to upload pictures from my laptop directly to the blogger page, http://zave-tech.blogspot.com/ using Blogger Uploader.

But there were a lot of disadvantages:
  • Irrespective of the size of the image uploaded, it always appeared with a pixel size of 400 X 250.
  • The image did not fill the width of the page, and was hence not very clear.
  • The image was actually reduced in quality to 400 X 250 pixels. So even if I tried to increase the dimensions, it only blured the image, rendering it unreadable.
  • The main image that I had uploaded would be stored in Picasa web album along with its compressed image as well.
  • Like the one given below is a 1280 X 800 image, but it appears like this without any change.

Hence I was bent on finding a solution to it. But I got options of using other photo sharing sites, which I did not want, because I love Picasa. So after trying out many things I got a way by which I could prevent blogger from compressing the image, and increase the dimension of the image according to my needs.

Steps:
  • Upload the image by clicking on the "Add image" button provided at the tool bar of the blogger post. Select the image from your computer and select the layout, in image size, choose "Large". Now click "Upload".
  • After you have uploaded the image using the standard blogger image uploader, go to the "Edit HTML" section of the "edit post".
  • Search the code of the image uploaded(generally found at the begining).
  • Now search for three things in the code:
  • --width: 400px; height: 250px;
  • --s400. This is written in the second image url under src="http:..." and before the image name, like "Vista+Desktop.jpeg"
  • Now replace the bold element "s400" with "s1600" to use the original image
  • The width and height depends on your use.
  • I prefer putting a "target="_blank"" after the a href="http:...", so that the image opens in a new page incase the user clicks on that.
  • One more advantage of this is that, only your original image is stored in Picasa web album and not the compressed one too.
  • The previous image is now displayed as below.

Enjoy!

0 comments:

Post a Comment