Automatically Resize Blogger Images To Fit Blog Post Area

Automatically Resize Blogger Images To Fit Blog Post Area

Automatically Resize Blogger Images

A question I often ask myself is Blogger users wondering how their photos to fit the width of their job area. If you use Blogger for a while, you're no stranger to image size options once you upload your photos. They currently offer Small, Medium, Large, wide and extra origin. Whichever option you choose determines how your photo will be displayed. If you're not familiar with these options, try to add a picture to your message and click this photo in the editor. You will see the size options of the image below the photo.

Depending on the width of your content area, extra large size tend to work well, but what if you just want a little bigger, or just a little smaller? The Grand additional photo size standard is 640px wide. You can set this easily with a little CSS magic.

First, stop the choice of image sizes and stick with the size of the original photo. The original size does not compress or resize your images, so I would not download photos directly from your digital camera without resizing HUGE manually. Otherwise, you'll be pretty downloading large files that slows down drastically the time to load your blog. (Photos of a DSLR are usually about 1-4MB in size ... each!)

I usually resize all my photos to 700px wide during my editing sessions. 700px is a good size because you can reduce a little in Blogger without loss of quality, and the file size is not too large. If your extension area is greater than 700px, resize your photos accordingly. However, think about the future of your blog. What if one day you might want to even larger photos presented about 800px wide? Resizing your larger-than your post box can prove to make life easier down the line. You can not upscale your latest pictures without sacrificing quality, but you can always shrink.

You can use any photo editing program to scale and compress your photos. I highly recommend to get your hands on Photoshop because it will definitely prove its value throughout your blogging career. If you are not in editing your photos on your computer, try adjusting your camera settings to the size "small" image when snapping your photos. I would only suggest this as a last resort though.

Once you have your resized photos, add them to your post. Select the Original size option. Now obviously, if your photos are larger than your post area, they will grow out of bounds, so let's fix this and adapt them exactly.

In Blogger, go to Template> Customize. In the Template Editor and choose Advanced CSS. This is where you will add the following CSS code. Remember to change the value of the width of your actual post area. The width should be smaller than your actual photo, not larger.

.post-body img {
max-width:660px;
max-height:auto;
}

What is good about doing it this way? Say you want to change the design of your blog around a bit in the future and the width of your post box changes a little. Instead of changing each image on the latest posts, all you need to do is update the CSS code with the new width of the image and all messages will fit properly ... and the latest news.

Add to this a little to get rid of the default border and shadow around your photos:

.post-body img {
max-width:660px;
max-height:auto;
box-shadow:none;
border:none;
}

These two lines get rid of contours and give your messages a much cleaner look.

I hope this post helped you! Following comments are always welcome!