Thursday, September 10, 2009

Tutorial: Changing Sizes of Pictures in Blogger

In the past week I have noticed a couple of people who asked how to make their images the correct size in a blog post. There are several ways to tell blogger your picture is too big. (As a side note, the absolute best way is to re-size photos before you upload them and save them as an optimized .jpg using software like PhotoShop. However, most of us are in a hurry or don't have PhotoShop so we want them to magically become the right size right there in our blogs.) Here are two of the ways to do it.

First Way: HTML and Pixels

screenshot of blogger editor with html tab selected

Make sure you're using the HTML editor. The basic code for a picture that's already uploaded somewhere else on the web (such as Flickr or Photobucket) is shown above and you put the address of the image between the quotation marks.

screenshot of blogger editor with code added

This adds an image to your post at whatever size it uploaded.

full-sized sample picture of Little Mister

If your blog is only about 450 pixels wide, like mine, it will cut the side of the picture off.

screenshot of blogger editor with the image source source code and width and height set to 300 by 400 pixels

You can force a change in size by adding this piece of code to your image: width="" height="" (Practically, it doesn't matter which one is first, although to have "good" HTML I'm sure it matters. Personally, I am all about what works. If someone who knows better wants to dispute this in a comment, please feel free to enlighten us!)

Write the pixel size you want in the quotation marks. I usually size my pics to 400x300.

sample picture contorted with incorrect pixel height

Make sure you keep the correct proportions and don't get the width and height backwards or your picture will appear contorted!

screenshot of blogger image uploader

If you use the blogger picture uploader you can select the size and blogger will automatically re-size your picture.

screenshot of blogger image editor with automatically generated code.  Height and width circled in red.

You can still change the size in the blogger code by finding the height and width pixels and changing them.

sample picture showing the correct size

In this way you can get your picture to be the exact size you need. Remember, you cannot re-size it to be LARGER than the original uploaded size or it will appear pixelated and blurry.


Second way: Quick and Easy

For those who don't want to mess with code and want a quick and dirty way to change the image size, here is an alternate method that works just as well.

screenshot showing blogger editor with compose tab selected

Once you have your photos uploaded onto your blog, go to the "Compose" view.

screenshot showing picture selected

Click on your photo to select the one you want to re-size.

screenshot showing picture being resized

Click on the corner of the picture and drag it larger or smaller. You will notice that blogger automatically retains the correct proportions and also displays the pixels as you go. (If you check the code, you will notice that blogger has changed it for you.) Once you're done, you can publish your post with the pictures exactly how you want them.

sample picture showing the correct size

1 comment: