how to optimize your blog images

How to optimize your blog images

Speeding up your WordPress blog is super important and almost a no-brainer in today’s SEO world.

One of the biggest culprits weighing us down are the featured images we use to showcase our content. It’s important to pick a great photo that lures the reader in. Great photos sometimes come with a cost in bytes or Megabytes in today’s example.

Normally I reserve Friday Edition lessons (great for us weekend WordPress warriors) to the Pro members, but it’s on the house today.

How to optimize your blog images

Tools and steps to decrease the page load

Before the elite Gods of speed optimization tell me differently — I don’t do this every day.

I can tell you that I’ve worked with WordPress clients that don’t know any better than to upload a raw image directly from their corporate camera.

If you have clients like this or you’re starting out yourself, this is a great tutorial for streamlining your photos for the web.

In this example I take a 4MB+ photo, optimize the file locally, and then serve it up using the WordPress JetPack Photon CDN. There are other great examples of CDN’s which you can find from Jean’s article comparing them.

So while we can tune and tweak the server for Google’s desire — it’s equally important to use the right photo from the start.

Image editing tools

Pixelmator – A great Photoshop alternative for resizing and degrading the quality of the photo.

ImageOptim – For optimizing the image further.

I was able to shrink the size of this file, from it’s original size to 4.9MB to ~55KB with the process shown in the video. Good news for you, it’s very simple.

  1. Load up the image in Pixelmator (or your photo editing software)
  2. REsize to the desired size. I try and pick the exact size of my WordPress theme’s featured image. In my case, it’s 732px.
  3. When exporting, I’ll degrade the quality of the jpg to what I can tolerate. In this case 50% of the original quality.
  4. Save and serve with a side of speedy goodness!

WordPress plugins I use

JetPack Photon as a CDN – Photon does a great job of serving up the images as a CDN. You can see from my examples in the video or below.

WP Smush.it – Though I don’t specifically use it in this video, I mention it because it is useful for running through your media gallery.

Performance testing tools

WebPagetest.org – one of the first tools I’ve started using for measuring performance.

GTmetrix – another useful tool for measuring the performance and comparing your site to others.

Putting it all together

Please note: there are a lot of variables to speed tests, load times, images etc. I realize this, but I’m solving probably 90% of the bloat that clients and beginners struggle with. 

In today’s lesson I upload the full size 3500px wide image first.Then spend some time running through the tools and uploading to a new blog post. From there, I install JetPack and enable photon and  run the tests against a non-optimized image and then to the optimized images. Your results may vary.

Full-size image speeds – 8.869 seconds

speedtest1

Full-size image w/ JetPack Photon – 1.367 seconds

speedtest2

 Optimized image w/ JetPack Photon – 1.166 seconds

speedtest3

Conclusion

Should you be using a CDN? Absolutely.

Since Photon is so accessible and it just works — give it a go. One thing TO notice is the fact that enabling JetPack + Photon added 10 more requests to our speed tests. (note: from 13 to 23)

Might not be a big deal on smaller sites, but could certainly have some scaling effects on larger, more competitive sites. A majority of the work can and should be done locally before uploading the image.

The best thing you can do is to use exact size featured photos if your theme uses the featured images feature. Make sense? Start making your pages fly today!

What are your tips for optimizing page load? Want more lessons like this delivered every Friday? Join Matt Report Pro! 

Music creds:


Comments

9 responses to “How to optimize your blog images”

  1. Another reason to resize images before uploading is that the Photoshop resize function is much better than the one WordPress uses, so you’ll get sharper images, this can easily be seen when you’re resizing screenshots of textual content for example.

  2. Great stuff Matt! I’d like to add a few tools that I use daily.

    JpegMini – lossless jpeg compression. They have an online version, and a pro Mac app.
    TinyPNG – lossless png compression. Only version, but just recently released a WordPress plugin with the same tech.

    Also, DPI isn’t mentioned here, and although this has zero effect with monitors and the display of the image, it DOES have a significant effect on the weight of the image. Always make sure you’re resizing with 72dpi and not 300dpi, which is default by most professional DSLR’s.

    1. Awesome Nick, thanks for that!

  3. Love the video Matt, thank you so much, great info! Not sure what camera you’re using to record but to get rid of the fluctuation of light in your video which can be very distracting, use lock exposure or if you have manual control on your camera definitely use it. This will keep the exposure set and you won’t see any changes in exposure in your video. Sorry, you don’t know me and I don’t know you, I’m a video guy and it’s one of my passions. I try to give feedback whenever I can to help people. This is a simple tip but it will drastically improve your production value, I promise. Keep up the great work!

    1. Hey Erik, thanks! Yea not quite sure what happened on that one, first time that’s happened to me.

  4. […] So you’ve got this amazing photo, its got a great caption and graphics on it and it definitely stands out as a “wow!” piece. Now you need to make sure that you’re optimizing it for page load on your website… Size it down to the size of your featured image in PicMonkey – for instance my website prefers 300X250 featured image size. The reason why this matters is you don’t want a huge image for no reason, even if yore resizing it in your CMS to the correct size, its still a big file that has to load… you want to save as much load time as possible. Then when you’ve got the file saved to your desktop I highly recommend running it through ImageOptim so that when you upload it to your website the image is scaled down as best as possible for best load time speeds. (For more tips on this check out: Matt Reports article: http:http://mattreport.com//optimize-blog-images/) […]

  5. Hey Matt, Thanks for providing these practical and helpful videos!

    I am one of the few PC guys it seems :), so I went seeking a PC solution to re-sizing and optimizing in batch, I ended up with 2 WP plugins that did the trick for me.

    This was for a client site.

    The plugins are Imsanity and EWWW. basically the first will resize images to a maximum h/w that you specify and do a pretty good job of optimizing the images. EWWW does a really good job of optimizing: I found that running EWWW after Imsanity produced an additional 2-10% reduction in image size.

    The really cool part is that it involve NO “pre-processing” before uploading the images. The client or I, can upload huge images, they are resized and optimized then replaced with the right image on the webserver.

    I just wanted to share my findings.

    I am also very interested to find out if there is a negative doing this.

  6. Hey Matt, great article, super helpful.

    You may also be interested to have a look at our just released FooCapture screenshot extension for Chrome as part of the blog image creation and optimization process. http://foomedia.io

Leave a Reply

Your email address will not be published. Required fields are marked *