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.
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.
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.
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.
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.
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.
Quality:80 | Resolution: 72ppi
Quality:100 | Resolution: 300ppi
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!