Blogger: Automatically Resize Images

Many bloggers struggle with images on their blog. I cannot count the number of times I've come across a blog with beautiful photos that completely ruin the flow and design of a blog because they are not properly sized. Blogger provides basic image sizing tools in the post editor, but this approach doesn't always fit the blog design well and requires each image be tailored individually.  Luckily, CSS makes it possible to tailor each image for a blogs design by automatically resizing posted images.

Limiting Where and How images Resize
It's important to limit automatic image resizing to specif images on your blog. You certainly do not want design graphics or profile pictures to appear the same as say a landscape photograph you've taken. Keeping this in mind it's important to limit the CSS code to just a specific portion of your page. I suggest focusing only on images in a post body, this way other parts of the blog are unaffected and you're free to customize other areas without messy style overload.

The most basic option is to resize all images in each blog post body to the same width, preventing overflow into sidebars. This is done by adding the below style under Design->Template Designer->Advanced->Add CSS or for the more advanced through Design->Edit HTML just above the first </style> tag found.

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

This single line of CSS automatically sizes any image within a posts body to 400px wide and automatically scales an images height in proportion to the source. This is a simple approach producing a fairly good view, but it's a bit crude. Some smaller images will end up larger than the original producing some unattractive results. You may still customize an images size through the post editor, but there is a better way to maintain small image integrity with less effort. Consider this alternative style.

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

Approach two only causes images wider than 400px to down size automatically allowing simple application of small images without introducing additional steps or image degradation. However, bear in mind the max-width style is not supported in some older browsers. To address this shortcoming we can add  _width: 400px; within the last style to scale all post body images to 400px wide on old IE versions. This hybrid is a good compromise of function and one I use myself for another site.

What about Image Height?
Similar styles are available for automatic height resizing as well, use max-height instead. You may even use min-width and min-height to keep images a minimum size. These styles allow you many design options to improve blog appearance consistency with minimal efforts. Exact specifics will vary depending on your needs and desires. Play with the settings to find exactly what best fits you blog.

Conclusion
Applying a blanket style to all post images saves time and can greatly improve the visual consistency and flow of your blog. This does not lock you in and at any time you may customize an image within each post. It's a fairly simple tweak that can greatly improve the blogging experience of authors and readers alike. Give it a try.

Support JSBlogStop:

Donate with Dwolla