Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



Auto-Sizing Photos to Fit Post Area in Blogger

One question I am asked often is from Blogger users wondering how to make their photos fit the width of their post area.

If you’ve been using Blogger for a little while, you are no stranger to the image size options once you upload your photos. They currently offer Small, Medium, Large, Extra Large and Original. Whichever option you choose determines how your photo will be displayed. If you are not yet familiar with these options, try adding an image to your post and then click on that photo in the editor. You will then see the image size options below the photo.

Depending on the width of your content area, the Extra Large size tends to work well, but what if you want it just a bit larger, or just a bit smaller? The standard Extra Large photo size is 640px wide. You can adjust this easily with a little CSS magic.

Auto-Sizing Blogger Photos to Fill Your Post Area!

First, stop choosing image sizes and stick with the Original photo size. The Original size does not compress or resize your images, so I wouldn’t recommend uploading HUGE photos straight from your digital camera without resizing them manually first. Otherwise you’re going to be uploading rather large file sizes which drastically slows down your blog’s loading time. (Photos from a DSLR are usually about 1-4MB in size… each!)

Generally I resize all of my photos to 700px wide during my editing sessions. 700px is a nice size because you can shrink it a little bit in Blogger without losing quality, and the file size is not too large. If your post area is larger than 700px, resize your photos accordingly.Β  However, think about the future of your blog. What if one day you might want even larger photos shown at about 800px wide?Β  Resizing your photos larger than your post area can prove to make life easier down the line. You can’t upscale your photos later without sacrificing quality, but you can always shrink them.

You can use any photo editing program to scale and compress your photos. I strongly recommend getting your hands on Photoshop because it will definitely prove its value throughout your blogging career. If you aren’t into editing your photos on your computer, try setting your camera settings to the “small” image size when snapping your pictures. I would only suggest this as a last resort though.

Once you’ve got your photos resized, add them to your post. Choose the Original size option. Now, obviously if your photos are larger than your post area, they are going to poke out of bounds, so let’s fix that and make them fit exactly.

In Blogger, go to Template > Customize. In the Template Editor choose Advanced and then CSS. Here is where you will add the following CSS code. Remember to change the value with the width of your actual post area. The width should be smaller than your actual photo, not larger.

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

What’s great about doing it this way? Say you want to change your blog design around a little bit in the future and your post area width changes a little. Instead of changing each image on past posts, all you would need to do is update the CSS code with the new image width and everything will fit properly… past posts and new ones.

Let’s add to that a little to get rid of the default border and shadow around your photos:

.post-body img {
 max-width:660px;
 max-height:auto;
 box-shadow:none;
 border:none;
 }

Those two lines get rid of the outlines and give your posts a much cleaner look.

I hope this post helped you! Comments and feedback are always welcome below!


  • Kate

    Thanks so much for this! Super duper helpful!

    • Dana Fox

      Glad you thought so!

  • theveganchickpea

    thank you for this! i tried it, but it only adjusted my horizontal pictures though?

    • Dana Fox

      It will work on both horizontal and vertical photos, unless your vertical photos have a width that is already smaller than the max-width you set. Then it will not do anything. You could remove the “max” element from the code (i.e. width: 660px, height:auto) but that would stretch any photos that have a smaller width than what you specify and it might make your pics look funny.

      • theveganchickpea

        totally figured it out. thanks, lady!

  • Thaaaank you! So helpful. I just got a domain name for my blog and this site has been a lifesaver through the process. You’re the best!

    • Dana Fox

      So glad! You are welcome!

  • Chelsea Dawn

    Super helpful, thanks for sharing Dana! I wish I had known/thought of this much earlier in my blogging days, would have saved a lot of time! Going forward, I will be saving all edited images as a larger size than the current size in my blog posts!!!

    • Dana Fox

      Now you know! This definitely makes things so much easier and quicker.

  • Deanne Dowden

    I am having trouble adding more than one CSS code in the CSS field. How do you add more than one code and how do you separate them?

    • Dana Fox

      Hi Deanne,
      check out my new post here to learn about CSS: http://icanbuildablog.com/2013/11/introduction-to-css-for-beginners/
      I haven’t really jumped into CSS tutorials yet but that should give you a starting point. You separate each action with a semi colon and each individual CSS code with the curly brackets.

      To answer your other question, 1160 minus 320 is 840px. Try 840px for your post area and if it’s a bit too large still due to padding just try decreasing it until it fits. you can see it change size in real time in the template editor.

  • emily

    lovely! Thanks!!!

  • Esra

    Super helpful! I hadn’t thought to resize my pictures before!

    However I’m having a bit of trouble with the CSS code. I copy and pasted the CSS code you wrote into the add CSS section under advanced, but it didn’t seem to work. My photos are already smaller than the maximum size because I didn’t want it to take up the entire space, but the border and shadow have not gone away.

    Do you know what it could be? Did I do something wrong?

  • Javed

    Grate Post thanks man…..
    Phone Hard Reset

  • stylecorner

    Thank you so much for this, you saved my life

  • laurabethowens

    Thanks for this, Dana, it worked a treat!

  • Catherine Denton

    I did this a while back and really loved it. But now I’m trying to do some things with smaller pictures grouped together and I’m unable to because they display large. Would you mind sharing how I take this setting off? Thanks!

    • You can add specific styles to each individual image like so:
      or whatever alternate width you like.

      • Catherine Denton

        Sorry to be getting back to you so long after you answered. Thank you for your suggestion, I’ll try that.

  • Shelly Knutson

    Hi!

    So this is super helpful except I have one question!! I have SOOOO much on my CSS page (the edit HTML section for my template right?)…. where exactly do I know where to copy and paste this code?

    thanks!

    • You’d just add it below all of the other CSS codes πŸ˜‰

  • Elizabeth Murdock

    I tried to rescale my photos using Gimp but when i went to put them into the post,it said it wasn’t an image,what else can I do?

    • Make sure you save it as a JPG. Not too familiar with Gimp personally so I’m not sure what settings you had while saving!

  • Rebecca Dicken

    Hello,

    I just wondered do you have to change the 660px to your blog post width or photo size? I’m not sure what I have done, it worked the first time and I resized all my photos to 700px but now it keeps overlapping my side bar, not sure what I have done with the width. Hope this makes sense!

    Thanks x

    • Yes the pixel width should match your content area width. You may need to adjust that (make the max-width smaller) so your photos don’t overlap the sidebar πŸ˜‰

      • Thankyou for getting back to me so quickly, I’ll have to try this and hopefully it will work! πŸ™‚

  • Sarah

    Hi, is there a way to apply the code but allow one blogger page to have images as they would look in the draft (exempt certain pages from taking effect to this code)?

  • Dana, thanks, you gave us an extremely valuable and short code to put into CSS. I have a question about it, comparing to the following code:

    .post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;}

    I found the code somewhere in the internet, have no clue where, as it’s been some time since inserting it into my blog. I figured I’d substitute it for your code (thus getting the bonus of setting a tailored max width for my blog pics AND the shorter code text), but I’d like to check first with you if you think it will do the same things as it does now… I’ll backup my blog template first, off course.

    • If you want to use both codes, just add the one shown here below that code. Pasting it into the CSS area of the Template Editor will show you in realtime what it would look like before you save it.

  • Nina Jordan

    oh god, thanks soooo much for this… This is exactly what I was looking for for at least a month haha

  • Sofia Garrido

    Thank you so much for your tips, so hepful! πŸ™‚

  • Varese Van Baal

    Hi, I have a question. I have used this code on my blog which works perfectly! Thanks! The only thing which I can’t figure out is why my pinterest hover is super BIG now. Does it have something to do with the code? And is there a way to make it small again πŸ™‚

    Varese

    • Hi Varese! im in the middle of redesigning my blog and have experienced this exact problem! I’ve been trying to fix it all day with no joy? Did you find a solution? X

  • gerardo

    thank you so much it’s a great tip

  • Thank you! Struggles solved!

  • So, my template had this added already but i want to remove it. can anyone tell me the code to have the images auto sized that i choose when writing a post? these images are way too big and its making my hover pin it button and signature full size too πŸ™

  • Bekah

    I tried this and can’t seem to make my problem go away. But then again, this may not even be my problem. My photos are large but are overlapping with my texts on the side (about me section etc.). So how to I move my post area more over to the left of the blog?

  • http://www.clippingpathadept.com
    is an online based photo editing organization which offers the maximum quality
    work at lowest price. Clipping path adept is the basic photo editing technique
    which support in clipping path, image masking, resizing, removing background,
    image manipulation, retouching as well as making shadow. Professionals like
    photo editor, website designer, advertisement agency and catalog companies are
    always searching clipping path services to make their image look able and
    optimize with website.

  • chinedu obiano

    Hi Dana, I copied the code and it made my pictures in the draft I wanted to post Large, but I can only preview the post to see the pictures, as everything in all my past and current draft now look encrypted; like codes. I cant even edit the draft anymore, but when I click preview, it comes out clearly with all the photos. please Is there a way to restore the default css settings? I really need to edit my drafts.

  • Sushma Gupta

    Great and a very useful blog for me. I am very much benefited. Thanks a lot for sharing.

  • Cara Hitchener

    Hi there. Thanks for the tip. I used this on my blog but now my pictures on the blog are to the left side and not in the middle.. Anything I can do to change this?

  • Elena

    I recently just purchased a new Nikon DSLR and this is exactly what I needed to reach its full potential on my blog! Thank you!!!

    You can see how the pictures turned out here: http://www.ambinityblog.com/2015/02/inspire-cabo-rojo-beaches-through-nikon.html

  • I love this… but is there a way to disable this on specific pages? I’m trying to create a thumbnail gallery style page but obviously, adding this code to the main CSS is making the thumbnails HUMONGOUS even though I’ve changed the HTML code to resize the images for the specific page.

    • You can’t disable it for a specific page, but if you don’t want it to work on all Pages and just on the posts, you can add this code before the element in your Edit HTML page (instead of adding it to your CSS as mentioned above):


      .post-body img {
      max-width:660px;
      max-height:auto;
      box-shadow:none;
      border:none;
      }

  • IcePick

    This has been my dilemma for quite some time now and you have done it again. Truly a good samaritan. So grateful to you, Dana.

    http://raveandview.blogspot.com/

  • Susan {ofeverymoment}

    Hi Dana. I am delighted that I have found your blog, and this post was really helpful to me. I write a “Saturday Spotlight” series on mine, and today this post was featured and I provided the link. I love to share a good thing with other bloggers when I find it!

  • Illikannu Donald Chukwuma

    good ok

  • Nee

    Hi, I’ve use a new blogger template, and since then my picture had been stretched taller than it supposed to be, so the image became blurred. Even after I set the max width to 640px, the tallness is still there. My originals are usually 518px X 690px.

  • Rhiannon Pelletier

    GREAT post. The CSS worked perfectly

  • Andrea Thompson

    This is fantastic & my photos look so much neater now. As the Pinterest hover icon and a signature are also “photographs” however, they to have gone massive which I obviously don’t want. Is there any workaround to prevent this. Any tutorial or link to an existing tutorial would be massively appreciated xxxx

  • Thank you!! This was super super helpful and now every photo is perfectly sized on my blog! Everything is neater! πŸ™‚

  • Madalena Batista

    I have one question πŸ™‚ I use it with 700px, but now the title and the picture are not anymore center with each other, it is normal?

  • Hey there! Tried this and it worked wonderfully. I wanna try resizing the related posts images on my blog so that the whole image can be seen and not something which is cute. Do you know how I can do it? Will appreciate all the help I can get πŸ™‚
    http://bibliophilicmadness.blogspot.com

  • deshike jayasena

    Thanks this is helpful. But I found an another article which shows a easier way to re-size the images in Blogger. This is it http://j.gs/6tLR

  • Alex Maria Minska

    hello,
    it didnt work πŸ™

Navigate