How to Resize All Posts Images Automatically in Blogger?

Images optimization is very essential for a blog to stand out from others as images play a vital role in attracting readers to our blog and also let them understand our contents easily through visual images. Resizing images accordingly as per our blog layout so that they won't disrupt the post area on our blogs. This resizing task becomes very difficult when we have already published hundreds or thousands of posts and we want to change all posts images dimensions.  Blogger provides default basic settings to resize images in our blog posts but up to a limited extent i.e., we can only resize images within four options: small, medium, large and X-large. 31+ Movie Streaming Sites To Watch Movies Without Downloading [December Updated] What if we want to resize all our posts images automatically at once and also to the desired pixels we desired for. Yes, it can be done with a small CSS coding, you just need to follow the below steps to get this huge time taking task easily done within few seconds.  Before moving directly to the tutorial let's understand why we need to resize our blog images. Check this: Optimize Blog Images By Adding Alt and Title Tags Automatically What is the need to Resize Images in Blogger? There could be any specific reason why you want to resize images on your blog. I have listed few major reasons why one want to do so. When we start blogging as a newbie, we don't take images dimensions as a major thing but we understand its importance in future so we need to do image resizing for our published posts. Images disturbing your blog's layout by overflowing the post content area. We want to reduce our blog loading time and small resized images can make our blog load fast. Now after knowing the benefits, let's start rolling our fingers on how to apply this method to resize all our blog posts images at once automatically. How To Resize All Posts Images Automatically In Blogger? Just follow the below small steps to add this CSS tweak in your Blogspot blog. First of all, Go to Blogger Dashboard. Go to Template > Edit Html. In the HTML area and press Ctrl+F for quick finding this tag:  ]]></b:skin>  Now, paste the below codings just above the ]]></b:skin> tag .post-body img { width: 500px!important; height: auto!important; } Customizations: To decrease or increase the width of images then change the value of width: 500px: The above coding will not resize the height of your post's images and will resize width only but if you want to increase or decrease the height of image too then change height: 500:px or according your blog width: If you wish to add a border to the image then simply use the below coding instead of above codings: .post-body img { width: 500px!important; height: auto!important; border: 1px solid #d2d2d2} You can also customize, border size by change pixels value from border: 1px and to change the border color, just change this color code #d2d2d2 as per your needs. Save your template >> You're all done. I hope you successfully used this tweak and saved your precious time you're going to waste by resizing images manually. Let me know your views about this great post and if you have any query do comment below, I will surely try to help you in best possible way.

Tweet

2

Images optimization is very essential for a blog to stand out from others as images play a vital role in attracting readers to our blog and also let them understand our contents easily through visual images. Resizing images accordingly as per our blog layout so that they won't disrupt the post area on our blogs. This resizing task becomes very difficult when we have already published hundreds or thousands of posts and we want to change all posts images dimensions. 

Blogger provides default basic settings to resize images in our blog posts but up to a limited extent i.e., we can only resize images within four options: small, medium, large and X-large.

• 31+ Movie Streaming Sites To Watch Movies Without Downloading [December Updated]

What if we want to resize all our posts images automatically at once and also to the desired pixels we desired for. Yes, it can be done with a small CSS coding, you just need to follow the below steps to get this huge time taking task easily done within few seconds. 

Before moving directly to the tutorial let's understand why we need to resize our blog images.

• Check this: Optimize Blog Images By Adding Alt and Title Tags Automatically

What is the need to Resize Images in Blogger?

There could be any specific reason why you want to resize images on your blog. I have listed few major reasons why one want to do so.

• When we start blogging as a newbie, we don't take images dimensions as a major thing but we understand its importance in future so we need to do image resizing for our published posts.
• Images disturbing your blog's layout by overflowing the post content area.
• We want to reduce our blog loading time and small resized images can make our blog load fast.

Now after knowing the benefits, let's start rolling our fingers on how to apply this method to resize all our blog posts images at once automatically.

How To Resize All Posts Images Automatically In Blogger?

Just follow the below small steps to add this CSS tweak in your Blogspot blog.

• First of all, Go to Blogger Dashboard.
• Go to Template > Edit Html.
• In the HTML area and press Ctrl+F for quick finding this tag:  ]]></b:skin> 
• Now, paste the below codings just above the ]]></b:skin> tag

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

Customizations:

• To decrease or increase the width of images then change the value of width: 500px:
• The above coding will not resize the height of your post's images and will resize width only but if you want to increase or decrease the height of image too then change height: 500:px or according your blog width:
• If you wish to add a border to the image then simply use the below coding instead of above codings:

.post-body img {
width: 500px!important;
height: auto!important;
border: 1px solid #d2d2d2}

• You can also customize, border size by change pixels value from border: 1px and to change the border color, just change this color code #d2d2d2 as per your needs.
• Save your template >> You're all done.

I hope you successfully used this tweak and saved your precious time you're going to waste by resizing images manually. Let me know your views about this great post and if you have any query do comment below, I will surely try to help you in best possible way.