Automatically resize Blogger images to fit blog post area

Very simple but highly requested post from me today about how to automatically resize your post images on Blogger.

This tutorial will show you how to make your post images the same width and make them fit your blog post area perfectly to help improve the look of your blog.

The code below automatically sets the height so that it keeps the original proportions and your images won’t look distorted.

Please read the FAQ at the end of the post if you are having any issues.

Tips for great images

I recommend resizing your images before uploading them to your post. If you upload a huge image and use the code below to automatically resize it smaller, then the browser will first load the larger image before reading the rest of the code in your template. This means your blog will be slower to load.

I also advise choosing original size in the Blogger options as it won’t compress or distort your image quality. There’s further information about this in the FAQ at the end of the post.

Keep the size of your images in mind – if you try make a small image larger then it will look blurry, pixelated and stretched.

Automatically resize Blogger images using CSS

Go to Template > Edit HTML and find ]]> </b:skin>. Above ]]> </b:skin> add one of the following.

A) If you want all images to have a width of 600px then use the following. Note that this may cause your images to appear stretched / pixelated if they are smaller than the size set.

.post-body img { width:600px; height:auto; } 

B) If you want all images to be at least 600px in width then use this code. Note that this may cause your images to appear stretched / pixelated if they are smaller than the size set.

.post-body img { min-width:600px; min-height:auto; }

C) If you want your images to be max 600px wide then use this code. This will resize larger images so they properly fit in the space. I recommend this way!

.post-body img { max-width:600px; max-height:auto; }

Then change the width value shown in pink to a number that suits your blogs post area. If your post width area is set correctly you can also change the value above to 100%.

You can also join A, B and C although this usually isn’t necessary. When uploading images make sure you are choosing Original Size to get the best possible quality.

Automatically resize Blogger images using a script

An alternative way is by using this script by Blogxpertise. This didn’t work too well for me on some blog templates but others it worked fine. Add the following script to Template > Edit HTML > above </head>.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
    // the dimension of your content within the columns
    var areawidth = $('#Blog1').width();
    $('.post-body').find('img').each(function(n, image){
        var image = $(image);
        var height = image.attr('height');
        var width = image.attr('width');
        var newHeight = (height/width * areawidth).toFixed(0);
        image.attr('width',areawidth).attr('height',newHeight);
        var greater = Math.max(areawidth,newHeight);
        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
    });
});
//]]></script>

You may then have to add the following code to Template > Edit HTML > above ]]> </b:skin> and alter the value in pink to move your images back into the post area if they are overflowing the post area.

.post-body img { margin-left: -30px;} 

or to move it right

.post-body img { margin-left: 30px;} 

Frequently Asked Questions

Q. My images are blurry, how do I fix this?

Check out this post on how to fix blurry images on Blogger and make them high quality!

Q. How do I edit my images before uploading?

My latest two posts have been on image editing tools which are alternatives to Photoshop available online and to download for Windows and Mac. You can load the image into the program and simply resize to your ideal width before exporting/saving and uploading to your blog.

Q. How do I stop other images from changing?

If you have a signature in your blog post which has also been made larger, check out these alternative ways of adding a signature to blogger that won’t be affected by the above code or use your div id to resize the image like .signature { width: 120px !important; }. This method can be applied to other images.

If you have other images within your post you may need to add some code to tell Blogger not to change the size, for example for this hover over pin it buttons you can add .pinimg { width: 95px !important; } to your CSS before ]]> </b:skin> to make the pin it button the correct size again.

If using InLinkz you can add ._inlinkzI {width: 100px !important;} before ]]> </b:skin> to make the link up entries the correct size again, or if you have nRelate add .nr_img { min-width: 150px !important; } before ]]> </b:skin> to make the thumbnails revert in size.

Q. How do I fix the alignment of my images?

You may then have to add the following code to Template > Edit HTML > above ]]> </b:skin> and alter the value in pink to move your images left or right into the post area if they are overflowing the post area.

.post-body img { margin-left: -30px;} 

or to move it right

.post-body img { margin-left: 30px;} 

Q. How do I remove shadows and borders from the images?

Check out this tutorial for Removing Borders and Shadows on Images

Q. There’s a gap in between my images, how do I fix this?

Check out this tutorial for removing spaces between images.