How to Resize Blogger Photos Automatically

how-to-resize-blog-photos-automatically-FINALToday I want to share with you a fun little trick for automatically resizing your Blogger photos to fill the full width of your post area. Blogger offers several tools for resizing post images easily. I’ll get to my little trick in a second, but first I want to explain how to use the Blogger tools for uploading and resizing your photos for those that don’t already know.

To use the Blogger resizing options, simply create a new post, add a photo, and then click on your uploaded photo to open the sizing and positioning options.

1You can set the photo size to small, medium, large, x-large, or to its original size. You can also set the justification to left, center, or right. I recommend centering your photos and using the x-large setting (if you don’t use the trick below) so your photos can be seen in all their glory. The only draw back to using this option is that the x-large size sizes images to 640px, which means if you have a post area that is wider than 640px, the photo will still look a little small. That is where my fancy little trick comes into play, so let’s get to it!


Step 1: Resize your photo

Resizing your blog photos is an important step regardless of whether or not you plan to use this photo sizing trick. This tutorial will still work on photos uploaded in their original size but because uploading original sized photos slows your site WAY DOWN, it is not recommended. The larger the image size, the slower it will load on your site…so trust me, just don’t do it!

Most blogs have a post area width somewhere between 600px-750px, so sizing your photos to 800px wide should work well on most blogs. You’ll want your image to be sized a little larger than your post width with this tutorial because it’s easier to bring an image down in size than it is to bring a small image up in size. Enlarging a small image will cause it to become pixelated and the quality will be low. So to keep things looking good, I recommend sizing your images to around 800px wide with this tutorial.

I use Photoshop to resize my images, but if you don’t have Photoshop, Pixlr is a free service you can use to do this. Here’s how to easily resize a photo using Pixlr:

1) Hop over to Pixlr, scroll down and click “Launch Web App” under the Pixlr Editor option.

2

2) Click “Open Image from Computer” and find the image you want to use from your computer.

3

3) Your image will appear and will be ready to be edited. At the bottom of the image you’ll see the current image size. My sample image is currently 4000px wide, which is WAY too large to be uploaded to a blog. So let’s change it to the recommended 800px wide. In the top navigation bar, click “Image” and then “Image size…”

4

4) Change the image width to 800 pixels. The height of the image will automatically adjust to keep the proper proportions. Click “OK.”

5

5) Now you just need to save the resized image, so go to “File” and then “Save.” Rename the file (if needed) and then click “OK.” Find the folder on your computer where you’d like to save the image and click “Save.” You’re now ready for the next step.

6


Step 2: Add a little CSS

Now that your image is sized correctly you’ll need to add a little coding to achieve the automatic re-sizing. Don’t worry, you don’t need any coding experience for this.

1) First open up your Blogger dashboard and go to “Template” and then “Customize.”

7

2) Click “Advanced” and then scroll down and click on “Add CSS” and copy/paste the following code into the white box:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

It should look like this:

8

Note: the above code will only change the images you have set to “Original Size.” If you want ALL of your images to be sized to the full post width regardless of the Blogger re-sizing options you have them set to, add this CSS instead:

.post-body img {
width:100%;
height:100%;
display: block;
}

Now click “Apply to Blog” to save your changes.


Step 3: Add a Photo to a Post

Now just add a photo to a post like described in the beginning of this tutorial and make sure the photo is set to “Original Size” and your photo will now nicely fill the full width of your post area once you hit “Publish.” This trick will also apply to all previously posted photos as long as the photos are set to “Original Size.” If not, then you’ll want to use the second code option above.

9

Oh so big and pretty!

10
Please leave any questions you may have in the comments and I’ll do my best to answer them. Otherwise, enjoy your lovely automatically resized photos!

 
Premade Blog Themes - Designer Blogs

Posted by: Erin


Comments

  1. Cool trick and you are right its always better to keep the image full size than having it sized small.

  2. Sara says:

    thank you so much for your codes! Works perfectly on my blog <3

  3. Roano Nguyen says:

    We can use a very fast image resize tool at http://imageresizertool.com. It works like a charm.

  4. guest says:

    Hello,

    If I use the first code (“add a little CSS”) when uploading multiple photos, the photos are not aligned on width. And if I use the second code (as now), the pictures are aligned in width, but there is a loss of quality.

    test-my-blog-1.blogspot.com/

    What could be the problem here?

    • This is because the original image size of the vertical photo you are referring to is smaller than the width of the blog, which causes it to become pixelated when you enlarge it. You need to make sure the size of the images uploaded to your blog are sized no smaller than the width of your post area, which for you would be 570px wide. Any photo uploaded that is smaller than 570px wide will have a loss of quality when enlarged to the full width of the post area. Hope this helps!

  5. Jules says:

    My photos look blurry too even though I sized them all larger than the blog post width. It’s frustrating! If anyone knows why this is I’d love to know!

  6. Binh says:

    This helped SOOO much!! Thank you!!!

  7. Dee says:

    Very helpful Thank you so much!!!

  8. Oh my gosh, this worked so well! THANK YOU so much for this! So helpful!

  9. So this is strange, but I don’t want this on my blog and it came automatically. I use a lot of smaller images and would prefer them to stay smaller then pixelating out so bad. How would I change the code to make it not automatically resize? Thank you

    • Hi DeAnna,

      Your design is not a design by us, so your coding for this may be different, but to remove this feature, you should be able to go to Template > Edit HTML and click your cursor anywhere inside the coding box and hit Ctrl + F to open up a search box. Then search for the code the tutorial tells you to add to activate this feature: .post-body img {

      Full code would be something similar to this:

      .post-body img {
      max-width: 100%;
      max-height: auto;
      display: block;
      margin: auto;
      }

      Then, instead of adding it like the tutorial instructs, just delete that block of code and it should revert your settings back to the default photo settings.

      Hope this helps!

  10. I would like to make my photos bigger but my problem is if I go to the X large format they run over the allotted text area for the post. Did I miss something?

  11. Jordan says:

    Hey! I’m new to blogging, so getting the quality and everything right on my blog is rather frustrating. I used the code and it prevented my photos from being cut off when viewing them on my phone, which is great. However, now some of my photos appear smushed in, when viewing them in the web version on my phone, in order to fit on my blog, which looks weird. Also when I view the mobile version on my phone, the pictures are blurry in comparison to my computer and viewing them in the web version. I use lightroom to edit and export my images. I do have photoshop but I prefer to use lightroom. I tried exporting with the width 800 and height 569. Lightroom doesn’t seem to automatically adjust the height for me. This is my blog: http://swayedbythedecade.blogspot.ca/

    • I recommend using a photo editor that will automatically adjust the height based on what you size the width to, to avoid these issues.

  12. Hello, thank you for saving me

    it’s hard uploading 736x3000px on blogspot and then they resized it, when I used photobucked, they resized it too. So when I used your code:

    .post-body img {
    max-width: 100%;
    max-height: auto;
    display: block;
    margin: auto;
    }

    the photobucket worked. (image source file – full sized)

  13. Great tip, thanks! Valerie

  14. Alice says:

    Thank you sooooooo much for this can’t tell you how helpful it was for me getting started on my blog.

    Thanks, Alice x

    http://www.aliceadventures.co.uk

  15. Hi

    I have tried both of your codes but only the first photo in my latest blog entry has changed size, is there a way to change all the existing blog photos to extra large instead of the current size medium.

    http://jeg569.blogspot.co.uk/

    • I took a look at your site and it looks like you’ve gotten it figured out. If not, let me know and we’ll see what we can do to help.

  16. Denise says:

    Thank you for this helpful tip! I love it except for when it is used on vertical images because I feel like they take up my entire post! Is there any way to change it just for vertical images?

  17. Is it possible to disable the automatic resizing for one specific photo within a blog post? I can’t find the answer to this anywhere, would love your advice! Thank you!!

  18. Great information on sizing of images with a step by step procedure that leave no doubt about choosing a particular size of image for one’s respective blog-post area. I have recently started blogging and was in trouble with choosing the proper image size. Thank you..

  19. This worked perfect for my blog, thank you so much!!

Speak Your Mind

*