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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
56 comments
Superb... Very useful
Very nice. I was looking for this. Thanks
Thanks！！this is whati‘m looking for！AWESOME!
Very Nice bro now can easily resize all the images inside blogger posts. Thanks to MBL team.
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
I didn't believe this is possible..I use to have problem with image sizing before, I can take care of it now. thank
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! :)
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.
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.
thanks dear
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!
Thanks for your share, very usefull :)
Good working...........
Every time I try to use a CSS edit in my blog, some of my images become pixelated. How do I fix this??
Can you Please provide a URL of your blog, so we can see what problem is causing this issue. Cheers!
Hey bro, i Can't Still Resize my All images! I even did everthing.
Your Blog URL?
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.
That's because you are using Social icons in your Post Body. Place it after it
Thank you!! That was EXACTLY what I was looking for!
thanks!
i used the code 98% on all my blogspot blogs and it works like a charm !
http://vietnamcoins.blogspot.com/
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/
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!
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.
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
Can you please provide the URL of your site, so I can assist you better.
Cheers!
I thought blogger resizes images automatically. Didn't they?
No, it doesn't resize images automatically. You have to tweak it as we have mentioned above.
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
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>
Amazing - so helpful, thank you!
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
No, it depends on your templates, some templates already includes the re-sizing script.
YOU are the best! Thank you so much!
O my God! This is possible. Thakn You Sooooooooooooooo Muchhhhhhhh :)
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?
Provide your BLOG URL? So we can provide the solution.
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?
Sorry, the blog at eggsfury.blogspot.com has been removed. This address is not available for new blogs.
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.
I suppose, icons looks just fine
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!
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
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
Thanks mohan (y)
Many thanks for this useful tip.
Oh! this is a little but very useful code. :)
Can you please provide me your Blog URL?
Thankyou this helped :)
Will it resize the images in the homepage as well ? gizmobase.com
No, it is just for Posts.
I know this is an old article so there's a good chance nobody will reply, but I automatically resized my blogger images ages ago (and don't even remember how I did it . . . probably just followed a tutorial and added it to the CSS since I'm not very good at any of this). I wanted to add a new page to my blog with thumbnails, but can't as each thumbnail is automatically resized and doesn't look much like a thumbnail anymore. So I guess what I'd really like is for images to be automatically resized in my posts, but not on one particular page I'd like to create. Could anybody help me out? Thank you!
www.kayleecoles.com
Hi,
Thanks for getting in touch,
I can help you out with the problem Kindly email me the Link to the Page at faizan@mybloggerlab.com where all thumbnails are present I will provide you the CSS code to solve the issue
Cheers
Syed
Hey,
the images on my blog are also very blurry but if you click on them they're a lot better. Can I shrink them somehow to make them look sharper?
http://veedeldame.blogspot.de/
Very helpful code.
I used this on my new simple blog.
Thanks.
Richard D.
https://quickpayingads.blogspot.com
Wow it worked like a charm on my blog https://vandeweybalao.blogspot.com. Thank you admin!
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.