Monday, 2 May 2011

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!
I hope that's clear. Have a go and let me know if I've missed anything out, or if my instructions need clarifying. I'd love to hear about how you get on :)


6 comments:

  1. Having fiddled with the widths of the left and right columns I find Large mostly fills the width of my blog.

    ReplyDelete
  2. Oh, this is spooky (cue Twilight Zone music). I was doing the same thing last week but like you, I found that the image quality suffered if I enlarged it too much.

    ReplyDelete
  3. EE - that's great :)

    Arash and Anna - you're welcome :)

    BilboWaggins - spooky! Are you having the same problem as I've spotted I wonder? Otherwise it might depend on the file size of the image you're importing into blogger in the first place. If you've made it much smaller before importing, then this gives you less to play with when enlarging it in Blogger. There's a big clue in the HTML which I haven't told you about. You need to look at the picture id imported in blogger. In my example this is:

    <a href="http://1.bp.blogspot.com/-Q1ey_PWQJsQ/TbcNWbG3r7I/AAAAAAAAGAE/Vq0mgrp8lTI/s1600/And+the+winners+are.JPG"

    you'll see it has s1600 (rather than the s400 we were looking at in my post). This tells you I have 1600 pixels to play with for my image size, so my picture will always be sharp as the max width in a blog is 1000 pixels.

    If this value for your images is smaller, then you can only make your images as wide as the value you have, otherwise they can look blurred if you try to enlarge your image much bigger than this value.

    I hope that's clear!

    ReplyDelete
  4. agh - blogger's cut of the html I was showing you! Email me if you need more info.

    Note to self - must write a post about this sometime :)

    ReplyDelete
Related Posts Plugin for WordPress, Blogger...