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



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.



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



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



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.



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



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



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



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.



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



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



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.