When I first started this blog a few years ago, I understood the higher the image file size, the higher the quality of image. I was right—technically—but when my website load speed started to lag, I was confused why this was happening. Turns out, I was so focused on producing non-grainy images that I neglected the most important thing of all: the loading speed of my blog. After lots of research, I quickly realized there was an easy trick to help get your website/blog/landing page to load easier—mine improved 5X! So with that said, here’s how to make your blog load faster.
How to Optimize your Blog Images
Blogs are image-based so it only makes sense that your images are the best way to set yourself apart and stand out from the rest of the crowd. I wasn’t wrong back in the day—having grainy images can ruin the reading experience of a blog post—but I approached it the wrong way.
The correct way is: optimize your images to fit YOUR website. No, that doesn’t mean use the highest file size available. Instead, customize your images so that they properly fit the post column width. It’ll make your overall design look crisper and improve the loading speed of your blog!
Here’s how to do it.
Head over to your blog, and select any blog post. Right click anywhere and select “Inspect” from the dropdown menu.
When code appears on the bottom of the screen, click the “Inspect Element” tool—it looks like a magnifying glass and should be on the top left. Once clicked, hover your cursor over your blog post header and/or title. The dimensions should appear—while two numbers pop up, the one you’re after is the first (and larger) one.
As you can see from my screenshot, my header is 690 pixels wide. Since many people are now on Retina laptops and computers, where every single detail is magnified and every pixel is super crisp, multiply that number by 2. That is your optimal image size! In my case, I make sure every image I upload, regardless of whether it’s horizontal or vertical, is 1380 pixels wide.
How to Export
Of course, file size and resolution does factor in during the post-processing stage. Once you’ve edited your image to your aesthetic preference (click here on to learn how I edit all my pictures), save your image with custom dimensions using the new width you calculated above. As for Pixels per Inch (PPI), set that number at 72; for overall File Quality, somewhere around 70-80 works great.
And that’s it! What do you think? Let me know in the Comments below.