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 of 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.
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 a few seconds.
Before moving directly to the tutorial let's understand why we need to resize our blog images.
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.
STEP 1. First of all, Go to Blogger Dashboard.
STEP 2. Go to Template > Edit Html.
STEP 3. In the HTML area and press Ctrl+F for quick finding this tag: ]]></b:skin>
STEP 4. Now, paste the below codings just above the ]]></b:skin> tag
Also Check:
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.
Also Check: Top 10 Tips To Optimize Images SEO Friendly
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 a few seconds.
Before moving directly to the tutorial let's understand why we need to resize our blog images.
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 a few major reasons why one wants 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 the 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.STEP 1. First of all, Go to Blogger Dashboard.
STEP 2. Go to Template > Edit Html.
STEP 3. In the HTML area and press Ctrl+F for quick finding this tag: ]]></b:skin>
STEP 4. 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 to 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.
Also Check:
Thanks for your awesome blog post
ReplyDeletegreat blog about image resize in blogger.
ReplyDeleteGood
ReplyDeletePost a Comment