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.

Method 1 – 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.

Method 2 – 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

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!

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.

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.

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;} 

How do I remove shadows and borders from the images?

Check out this tutorial for Removing Borders and Shadows on Images

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

Check out this tutorial for removing spaces between images.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

60 comments

  1. Stephanie on

    I don’t know why but it’s notworking for me. I have tried the first code, but instead of doing something, it writes the code on my blog, in black. Whats am I doing wrong? Thank you!

    Reply
    • Ellie M on

      Hello Stephanie, if it’s appearing as text at the top of your blog it means the code is in the wrong place. Make sure you’re adding it above </b:skin> and not above <b:skin>.

      Reply
      • Zakkiya Hamza on

        Thanks Ellie. Works like a dream now . I am sorry if I am bothering you with too many questions but I find that my post signature has also resized. I’d like to know what the css code for that is and I’m good to go. Thanks so much again!

        Reply
        • Ellie M on

          Hello! Give your signature a class id such as img src="DIRECT IMAGE SOURCE" alt="DESCRIPTION" class="signature" then using the instructions in the above tutorial just above the heading “image alignment” you can add .signature { width: 100px !important; } to constrain the size of your signature…same applies for pin it buttons or any other image you want to keep at the smaller size.

          Reply
    • Ellie M on

      Hello, looking the same to me although your original images are quite large. You’re halving them in size which may cause some loss of quality on some displays, this may slow down your blog load time too! There’s also an error in your code, right above ]]> </b:skin> you’ll see .post-body img { max-width:650px; max-height:auto; .post-body img { margin-left: -60px;} – you’re missing a closing bracket before the second .post-body img. You can combine these two codes so it looks like .post-body img { max-width:650px; max-height:auto; margin-left: -60px;}. Hope this helps!

      Reply
  2. Mireia on

    Hey I would like to know if as well as the width of the fotos I can put for all the photos like the text.align feature, so all the pictures are in the center or left … Thanks

    Reply
    • Ellie M on

      Hello. It’s not my template, it’s a custom one made by someone else so I don’t know how it’s been coded. Check through the code to see if you can find code similar to above and remove it.

      Reply
  3. Cheresa on

    Hi Ellie,

    I love your blog. I am a new blogger and I am ALWAYS referencing your site when I want to make changes to my blog. I just want to say a million thanks for providing blogging tips!

    Reply
  4. Betsy on

    Thanks so much for this code! Your blog is one of my go-tos for CSS tutorials…
    One question…I hosted a link-up this week using Linky Tools and the actual grid for the thumbnails keeps them as small squares, but the photos within each square is blown up (i’m guessing it’s being controlled by my max-width code). It’s an external html script located within the post html…any way to fix this? it looks just terrible!

    Reply
    • Ellie M on

      Hello, thank you so much! Check under the heading “Stop other images from changing” in the above tutorial, it will give you directions for that issue ๐Ÿ™‚

      Reply
  5. Emily on

    Hello, I’m having trouble making this work in that the code ‘ ]]> )’ doesn’t seem to exist on my blog – I’ve done a search for it but it appears that It’s not there- is this why it’s not working ?

    Reply
    • Ellie M on

      Hi Emily, this post here should help you find it ๐Ÿ™‚ When you do make sure to close the bracket } on the previous code you added for removing borders and shadows from images.

      Reply
  6. sarah on

    Hi! this is fantastic! I’ve been using this tutorial for a while now but I have a question!

    I recently got my blog to full width so now every time I open it on a desk top, lap top tablet, etc.. it becomes full width on the screen but the photos remain the same.. how can I make the photos adjust to the screen at the to the width of the screen too? I hope you understand what I’m trying to ask! ๐Ÿ™‚

    here is my blog link: http://ofstyleandwanderlust.blogspot.com/

    xx
    Sarah

    Reply
    • Elaine M on

      By using media queries to adjust the size depending on the screen size. I’ll have some tutorials coming up soon on repsonsiveness in Blogger which will answer this question for you in details.

      Reply
  7. Shauna on

    Thank you so so so much! I feel like i’m learning so much reading through your tutorials : )

    Is there a similar way to do the same thing with text so that the text doesn’t have to take up the full width of the post body?

    Thank you!

    Reply
  8. Danica on

    Hi thank you for this tutorial!

    I tried method 2. and whenever I resize other pictures to medium and place them on the left so i could write on the right beside it, it won’t work. Is there a solution for that?

    Reply
  9. Amy on

    Hi! I tried method two, and when I first load the page the pictures look great, but then there seems to be an error. The name of the picture and a fail image load, as if the image is there but cannot be shown. Do you know if this is an error I’ve made?

    Thank you!

    Reply
  10. Katie on

    This is so helpful, thank you. I’m very much a novice at blog design, and have used a CSS code to automatically resize all images to a set width for a while now. The problem I’m having is if I want to include a bloghop type link, or a link button to another blog/project, it resizes the image(s) too. Is there a way to override the CSS code in the html of an individual image? Similarly if I want to insert the bloghop code into a post, is there a way to protect the width of the thumbnails? My other option is to change to the max width CSS you have given above, but having just applied that it looks like a lot of my images are smaller and so would I need to go back and manually change them?

    Reply
  11. Laura on

    Hello! Was so happy when I just came across this tutorial but unfortunately absolutely none of the codes worked for me on my new template ๐Ÿ™ Not sure if there’s something coded in it already overriding the new ones I’m putting in! Hopefully will be able to work it out!

    Reply
  12. Andrea on

    Great tutorial, I was especially looking for how to prevent other images (pinterest hover icon and signature) from resizing and it’s such a relief to finally find an answer as to how to do this (I have scoured lots of blog help sites and left questions in forums all to no avail). I do have a question arising from this post though & that’s how do you decide what size to resize your images to prior to uploading them to your post? I’d really appreciate any advice on this as I’m really keen to keep my photos looking just the same in the post as they do originally.
    Thanks
    Andrea

    Reply
    • Elaine M on

      Hey Andrea, thank you so much. The size really depends on personal perference but I’d resize them to be the width of your post so they sit nicely with your design. For you that would be 870px wide, but remember it’s better to downsize an image than make it larger. Making a small image bigger will usually result in a pixelated / blurry photo. There’s a method I mention here than can help with that. Hope this helps!

      Reply
      • AndrEa on

        Elaine, thanks for such a speedy response! I’m still a little confused as I thought the 870px was what we’d be coding for once the image is in the post, but why would we need to if we have already resized to this prior to putting the image in the post? Also on Canva for a custom size you have to add the height as well (rather than it being automatic to fit in with width, so what would I put for the height? Sorry to be a pain & total newbie at this – I’m sure im overlooking something simple:) please help! xxx

        Reply
        • Elaine M on

          When you upload an image and resize it using CSS, the browser first loads the original size and then reads the CSS and resizes the image. It’s better to have the image at the correct sizing to increase the quality and reduce the loading speed of your site. For the height you can have anything you like, whatever suits your image.

          Reply
  13. cquek on

    .post-body img {width:800px!important;height: auto!important; }
    I paste the above code on top of
    But I only want the post-body img appeared only on my post page when I click on it.
    I don’t want it to appear on my Main Page ( home page). Must I add in a code?

    Please help.

    Reply
  14. Zac Ober on

    Hello!

    I inserted the code above /b:skin but it does not appear to have affected my photos at all.

    I’m looking for this to resize the photos on the post previews – if I’m doing the wrong thing, I apologize.

    Many of our post photos will be portrait in dimension – so I was looking for help for them to show correctly. Perhaps I can add code in my template to change the orientation of the post photos from landscape to portrait?

    Thanks!

    Reply
  15. Melissa on

    Hi Elaine,

    I’ve been using :

    .post-body img {
    max-width: 100% !important;

    to resize my images automatically, however it only works on landscape oriented images. Is there something I can do so the Portrait images do the same thing?

    Reply
    • Elaine Malone on

      Hi Melissa ๐Ÿ™‚ hope you’re well. You can add width: 100%; above max-width: 100% !important;, but keep in mind that it will change all images within the post body div to be 100% width of the post area. Usually better to resize before uploading (speeds up loading time too)

      Reply
  16. Joanne on

    Hi Lovely,

    after purchasing an expensive template Ive found myself back her creating my own again – thank god for your site.

    I have used the code; .post-body img { width:1200px; height:auto; } and its worked fine for my images apart from ones which are side by side for example in this post; http://www.petitesideofstyle.com/2017/07/tips-for-dressing-for-races.html

    Is there anything I can do to have them side by side fitting into the 1200px width like I had before.

    Thanks,
    Joanne

    Reply
    • Elaine Malone on

      Hi Joanne. Awh what a shame! You could override with .post-body table { width: 1200px; margin: 0 auto; } .post-body td img { max-width: 100%;} so that all images are 1200px, except for those side by side which are 100% and the table wrapping them are 1200px. You’ll need to set the pin image size too .post-body td img { max-width: 100%; } so it doesn’t get stretched.

      Reply