Tuesday, August 21, 2012

Blog Image Sizes

When you are writing a blog post in Blogger, have you ever wondered how to make your image sizes bigger or smaller?  Sometimes they might look too small or too big for the post area.  How come?  Hmmm, let's figure it out.

In the Blogger menu panel, you can insert an image into your blog post by clicking the "Image" button and copying in the file name.


For this example, I'm going to use a layout I made with Dream Big Designs 'Into The Wild'.  It's saved at 600x600 pixels which is the standard size for gallery layouts.  Once your image is loaded into the blog post, you can change the size of the image as well as change the alignment of centered, right or left justified.  If you click on the image, a menu pops up that allow you to make adjustments.


Now, how big or small will your layout get??  You get 5 choices for sizing:  Small, Medium, Large, X-Large and Original Size.  Blogger is going to take your original image and make a sizing adjustment.  The width is the most important measurement here because your blog post area has a fixed width, but the height can vary.

If you click on "Small", Blogger will resize your image to a width of 200 and change the height accordingly.  So my layout gets resized to 200x200 pixels.

A "Medium" image will get resized to a width of 320 pixels, so my layout is now 320x320.

A "Large" image has a width of 400 pixels, so now this image is 400x400.

X-Large width is 640 pixels, so this image is now sized at 640x640.  With a centered image, some of the layout gets cut off on the right hand size (or it gets overlapped into your sidebar area depending upon which kind of blog template you are using).  This may not happen with a browser like Google Reader that gives you a larger viewing area.

If you select "Original Size", Blogger will keep the exact image dimensions your file was saved as.  So this is my original document in a size of 600x600 pixels.  Even this size has some of the layout cut off/overlapped on the right hand side.

It's very easy to adjust your image size so that you can display layouts and kits on your blog.  So which size image do you like?  Bigger is certainly better than smaller when it comes to seeing the details inside a kit or on your layout.  And personally, I like having my blog posts centered so it's easy or read and I think it looks cleaner.  

But it bugs me that some of the layout image gets cut off on the right size when I sized the image at X-Large or Original Size.  If the image is supposed to be centered, you'd think that the layout would get equally cut off on both sides, right?  Not so in Blogger, your post area is actually a little bit skewed to the right of center.  The explanation lies deep within the HTML code of how your blogger template is set up.  Explanations like that require a helmet and night vision goggles to comprehend so let's just  remember that the post area is a little off centered. LOL!

You can play some tricks to make your image fit a little bit better.  Here is the X-Large image but I made it "left justified".  Before when it was "centered" you could only see the brown scallop strip on the right, now you can see some of the orange tiger striped paper on the right (or see less of an overlap in the sidebar area).

Boy, that was a lengthy post!  But now you know how to experiment with your image sizes in a blog post and how to do a little bit of manipulation to fool Blogger.  Give it a try!  Have a wonderful week!

2 comments:

  1. FYI, when I looked at your blog post in Google Reader (and I like to use the Google Chrome extension FeedSquares, too) as opposed to just a web browser, I saw ALL of EVERY image you posted. I really had trouble reading your post with understanding because I could see everything in Google Reader and in Feed Squares - no image was cut off. But, when I looked at this post in a web browser, then the images were trimmed just as you described. Very interesting. I'm glad I only look at blogs in my reader so images aren't trimmed, but I had no idea there would be a difference. Very interesting.

    ReplyDelete
    Replies
    1. Cheryl, that's a great observation, I totally forgot about viewing tools like Google Reader. Google Reader has a much larger viewing area to see a blog post than viewing it directly in a web browser. I added that note in the tutorial. Thank you for letting me know.

      Delete