Tutorial Tuesday: Images Sizes while Blogging

Have you ever noticed that it's challenging to get your images sizes to be the same width while blogging? And don't you think it's nice when you look at a blog where all the images are the same size? Well I'm going to help you out. Below you will find photo instructions for Blogger, and a bit of quick math for anyone else. Here we go:

First, you need to determine what size (in pixels) you want your images to be. This takes a little trial-and-error where you type in numbers into the HTML code and then Preview the post to see what size you want. My images are always 465 pixels wide. 

Since I want my images to end up being 465 pixels wide, I need to know that my original photo will be at least 465 or higher. To check the dimensions of a photo, you can right click it and Mac users select "Get Info", Windows select "Properties". This can also be done in Photoshop by checking your Image Size. If the image is smaller than your desired number, you probably want to find a bigger image.

Insert your image using the little image icon.

One by one, click on your images and select "Original Size"--this will make the images the biggest size possible without compressing the size (in other words, your resolution--the clarity of your image--will remain intact).

Unlike the "Small", "Medium", or "Large" options, "Original Size" does not include the pixel dimensions. You will have to add them yourself--and the great thing is that you only need to add the width--the height will be calculated for you! 

Click on the "Edit HTML" tab at the top right of the posting box. It will show you a lot of lines of HTML code. For each image, you want to find the <img/> command (highlighted above). Within that line, you can type in the following command: width="465" . I have highlighted it. Spaces don't matter in HTML code, so just make sure you have it within the <img/> line.

Do this for each image, and return to the "Compose" tab. They should all be the same size! Blogger users, you're done!

Now, there may come a time when you will have to calculate your own pixel dimensions (Wordpress, Typepad, Photobucket, etc). For this, there is a simple formula that will maintain the ratio of your image, thus keeping the clarity of your image. Get out your bifocals and pocket protectors, here we go....

If the dimensions of your original image are 500 by 700, but you know you need your width to be 465, all you have to do is find out what your new height will be. To do this, multiply the original height by the desired width, and divide by the original width. 

In other words, multiply 500 x 465 and divide by 700. This gives you 332.143, your new height. 

Still with me? Once you have the new height and width, all you have to do in your "Edit HTML" tab is insert the command: height="332.143" width="465" within the <img/> line.

I hope this helps! (Feel free to leave a comment below to let me know if this has been helpful or if it's just balls crazy!)

♥ Shannon