Sunday, March 6, 2011

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.
25 Comments
Comments

25 comments :

Nubia said...

Thank you for this post! I was literally going through all my posts to resize images due to my template change....so glad I gave up and searched for an easier option. Worked perfectly!

//Sub/Corpus said...

Brilliant!
Now I can email my pics to blogger and show the images at the same size as all other images on blogposts ...
Thanks!

Winda said...

nice ...post... ilike it..

my blog: http://bb-repair.blogspot.com/

David Bergeron said...

Thanks! Just what I was looking for:) This should be included in blogs automatically.

Example from my blog: http://www.poker006.com/2012/03/three-free-full-length-pokersavvy.html

Charlotte said...

It took me a few attempts, but I finally got this to work! Thank you so much :) xxx

Shirley Tay said...

Hi, your tip is great! I've added .post-body img { max-width: 450px; height: auto; } to my blog @ Shirley's Luxury Haven but it didn't work.

I've changed it to 450px cause I want a bigger pix. My old images are still in small sizes. Kindly advise! Thks!

Karina said...

Thanks! I thought this didn't have a solution :(

Emily said...

Thank you so much, perfect info for the new template designer style- I was going crazy trying to figure it out!

Tabea said...

I added the CSS exactly like explained above but my pictures look terrible now. How can I change it back???

Hege Sletsjøe Morris said...
This comment has been removed by the author.
Kym said...

Thanks so much for this advice. I actually have been implementing the same CSS code .post-body img { width: 400px; height: auto;} for a while now, but am never able to change the size of each individual photo.
However, you wrote "This does not lock you in and at any time you may customize an image within each post." Could you please explain to me how I can customize an individual image? I have some on my blog that just shouldn't be so large, but have been unable to figure out how to change just those couple photos without deleting the CSS code to do so.
Your advice would be very much appreciated.
Thank you for sharing your wisdom! ;)

~Kym
bitty.and.bunny

Goddesslily Seymour said...

Your code didn't work!

Daniel Eluzai said...

Thank you for this post! it's really helpful

Mᴇʟɪssᴀ ♡ said...

I've been looking for a code that would work for about a good week now. Thank you so much! It worked for me, except I didn't have a in my codes, so I posted it right above my #comments .comment-author { area. :)

Melissa Nicole said...

Thank you!! Exactly what I was looking for.

Hazel said...

such a small line of code, that took me ages to find but solved my problem... thank you, thank you, thank you....

echo said...

thanks bro...
my problem is solved ;)

Lindsay Gasik said...

Works great for most pictures, but there are a few images I need to keep smaller size. How do I manually change the size for these images? On my blogger html it shows the size of the pictures as being the original 400 pix instead of how it shows up, which is 600 pix.

My site is www.yearofthedurian.com.

Amy @ the happy tulip said...

I recently changed my template and needed to also resize a ton of images. All I can say is "thank you"!!!

Admin said...
This comment has been removed by the author.
Sasha Khan said...

Nice information, I mean TWEAK, I apply it to my site http://mobilepricess.com It looks pretty and my tension is GONE about same size images, Thanx Brother...

Saboor Qurishe said...

Thanks I really Want This One

Mohd Shubhi said...

Thank you very much..it really help me

Kayte said...

What if I dont have the style tag in my html code? the CSS didnt work :(

Miss Hot Couture said...

Thank you so much!!!

Post a Comment