Why The Photo Size On Your Blog Matters

how to make all photos the same size on a blog

Image via The Doctor’s Closet

There was a very long list of things wrong with my site when I very first started blogging. Back then (3.5 years ago and yes that was long enough ago) there just weren’t any resources out there. SBS didn’t exist, I had no blogging friends, I only started this whole thing to write and was baffled at how I could make my site prettier.

Fast forward 3.5 years and I’m now very comfortable at simple HTML, Photoshop, editing and so on.  One of the things I tried to figure out quickly once I discovered other blogs even existed was how to get all my photos the same width. My biggest pet peeve is reading a blog with varying sizes of photos. It’s a simple switch and something I highly recommend to EVERY blogger. Here’s how…

Step 1. Figure out the width you want your photos to be. Mine are all 600px wide and I figured this out with a little trial and error.  Figure out what works for your site and what look you’re going for.

Step 2. Upload your photos from your camera – or download photos from the web. If downloading photos from the web, you’ll want to find photos that are hi-res, or the largest possible so you can edit without any distortion.

Step 3. Load your photos into a photo editing program. I use any of the following depending on what I’m doing: Photoshop, iPhoto or Pixlr

Step 4. Select resize – this is available on all of the above mentioned programs. *If you’re using iPhoto you’ll hit export in the toolbar and resize it there. I select custom, then adjust by width.

Step 5. Set your photo to your desired width and have it automatically keep proportions.  Note that you should be going from a LARGER image to a smaller one. Vice versa will distort your photos; I’ve noticed I can get away with increasing up to 100px without it getting too badly distorted and this is solely for photos that are not mine. 

Step 6. Load your photos to Blogger or WordPress. Select original size so that it reads your photos as you’ve sized and loaded them. 

That’s all it takes to have all your photos the same width on your blog for a more aesthetically pleasing blog layout.

Have any other Blogger Q&As? Let me know in the comments below or shoot me an email so I can get it answered in the next volume!

Leave a Comment


  1. Aimee wrote:

    As someone who loves graphics and the visual layout of sites I find this to be important as well. I like how you’ve cut down to the important information and easily laid out how to fix this problem. My site has on average about 4 to 6 different sites, but I always try to make them compliment each other. Thanks for your insight!

    Posted 8.19.14 Reply
  2. The only thing I hate more than when a blogs name and URL don’t match HAS TO BE when their photos are all small/different sizes. It makes a site look so clean and neat when everything is the same width. Great post!

    Cathy, your Poor Little It Girl

    Posted 8.19.14 Reply
  3. Figuring this out was probably the best day ever for me! It makes a world of difference in the design!

    Posted 8.19.14 Reply
  4. It also helps if you’re using Photoshop to “Save for Web” instead of just “Save As” because then it helps the site load faster without taking up to much bandwith.

    Great post!

    xo Taylor

    Posted 8.19.14 Reply
    • Jessica wrote:

      oooh I have never heard of this!! Thanks for the tip!!

      xo Jessica

      Posted 8.19.14 Reply
  5. Becky wrote:

    I love when you do these posts! Such good info. Now if I could only figure out why my photos are blurry after my photographer resizes them in Photoshop… So weird.

    Great post!

    The Pumpkin Spot

    Posted 8.19.14 Reply
    • Jessica wrote:

      That should not be happening!! If she’s shrinking photos, they should maintain their resolution, it’s when you go from small to big they get blurry. Yikes! #getanewphotog

      Posted 8.19.14 Reply
  6. This is awesome! I’ve been wondering how to do this… thanks so much, Jessica!

    Posted 8.19.14 Reply
  7. Love the tips lady! It’s so important to pick the right dimensions for your personal site!

    x. Sabrina | Simply Sabrina

    Posted 8.19.14 Reply
  8. Gentry wrote:

    Thank you for this advice/tutorial! It is very helpful!

    When I was checking how to do this in iPhoto, I was having trouble finding the “resize” button- do you know where I can find it?

    Thank you again! 🙂

    Posted 9.4.14 Reply
    • Jessica wrote:

      Yes! You’ll want to export the photo and it’ll pull up a prompt where you can resize it, name it etc. I use custom, then do it by width. If you have any issues, email me!

      Posted 9.4.14 Reply
  9. kate // always craving // wrote:

    another trick if you use WordPress — Go to Settings > Media, set the width on your Medium and Large size photos to desired width (I use 600 too for my medium), then set max height to 999.
    That allows WordPress to automatically scale the height to correct proportions for the set width you determine & all of your images (provided they are same as or larger than minimum set width) will be the same as long as you keep Medium selected (which is by default).

    Posted 12.22.14 Reply
    • Jessica wrote:

      You can definitely do this, however, the photos are just being shrunk down to scale. If you’re photos are large, it’ll slow down your site big time. It’s always recommended to load the photos in the size you want the, versus changing them after uploading them.

      Posted 12.27.14 Reply
  10. This was so helpful, but I have just one more question toward getting everything on my blog all lined up. Is there a way to shorten the width of my blog text so that it also lines up with my photos? Currently on blogger each line of text is way longer than the width of my photos. I’d like to shrink down the text width to match the new photo widths. Any help with this would be greatly appreciated. Thank you!!

    Posted 12.31.14 Reply