Blogging for Beginners: How to Optimize Your Blog’s Photos

This is the second post in my “Blogging for Beginners” series. Read the first post, about my switch from WordPress.com to self-hosted, here!

I’m no blogging expert, but I believe we should all help each other and lift each other up, so I’m passing along the knowledge I’ve gained for anyone who might need it.

If you’re blogging through WordPress.com or another not-self-hosted provider, then site speed probably isn’t something you have to worry about. I definitely didn’t worry about it, until recently. When I switched to self-hosted, I realized my page load speed was muuuch slower than it had been when I was hosted with WordPress.com… but if my content didn’t change, why the sudden lag?

Turns out there were a couple culprits, and picture optimization was one of them. Picture optimization? Don’t worry, I had no clue what that meant when I first heard it. I thought it was just a fancy way of “optimizing” the best possible pictures to go with your posts, but it really means optimizing the size of your images to find a balance between file size and picture quality.

I’d never optimized a single image before checking my site speed and finding that all my post graphics and pictures were actually slowing me down…

Good news, though, optimizing your pictures doesn’t have to be scary! It’s actually pretty easy, and there are a couple benefits to optimizing. When you start reducing your images, your site will load faster, you’ll save media file space, and you’ll use less room on your host storage (which means you can use even more freshly-optizimized-pictures), so everyone wins!

Once I learned that my image files were slowing down my blog, I headed to the world-wide-web to figure out how exactly one does this “photo optimization” thing.

Optimization is essentially just reducing the file size of your images so they take up less storage, so they can load faster.

In most cases, your pictures are much higher resolution than they need to be to look good, which adds unnecessary bulk to your site. Your pictures don’t need to be full size, they just need to be good enough size and quality to appear clear and sharp at whatever size they’ll actually appear on your site.

iPhone pictures are high quality, at the cost of about 5.4 MB, each. But because the pictures have a high resolution (and DSLR cameras have even higher resolutions), you can shrink them down pretty significantly without losing quality, which is good news for your task of optimization!

I found this article, which gets more into the tech-y stuff, and recommends a few ways to optimize your blog pictures. From their recommendations, I like Image Optim the best.

If you don’t blog from a Mac, then Image Optim will work just fine! But if you use a Mac like I do, there’s an even easier way to get your pretty pics optimized. To show you how to optimize your blog pictures on a Mac, I’ll take you step by step through the process of optimizing this post’s header. Here we go!

1. Prepare for optimization. This is a fancy way of saying, “get your picture”, but that title sure sounds nice, right?! For me, this meant screenshotting the design I made as the header for the post. (Secret’s out: I make all my graphics on Microsoft Word and screenshot them!)
2. Double click the picture. Again, these are the steps to optimize on a Mac. Find the picture in it’s folder, and double click it. Here’s my picture in this post’s folder, and here’s the picture opened up.
3. Meet your tool bar. If you’ve never played around with the tool bar options, you’re missing out! We’ll be using the handy-dandy “tools” option for this picture. (And in this “tools” area, you can also remove your GPS location from your pictures, which I’ll talk about in the next series’ post!) Once you select the “Tools” icon from the top of your screen, click “Adjust Size…”
4. Assess the original file. Like I said before, your “optimum” picture is one that marries file size and image quality, so this part takes a little trial and error. In the “Adjust Size” tool, you can see your picture’s original file size (this one was 2.2 MB) and dimensions (12.43 x 9.11). File size is what we’re paying attention to.

Every image is different, but for graphics (like the script “Optimizing on a Mac Computer” above) I shoot for the 110-150 KB range, and then adjust as needed, depending on the size and purpose of the picture on my site. For all other pictures, there isn’t one specific size I’ve found to ensure quality, but you can keep adjusting until you get it right.

5. Reduce the file size, or optimize. This is where the trial and error comes in. Adjust the width or height of the picture and notice the resulting size. Here, I adjusted the width to 7, so the width automatically adjusted, and the resulting image is now 689 KB, which is much smaller than the original file I created. I haven’t found the sweet spot for my post headers since switching to my new site design, but even just making this reduction saved about 1.5 MB (which saves load time and room in storage!). If you optimize each picture, even by 20% (some can go up to 80% or more and still look good!), it really starts to add up.

Once you’re happy with your new, more petite file size, hit “OK” and #MissionAccomplished.

6. Post it! Enjoy faster load times, without sacrificing image quality. This is one of those BTS blogging things that readers might not even notice, but the work behind the scenes always pays off.

Don’t worry if you’ve never even thought about your picture’s file sizes, I know I didn’t! If you’ve already figured this all out and you’re already optimized, good for you! I wish someone would’ve told me about this sooner. Whether you’re self-hosted or not, I recommend starting now to lighten your picture file loads for the future of your beloved blog.

If you’ve already posted a bunch of pictures without giving optimization a single thought, I recommend optimizing your site’s header, if possible, as well as your “About Me” images and signature, if you have one. I went back through a few of my past posts that still get regular traffic and optimized to help improve my site’s speed, and I’ll be optimizing all my new pictures from here on out.

My site is still slower than I’d like, but picture optimization is a step in the right direction! I hope you learned something from this post or found it helpful. There will be another Blogging for Beginners posts soon! Thanks for reading 🙂