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.

Post last updated:

65 responses to “Automatically resize Blogger images to fit blog post area”

  1. Thanks for this! Soooo helpful! x

  2. 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!

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

  3. Where have you been all my (blog) life?? Thank you! I’m definitely trying this!

  4. Great tip- thank you. Will try it out on my next post.

  5. Hi Ellie. I used the first method and it worked out great but then the pin it button on my image automatically resized as well. Where am I going wrong?

    1. Hello, you can add .pinimg { width: 95px !important; } to your CSS before ]]> </b:skin> to make the pin it button the correct size again.

      1. 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!

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

          1. Thanks for the awesome tutorial. I’m having the same issue though! I’ve automatically resized my pictures, which is causing my pin it button to also resize, but the code doesn’t seem to be working. Any tips?

            This is what I added in:
            .pinimg { width:100px !important; }

          2. Hello, remove !important from the width value on .post-body img. It’s overriding the CSS for the Pin It button.

          3. Thank you for your reply! When I remove that, then the photos are no longer resized – is it not possible to have both at the same time?

          4. Yes it is possible, but there’s something overridding or blocking the CSS for the Pin It button. Keeping width: 700px;/code> but removing the !important part should solve that.

          5. Thanks so much. Your site is the best 🙂

  6. This post was so helpful for me! I love your tutorials and tips they are supep easy to follow. Amazing job lovely x

  7. Hi,

    Not sure if it’s just me, but my image quality doesn’t seem to be as good when I resize – the colours look different. Is that normal?

    Thanks,

    Francesca

    1. 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!

      1. Thanks Ellie. I’m so sorry for such late reply. This worked just fine. You bring such wonderful tutorials 🙂

  8. 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

    1. Yes you can! 🙂

  9. Once again, Ellie you helped me a lot! 😀 Thank you for your wonderful tutorials!

    1. Thank you for the lovely comment Colette, very happy to help. Hope you had a fabulous weekend!

  10. Hi, thanks for the tips. Is there a way to stop the rumraisin layout we use automatically resizing our images??

    Thanks, Floss

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

  11. 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!

    1. Hello Cheresa, thank you very much! You’re so sweet 🙂

  12. 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!

    1. 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 🙂

  13. 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 ?

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

  14. 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

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

  15. thank you sooo much.. worked well on my blog.. 🙂

  16. 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!

    1. Hello Shauna, I’m not what you mean? You can use .post-body {text-align: justify; width:600px;} so that the text fits the full width of the post.

  17. Rahul

    GOD Bless
    Done with this .post-body img { width:600px; height:auto; }

  18. How do you automatically resize the images in posts, but not on Blogger pages?

  19. 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?

    1. Hello, because Method 2 is a script you don’t have any control over the resizing on individual posts. It will automatically change every image within your post to be the same width as what is set for the blog post area. That is why I recommend Method 2 Part C, as you still have control over the images 🙂

      1. Danica

        Hi thanks for the reply. Which is Part C of Method 2? Thank you so much Ms. Elaine

        1. Apologies, Method 1 Part C 🙂

          1. Danica

            Thank you!

  20. 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!

  21. 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?

  22. 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!

    1. Hello, your selector is different. Use .post img instead.

  23. cai

    Thank you, You help me again.

  24. 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

    1. 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!

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

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

  25. cquek

    .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.

    1. You can use conditional tags to apply CSS to specific pages.

  26. 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!

    1. Hello Zac. Since you have a custom template it uses different IDs and Classes. You’ll need to customise the selector in my provided code for your specific template.

  27. 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?

    1. 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)

  28. 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

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

  29. April

    Hiya!

    I have added your coding in to make all photos full size. Thanks heaps for that! There are a few pages where I would like images to show up smaller (not the full width of page), but with the coding, it automatically resizes all of them. How do I change just a few images to make them appear small?

    Thanks heaps,
    April

    1. Hi April, you can either set an override in CSS so only some images will appear full size or manipulate the script to make it full resolution without changing image width and height

  30. Hayley

    Okay, so I did something wrong. I tried method 1 and pasted “.post-body img { width:600px; height:auto; }” into my html. But then it appeared at the top of my blog. So, i deleted it and the words went away, but now there is an arrow at the top of it. Do you know how to remove it?

    1. Hi Hayley, make sure you’re pasting it within the CSS section – sounds like you’ve pasted it in the header above the CSS section. There’s a post here that will help you 🙂

  31. My posts and images all moved to the right and it does not look cool. This trick just resolved the image part. Thanks. I wished you could help with a tutorial on how to shift all my blog posts to the left of the screen, especially on mobile devices.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.