Sizing Images Uniformly for a Clean Look – Blog Better

March 5, 2014 separator Blogging

Uniform Blog Image Sizing

Click for more tips, tricks, and tutorials for building a better blog!

 

There are certain things that instantly make people want to stick around a blog just a little bit longer – great design, for one, except that most of us don’t have the cash to shell out for a top-quality blog designer. But there are so many little changes you can make immediately to make your blog look more put-together and professional.

This is the first in a One-Minute Blog Makeover series. I’ll be sharing all the small things you can do without spending money or much time to make a big, noticeable impact. So let’s get started, shall we?

Read on for before and after examples to really get an idea of the impact I’m talking about and to find out how to make your pictures full-size in Blogger and WordPress. Plus, at the end of the post, find my challenge for you guys, and then come back to share your results if you participate!

Why Uniform Blog Image Sizing is Key

Tell me: of the two screenshots below, which is more pleasing to look at? Why?

I don’t know about you, but I’m definitely going for the number two. It flows smoothly and looks so much more thought-out and deliberate. It’s what you’ll see on pretty much all professional blogs – and for good reason.

Which brings me to today’s blogging tip: Size all images on your blog to the same width.

How to Size Your Images Before Uploading to Your Blog

Once you have all the images rounded up for your next blog post, open up Photoshop, Pixlr, or Photoscape (my favorite free editing program) and set the width of each image to the same number of pixels. This means that some of your photos will be taller than others, which is fine. The important part is that they line up down both sides. It’s much easier to size the pictures themselves, rather than trying to adjust their sizing in your blog dashboard or the HTML code, and it only takes an extra minute.

P.S. Here’s the post that’s featured in these screenshots if you’re interested.


How to Control Image Sizing on Blogger and WordPress

  • Blogger:After you insert your images into the post, click them, and then click ‘original size.’
  • WordPress: If you use WordPress, when you upload photos, just click “Full Size” and as long as your original file is at least as wide as your content bar, all of your photos will be the same, no resizing necessary!

One-Minute Blog Makeover Challenge

For your next blog post, either today, tomorrow, or even later this week or month, size all your pictures to the same width. Then, leave a comment on this post with a link to that post and a link to the post before it so that we can all see the difference between your blog posts before and after your ‘mini makeover.’

48 comments

  3. Pingback: ▷ 20 „legalnych” sposobów zarabiania pieniędzy na blogowaniu: udane przykłady stylizacji postów na blogu

  4. Choosing the right visual style is crucial when it comes to making a lasting impression. Whether it’s for your website, marketing materials, or packaging, the right style can elevate your brand identity. And when it comes to logos, nothing captures attention like a well-designed toucan logo With its vibrant colors and distinctive features, a toucan logo adds a touch of uniqueness and charm to your brand. It becomes a symbol that resonates with your audience and sets you apart from the competition.

  7. How do I find a way to describe my blog when I’m expanding my business every chance I get. Learning new items and adding them so they follow what my blog is. Also I want to use it for my business too.
    Thanks Michelle

  9. I love this tip. 🙂 There’s a cheat way of doing this on blogger! You can add code into the HTML to automatically make pictures load to the width size of your blog’s content!

    http://www.itrydiy.me

    1. That’s a great point, Mikko. Here’s a post with a tutorial to code that: http://fayekent.co.uk/how-to-make-all-images-the-same-size-automatically-on-blogger/

      I’ll note that the reason I don’t use this method is because some of my images are meant to be very small, like download buttons, for example. This code would force a 125px image to be as large as my actual photos. For anyone who doesn’t have smaller items, this is a great, easy way to go!

    1. Hi Hayley! I know that you can specify the dimensions of a video you’re embedding from YouTube, and that’s the only way I’ve ever done it. Just go to share: embed: size dropdown: custom size.

  11. Great tip! Really does make all the difference. I am looking forward to the rest of the series!

    1. Good call, Joe. I’ve never tried Paint.net, but I do like Gimp. I haven’t heard of resizr, so I’l have to check it out. Thanks!!

  13. Awesome advice. I just started blogging and I think I am not liking the direction and look of my blog and will probably do a huge makeover so any tips like this I can find is great.

  15. thanks for sharing the tip about Photoscape. I can’t wait to try this. I will report back once I try this trick.

  16. Good tip! I haven’t been active on my blog / a lot lately due to pregnancy, but now that the baby is born I’m getting inspired again to craft and blog.
    Let me dig in my memory how I used to do it…
    Sometimes I do use thumbnails (a gallery, if it’s a lot of pictures like from my holiday), or a size smaller if it’s not important to see the detail. That is mostly in personal posts though.
    The pictures in the posts about my crafts are generally the same size.
    I do resize them all to the same size, but for the smaller sizes I use wordpress to make them “medium”. (Ofcourse the gallery is something different entirely).

    To batch resize (and rename) images, I use irfanview. It’s a free program, and you can add text to images, set one or both sides to a certain size (pixels, cm or inches), resize in percentage, and lots of other options. Just read through the options once, save your setting, and it’s super easy to use, especially because you can convert batches of pictures easily that way.

    Another note about making them the size of your post column: Take into account that not everyone has the same screenresolution/ size monitor, so if you have a widescreen monitor and a wide post column, there might appear a horizontal scroll bar for most of your readers. (Horizontal scroll bars are very annoying).

    I found this post via craftgawker – I’ll check out more of your posts after this! Thanks for the tips!

    1. Thanks for sharing your tips, Debbie! I’ve found 640px to be a pretty good, standard width to accommodate most screens.

  17. Funny you mention this – this was one of my aims during the recent design overhaul on my blog.

    Completely looking forward to this series. Your blog and design aesthetic are such an inspiration for me!

    x Elena @ Randomly Happy

  18. ah i wish this was working for me ! unfortunately my “original size” photos are leaking all the way to my right column. heartandthrift.blogspot.com

    1. Sammy, I know exactly how to fix your problem – no worries! You have to resize the pictures in a photo editor like the ones I mentioned in the post before you put them in Blogger. Then, you click ‘original size’ to make them the size you specified in the photo editor. You have to find the maximum size that will fit comfortably into your post column, and don’t size them any larger than that in the photo editor. I hope that helps!

  19. This is a great tip! I try to stay to the same width but I’ll admit, sometimes I stray. This post will make the difference in keeping me on track. Thanks!

  20. You’re right, you’re right… 😉 I’ve heard that before but never known a good free editor to do it in!! I’ll definitely be trying Photoscape. You also can change the widths manually in Blogger in the HTML of your post, but you have to know the height to enter too to keep the photo’s original proportions. I hadn’t thought to actually make them the size you want in Blogger, then use original size! Thanks for sharing!

    I’ll do it on the next post I get a chance to do!

  22. Totally agree. Cant wait for your next blogging tips.
    I changed this on my blog a while ago but am still working backwards to fix the old posts.

    After I fixed the picture sizes:
    http://www.littlechupi.com/

    Before I fixed the picture sizes:
    http://www.littlechupi.com/search?updated-max=2012-08-22T07:30:00-07:00&max-results=5&start=5&by-date=false

    it makes such a difference. I am sure there are many more things I can do to shape up my blog (I am open to tips from anyone) I am quite new at this 🙂

  24. Great tip, and I am very excited for the series – so many people will find it helpful (including myself!)!

  25. I tried resizing all my vertical pictures in Photoshop to have the same width as the wide pictures and it’s not working for me in Blogger. Not sure what I’m doing wrong. 🙁
    Thanks for this great tip though!
    ~Sara

    1. try clicking on “original size” when you click on the photo in the post editer… unless you already did that. Then I can’t help :S 🙂

    2. I did. My picture are HUGE! So I might try cutting down the pizels by half or more and seeing if that works.

  26. If you use WordPress, when you upload photos, just click “Full Size” and as long as your original file is at least as wide as your content bar, all of your photos will be the same, no resizing necessary!

    1. Thanks for the information, Kira. I’ve updated the post to help WordPress users.

  30. I will be giving this a try starting next week. I am too dependent on the easy scaling option wordpress gives.

  31. You’ve nailed one of my biggest turn offs. I hate when photos are all over the map. When I decided to start taking my blog seriously five or six months ago, that was one of the small changes I made. I figured, if I’m going to put my effort into something, then it should look pleasing, and really, it doesn’t take much time at all to make your photos the same size. But the impact that small change has is huge.

    I look forward to the rest of your series!!

    1. My version of Microsoft Paint requires you to shrink by a percentage, which isn’t the most user-friendly, but the latest versions may be better.

      Pixlr.com is a great free alternative to Photoshop, and it’s nice to have an in-browser option instead of having to download something!

      Photoscape.org, the one I mentioned in the post, is my favorite free program for quick photo editing because it doesn’t have the same learning curve of Pixlr or Photoshop-esque programs.

  35. This is a great tip! I used to edit photos in photoshop then upload them onto Picasa web and resize it there (easily upload onto the blog post by choosing that option rather than uploading from your computer files).

    Why didn’t I think just to resize it on photoshop all together??

    1. Sometimes we don’t even realize that we’re adding an extra step, and it’s so nice to be able to cut it out, right?! 😀

Comments are closed.