How to Resize All Images Automatically in Blogger

Advertisements
From time to time people send us emails asking a very common question, does there is any way to resize all the images of their blogger blog? Sometimes images of large magnitude flow out of the content this not only disappoint your readers, but also affect your online reputations.  Blogger provides basic options for resizing images, but this not a practical approach and does not fit the blogs designs well.  Fortunately, a straightforward CSS tweak makes it possible to automatically modify each and every image on your site. In this article, we will show you How to Resize All Images in Blogger?

Resizing pictures one-by-one manually is acceptable, but what you would do, if your site has thousands of photos and screenshots. Will you still edit them manually? Even if you decided to do so it would take months or even more than that. Therefore, it is essential to resize them manually through a straightforward CSS coding. Through this approach, you can also revert the size of images back to their original size.

The First thing you need to do is to go to Blogger.com >> your site >> Template >> Edit HTML. Now within the new Blogger HTML Editor search for the ]]></b:skin> tag and just above it paste the following CSS coding. (Quick Tip: If you are unable to find the skin tag, then first click anywhere on the HTML Editor and Press CTRL+F to operate the built in search option connected to the HTML Editor). 

.post-body img {
width: 500px!important;
height: auto!important; }

Now change the values of Width and height, according to your needs. You can even add a border to your images through (border: 1px solid #d2d2d2) a modest border CSS command. After customizing, press the “Save Template” button and that’s all. 

We hope this technique would help you in resizing your old images. If we have missed something or you know a much simpler way of tackling this problem then, the below comment section is all yours.  
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

48 comments

April 12, 2013 at 12:45 PM

Superb... Very useful

April 12, 2013 at 3:08 PM

Very nice. I was looking for this. Thanks

April 12, 2013 at 10:21 PM

Thanks!!this is whati‘m looking for!AWESOME!

April 13, 2013 at 1:11 AM

Very Nice bro now can easily resize all the images inside blogger posts. Thanks to MBL team.

April 13, 2013 at 3:05 AM

A css code wouldn't work on IE.There are several jQuery and Java codes that help you to resize images.This makes it multi browser.
Just an advise ! PEACE :)
Regards
Tanmay Kapse
Your Pc Genie

April 13, 2013 at 4:31 AM

I didn't believe this is possible..I use to have problem with image sizing before, I can take care of it now. thank

April 13, 2013 at 6:45 AM

I guess doing this CSS command is better as different sites have different post body widths:

.post-body img {
max-width: 98% !important
}

This will keep it inside post body no matter how wide it is or small it is! :)

Editorial Team MOD
April 13, 2013 at 6:58 AM

Sometimes people want things to be done the way they like so, this CSS provides them enough options to play. They can customize as they like, Some people like Small images so keeping 98% would just provide them one-way.

Editorial Team MOD
April 13, 2013 at 7:05 AM

In most cases, it does works. However, you need to identify which Browser your audience is using and according to it you can customize things.

Nowadays, it is almost impossible to have a Multi-browser site. At least in blogger, we do need some more plugins jQuery files that slows down the site.

April 15, 2013 at 5:46 AM

thanks dear

April 19, 2013 at 10:11 PM

Instead of Resizing all image, its better to set the maximum and minimum height width, specially width for Blog post image, otherwise smaller image will get stretched and get blurred.
for example my blog Intelligent computing has widht of 615px, its better to set attribute to

post-img{
max-width:615px;
min-width:100px;
}
to be in safer side and maintain aspect ratio as well!

June 30, 2013 at 9:55 PM

Thanks for your share, very usefull :)

July 8, 2013 at 12:59 AM

Good working...........

July 17, 2013 at 7:56 AM

Every time I try to use a CSS edit in my blog, some of my images become pixelated. How do I fix this??

Editorial Team MOD
July 17, 2013 at 7:36 PM

Can you Please provide a URL of your blog, so we can see what problem is causing this issue. Cheers!

July 19, 2013 at 12:27 PM

Hey bro, i Can't Still Resize my All images! I even did everthing.

Editorial Team MOD
July 19, 2013 at 2:58 PM

Your Blog URL?

July 21, 2013 at 8:52 AM

Hi this works on the post images, however, it appears that it also applies to my social icon images and they end up blowing up hugely. Kindly let me know how ti can specify this such that only the blog post images will be affected.

thank you.

Editorial Team MOD
July 22, 2013 at 10:53 AM

That's because you are using Social icons in your Post Body. Place it after it

July 23, 2013 at 11:37 PM

Thank you!! That was EXACTLY what I was looking for!

July 28, 2013 at 8:12 AM

thanks!

i used the code 98% on all my blogspot blogs and it works like a charm !

http://vietnamcoins.blogspot.com/

July 29, 2013 at 8:28 AM

Is there any way we can change all the pictures to their original size?
Or maybe to the maximum size admited on blogger (photographs of over 3000px are probably too much) ?

And I already tried to use your method and just adjust the size to a big one, but it doesn't work... Was it maybe because I use the dinamic view?
The site is : http://everydaypicturechallenge.blogspot.ro/

Editorial Team MOD
July 31, 2013 at 4:12 PM

Firstly, dynamic views template is not a great choice. It is inflexible and has fair enough problems.

You can use width:inherit; CSS to just get it to its real size. However, there aren't any css trick that may fulfill your need!

Cheers!

August 1, 2013 at 4:31 AM

I noticed that it has a lot of problems, but at least for now I'm gonna stick with it.

Thank you very much for the answer, I'm gonna give that css a try.

Hugs.

August 12, 2013 at 12:33 PM

Hey,

Thanks for the idea, it works perfectly. But unfortunately it doesn't change the text's wide. Can you please help me how to resize the text in the post section of my blog too?
Thanks a lot,

Emese

Editorial Team MOD
August 12, 2013 at 11:11 PM

Can you please provide the URL of your site, so I can assist you better.

Cheers!

August 19, 2013 at 5:06 PM

I thought blogger resizes images automatically. Didn't they?

Editorial Team MOD
August 20, 2013 at 5:43 AM

No, it doesn't resize images automatically. You have to tweak it as we have mentioned above.

August 28, 2013 at 10:06 PM

Is there a way to only resize the images in the post pages that wouldn't effect the static pages?

I tried it and I have a couple of gallery static pages that I created and it blew out the proportions of each thumbnail.

Thanks!

http://www.thehappytulip.com

Editorial Team MOD
August 29, 2013 at 4:54 PM

Add this Code just above the </head> Tag and it would only resize images of your Posts pages

<b:if cond='data:blog.pageType == "item"'>
.post-body img {
width: 500px!important;
height: auto!important; }
</b:if>

August 30, 2013 at 9:49 PM

Amazing - so helpful, thank you!

October 20, 2013 at 3:30 AM

Hello MBL,

I have a tech blog called www.badritek.com, and since the start i have been using a thumbnail+snippet script (auto read more one). The issue i am facing right now is that i can manually change the height and width of the thumbnail image but i rather want them to resize automatically.

For example if i add a wide image or a tall image, i want them to have the same WIDTH irrespective of the height. Is that possible?

Thanks in advance

November 20, 2013 at 5:15 AM

No, it depends on your templates, some templates already includes the re-sizing script.

December 3, 2013 at 7:45 PM

YOU are the best! Thank you so much!

December 9, 2013 at 3:48 AM

O my God! This is possible. Thakn You Sooooooooooooooo Muchhhhhhhh :)

December 9, 2013 at 2:09 PM

Hi, thanks for writing this it ha been most helpful. What I would like to know is if there is any way to keep a few individual photos their original (or smaller) size despite having this code? I am a beautyblogger and a few months a got I posted some swatches of a lip stick but instead of both at the same time Iposted a few separate images all aligned and they look much better like that. Now I have applied the CCS code it has blown up those images, wihch has ruined the post :( please let me know if there's any way of ignoring the CSS code for those photos?

Editorial Team MOD
December 10, 2013 at 9:28 PM

Provide your BLOG URL? So we can provide the solution.

January 20, 2014 at 12:49 AM

Hi there! I did this and it worked... however...all the images are now kind of grainy... even though i know they have a higher quality image uploaded there. For instance this is one of my posts in which the image sizes have been altered using your change:

http://eggsfury.blogspot.com/2014/01/amazing-new-orleans-wedding.html

All the images look crappy and pixelly, however, when i click on them, the better-looking version shows up... is there a way for me to resize the pics while maintaining the image quality?

Editorial Team MOD
January 27, 2014 at 2:35 PM

Sorry, the blog at eggsfury.blogspot.com has been removed. This address is not available for new blogs.

February 5, 2014 at 8:06 AM

thank you

February 13, 2014 at 11:23 AM

hi there! can you further explain how to do this? for example: http://www.smallorchard.com/p/about.html#.Uv0aKXnVF94
the photos look great - i just don't want the social media buttons resized.

Editorial Team MOD
February 14, 2014 at 11:00 PM

I suppose, icons looks just fine

February 19, 2014 at 1:38 PM

Hi!

My post preview images are all blurred and stretched (the ones below the home page images). I cannot find a way to avoid this. My blog is: http://vivereaglasgow.blogspot.co.uk/

Your help would be very appreciated. Thanks in advance!

March 19, 2014 at 7:48 AM

Dear,
i puted this code in my blogger and im facing a problem , i want to resize images size in blogger posts, i do not want to resize the images size of blogger home page or you may say thumbnails. kindly help me out please

Editorial Team MOD
March 20, 2014 at 9:14 AM

You need to use a B:if code to show it only on posts. Here a way how:
http://www.mybloggerlab.com/2012/12/how-to-show-or-hide-widgets-on-specific-blogger-pages.html

March 22, 2014 at 9:30 AM

Thanks mohan (y)

May 28, 2014 at 10:13 AM

Many thanks for this useful tip.

August 19, 2014 at 6:00 AM

Oh! this is a little but very useful code. :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.