:: How To Make Your Images Appear Bigger on Blogger : Method One

January 23, 2010

Hey! Hello! Here’s an easy blog tutorial for you!

When you’ve taken a lovely photo and you upload it to your Blogger blog, sometimes you lose some of the more special details when the image is automatically resized. Does that annoy you? Do you want BIG images?! It’s really quite easy.

First of all, you need to check how wide the ‘Blog Post’ part of your blog is.

Go to Blogger Dashboard.
Click Layout.
Click Edit HTML then…

Scroll down until you see something that looks kinda like the text below. Your text will vary slightly from this, because your blog template is different to mine. The #main-wrapper part is common to all Blogger templates, though :

#main-wrapper { border-bottom:0px dashed $bordercolor; border-left:px dashed; border-color: black; border-right:px dashed; border-color: black; background: #FFFFFF; padding: 5px; width: 795px; float: left; margin-left: 5px; margin-right: 5px;

We can see from this that my ‘main wrapper’ – the part of the page on my blog where the actual post and photos appear – is 795px wide. So I can size my photos up as high as about 790px in width before they start to edge out of the correct column or worse, get chopped off!

You’ll see what I mean later… You should find out the width of YOUR blog post in the same way: Look for #main-wrapper { and then a few lines down it will say width: **px;
that is YOUR blog’s post width. Write it down. We need to size your images about 10 pixels smaller than your blog’s main-wrapper width to allow a bit of space on each side.

Important :: You need to be sure that you’ve taken your photos on a high quality setting. If you’re taking them in a small format we can’t make them bigger without affecting the image quality. So have a poke around with the image quality on your camera until you find a high quality setting : something around 800px wide is good – even bigger is good too but you’ll need to resize them later!

Once you’ve taken your photo, and uploaded it to your computer, find out how big it is. Right mouse click on the image and select Properties. Here it will show you the width and height of your image. Is it really huge like mine?! And WAY too large?! Go to Picnik.com and resize it to the width of your blog post (or even about ten pixels smaller) The height will automatically resize to the correct scale on Picnik (or you can resize it in your usual program).

Note the new measurements of your image :: width and height in pixels. Write that down. We’ll need those figures in a second. If your image was already a size that will fit your post width, you still need to write down the image size (both height and width) for use in minute.

Now you need to upload your resized photo to Blogger in the usual way by clicking the ADD IMAGE button. (Select LARGE size and centre the image if you like!)

Here we’ve done that

See it’s showing up automatically sized at this small default size? That’s okay. Blogger has your image stored at it’s new correct bigger size. We just need to tell Blogger to SHOW it at that size. To do that click the Edit HTML tab as shown. Things will look a bit gobbledygooky like below! Notice we’ve highlighted the width, height and another figure which says s400 in our screen shot? : these are all the figures we need to change.

Do this::
Change the width to YOUR image’s resized width.
Change the height to YOUR image’s resized height.
Change the s400 to s1600 (if you forget to do this your image will be all blurry)

Now click the COMPOSE tab and your image will show up sized correctly! Hurrah!! Your image is no longer the Blogger default size!! You can size it a bit smaller if you like by clicking the image and dragging the corners inwards.

xx Pip

No Comments

Leave a Reply