Playing With Picture Sizes in Blogger
You may have noticed I've been playing around with the size of the pictures in my blogs lately. It's pretty easy to customise the image size option you choose in Blogger to one more suitable for the size of your blog area if you're happy to do a little bit of editing in HTML.
Blogger gives you the option for small, medium and large images in the old editor, plus extra large in the new one. In the past I've always taken the large option, which displays a picture 400 pixels wide and 300 pixels in height. However, lately I've wanted it to fill the available area so I've scaled up the image size using HTML as the Extra Large option is far too big for the area I have available on my blog.
This is how I do it:
- Go into New Post
- Load up the image you want to use into Blogger in the usual way
- Go into the Edit HTML window if you're in Compose Mode
- The key text to look for is:height="300" i8="true" src="http://1.bp.blogspot.com/-Q1ey_PWQJsQ/TbcNWbG3r7I/AAAAAAAAGAE/Vq0mgrp8lTI/s400/And+the+winners+are.JPG" width="400"
- Note: your src= text will be different as yours is a different image. I'm just showing you the text for the first picture above before I changed its height and width. Your height and width numbers might be different too, depending on the image size you selected
- The numbers highlighted in red are the ones you need to change to get the image size you want. You'll see that the image width:height ratio is 4:3, so you'll need to make your adjustment within the same ratio otherwise the picture will be distorted
- I wanted my image to have the same width as my text, and by a little bit of playing around with the sizes I found this to be 460: therefore the height needed is 345
- So my revised image HTML is: height="345" i8="true" src="http://1.bp.blogspot.com/-Q1ey_PWQJsQ/TbcNWbG3r7I/AAAAAAAAGAE/Vq0mgrp8lTI/s460/And+the+winners+are.JPG" width="460"
- Note that if the 400 in the src= isn't changed (i.e. the first one), then the image displays as shown in the second picture above. As you can see this isn't as sharp as first one shown. I discovered this by accident the other day when I was puzzling over why my images weren't looking as sharp as when I'd first started altering their sizes!