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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp2gGPfPKJqNUjyTJSBAf_JpyMchfRda7-CKO8gex_0DyN4gyC7RC6w8eY2auRtTYbN7Pg-xdYer_FPGctn_Sam5h4xni5NFnGOCvpQDmcoJGCleRJj_0eh77thO15VMfX02xjlD-XBw/400/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkp2gGPfPKJqNUjyTJSBAf_JpyMchfRda7-CKO8gex_0DyN4gyC7RC6w8eY2auRtTYbN7Pg-xdYer_FPGctn_Sam5h4xni5NFnGOCvpQDmcoJGCleRJj_0eh77thO15VMfX02xjlD-XBw/460/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!
Having fiddled with the widths of the left and right columns I find Large mostly fills the width of my blog.
ReplyDeletegood information. tnx
ReplyDeleteExcellent info VP :)
ReplyDeleteOh, 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.
ReplyDeleteEE - that's great :)
ReplyDeleteArash 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!
agh - blogger's cut of the html I was showing you! Email me if you need more info.
ReplyDeleteNote to self - must write a post about this sometime :)