How to Find the Optimal Image Size for Your Blog Photos

how to find the optimal size for your blog images

When I was designing, the number one question I’d get from bloggers after I’d installed their new design was, “how do I know what size my images should be for my design?”. It’s a great question and thankfully, there’s an easy way to find yours too, no designer needed.

Click here to subscribe

Why It Matters

I’ve said it before, but I’ll say it again. The internet is a visual place! High-quality imagery is one of the best ways to make your blog stand out against the rest. If you’re still working on your photography, I recommend reading this tip on how to get that blurry background in your photos. Knowing what size your images should be will ensure that they appear crisp on your site. Having all of your images span the width of your post column will make your design look cleaner than just having images of all different sizes within your post.

You also want to make sure you’re not uploading images that are too large. Why? It’ll slow down your load time and if the images take too long to load, sometimes browsers or mobile devices won’t load them at all. Yikes! We don’t want that to happen.

How to Find It

The easiest way to find your blog’s optimal image size is by figuring out the post column width and doubling it. Retina screens have much higher resolution than average screens and doubling your post column width for your image size will ensure those images look sharp for anyone using a retina screen.

how to use chrome developer tools

So, how do you figure out what your post column width is? If you had someone design your site or bought a template, there might be some documentation about the column width in there, but if not, it’s easy to find. First, you’ll need to open Chrome. If you don’t have the Chrome browser, I highly recommend it because of it’s Developer Tools function. Open Chrome, click on the 3 dots in the top right hand corner and scroll down to More Tools > then click on Developer Tools. The tools will open at the bottom.

how to find your blog column width

Once the Developer Tools are open, click on the top left hand corner of that panel (circled in the screenshot below). Once the Inspector Tool has been selected, hover over an element of your page. I hovered over the post title here and you can see a little dark grey box appears over it. In that box you’ll see the name of the element you selected and next to that, the dimensions! The first number is the width and mine says 750px. You can hover over other elements like the paragraphs to see the width too. Write that number down and multiply it by two.

With that in mind, my optimal image width should be 1500px wide. Whether they’re vertical or horizontal, I always make sure that all of my images are 1500px wide. The height will change depending on how the image is oriented, but width should be the same!

Resize Images, Select Image Quality and Resolution

When resizing images, you should ALWAYS resize BEFORE uploading! You have the option to resize images once they’re uploaded to the backend up WordPress, but that function does not actually change the size of the image or the file, just the output of that file.

I find that the easiest way to resize all my images is to change the size on Export in Lightroom so they’re all exported at the same width. Here’s how I resize my images in Lightroom. After I’ve made edits (define your image style with this tutorial), I go back to the Library panel, and select the images I want to export, and hit the Export button.

optimal export settings for blog photos in Lightroom

You can rename images here, but what I really want you to pay attention to is the settings here for image quality and size. You can see that I set the Quality: 80 and Resolution: 72ppi (pixels per inch). The image resolution doesn’t matter much for the web, just with printing, as you won’t be able to see the difference on screen. The real reason I don’t choose Quality: 100 and 300ppi is because it creates a much larger file as you can see below.

image file sizes

Quality:80 and 72ppi image is on the left & the Quality:100 and 300ppi image is on the right

The image dimensions are exactly the same, but the file size of the 300ppi image is a little over 3x as large! That means it will take much longer to load than the 72ppi image. This is especially problematic when you have lots of images in your posts or a really long scroll on your homepage.

[one-half-first]image at 72ppi

Quality:80 | Resolution: 72ppi

[/one-half-first]

[one-half]image at 300ppi

Quality:100 | Resolution: 300ppi

[/one-half]

Here are those two images’ final output at different resolutions—can you see a difference? I can’t!

What About Old Images?

Another good question! Unless you still have the original files and want to spend the time updating all your old posts, I wouldn’t worry about it. Just move forward resizing and exporting your photos at the correct size and quality! If you have a few older posts that still get a ton of traffic, it might be worth it to make changes on those posts, but it’s definitely not necessary!

Do you have any other questions about resizing your images? Leave them below!

Click here to subscribe

Most Popular

I'm Blair Staky—I help women turn their blogs into thriving businesses by sharing my secrets to growing a 6-figure blog. I'm so glad you're here!

Leave a Comment

  1. 12.8.16
    Hilary Hamilton said:

    Wow I needed this! I was not sure how to figure out the ideal image size for my blog. Thank for you doing this post.

  2. 12.8.16

    Awesome tips!! For your old posts, you can actually pay someone overseas to do it for relatively cheap. I use Fiverr and my site got SO much faster once they worked their magic! I highly recommend it 🙂

    • 6.19.17
      Brandi said:

      Can you share who you’ve used with Fiverr? I’ve had such bad experience recently that I almost want to completely cut off that idea, but I have no other resources really. Thanks!

  3. 12.8.16

    Great tips! I totally need to stop uploading such laurge files!

  4. 5.6.17
    Nicole Tow said:

    Thank you SO much for this information. I’ve been struggling with this ever since I upgraded my iMac and realized the retina displays made what I had been doing look blurry.

  5. 6.19.17
    Brandi said:

    This is super helpful info., as I’ve just started my fashion blog, and know NOTHING about any of it, haha. It’s all a learning process for me, and I’m going to apply these tips asap. Can you also share a good way to take a picture on my camera, keeping in mind I may want to upload to Instagram as well as my blog? Is there anything I need to do as early in the process of taking the pic, cropping if need be, and changing the size, etc. in Lightroom, before saving and uploading it? Thanks!

  6. 8.18.17
    Erik Alm said:

    I’d recommend first verifying that your blogging platform doesn’t resize the images for you. (WordPress does, both on WordPress.com and self hosted, you probably need jetpack photon though… — https://jetpack.com/support/photon/ )

    If your platform do resize images you should upload LARGER images to make it possible to switch to a wider design in the future (or perhaps for when computers don’t do 72 dpi anymore… will it look good on a retina screen?)

  7. 10.5.17

    Thanks for all this great information on blog images and sizing them for optimal results. Going to give it a try!

  8. 11.30.17
    Falasha said:

    Thanks for sharing, I pinned this because I redid my blog and now it is so slow. I think my image files are too big. I am going to try to resize my first page.
    xoxo Falasha
    Bite My Fashion
    Instagram| Bloglovin’| Facebook

  9. 12.11.17
    Viktor Amruš said:

    DPI or PPI has nothing to do here.
    You just need exact x*y resolution (say, 1920×1080).
    That’s it.

  10. 12.18.17
    A.Rose said:

    So helpful thank you!!

  11. 1.28.18

    So helpful. I’m planning to put up a food blog.

    Thanks for the tip.

  12. 3.24.18
    Kate Gwyn said:

    This is one of the most helpful posts I’ve come across – Thank you!!