Image Optimization and Automation in WordPress

A while back I detailed how to optimize your images for use on your website. Since then, I got a lot of feedback from users who opt to use WordPress plugins to automate their image optimization. That makes a lot of sense, I mean, it takes time to optimize images. But, I wouldn’t be doing anybody any favors if I didn’t do some due diligence and make some comparisons for you.

Different Plugins, Different Approaches

So there’s two major plugins I wanted to review that represent different ways of automating your image optimization in WordPress. One emphasizes optimizing the images that you upload regardless of their original size. The other gives you a way to find free images and upload them or serve them from a powerful CDN.

EWWW Image Optimizer

This plugin is the de facto choice of folks I know who want to optimize their images as they are uploaded. It is supposed to be how to take my post about image optimization, and throw it out the window. So we’ll test that.

WPInject

This is a new plugin I recently came across and really wanted to test it out because it’s a really tempting approach. Basically, it puts a search bar for Flickr at the bottom of your edit screen. You search for an image you’d like to use in your post, then you can do the following things with it:

1. Upload it straight into your Media Library to use like any other image; or
2. Embed the image of various sizes straight within your post. The benefit of this is that your image is sourced by Flickr’s really powerful CDN; and
3. Using either of the two previous methods, you can assign that image as the Featured Image of your post.
4. Oh… I forgot. It also automatically adds image credits to the author directly under the image for you. The images you search for are all licensed for fair use under Creative Commons, and the attribution makes it just that much more legit. Really nice touch. You can see a lot of these options in this screenshot.

This is also interesting because it was developed right around the time that Getty Images announced that it would allow users to embed some of their images into your blog for free using their embed tool.

A lot of developers cried foul because of the completely useless way the embed works. So, having a resource that’s virtually as large, and embeds responsively and can be uploaded directly to your WordPress Media Library is a shot in the head to Getty.

A Couple other Options I’m not Comparing Here

I went into detail in another previous post on ways to optimize your Media Library and better manage Images in WordPress in general. In that post I gave a shout out to Imsanity. That’s an awesome tool that I use on virtually all my client sites now because it automatically down-sizes your images to whatever pre-set width/heights your design needs. But it’s not an image optimizer in the way EWWW is or a image CDN like WPInject.

Similarly, Hammy is a really interesting tool that automatically loads different sized images based on the screen size. I initially was testing that together with WPInject and EWWW, but found that it’s javascript was adding so much processes and additional http requests that it cancelled out any benefits of the smaller images. So the testing was just cleaner overall by excluding it from the results.

Smush.It is another image Optimizer, and honestly, you can lump it together with the results of EWWW below then mentally make it a little less effective.

The Testing Environment

So, in order to test these various tools out, I needed virtually identical environments but different installs. I can’t test WPInject well if EWWW is activated on the same install because EWWW would optimize the Flickr images when uploaded. I could have done sub domains of my site, but I really wanted to test out a new hosting service called Jumpstarter.io.

Jumpstarter.io provides one-click WordPress installs for free. You don’t pay anything until you’ve made 5,000 http requests a month, which doesn’t take hardly anything at all, especially if you’re doing extensive testing like I was. The servers are all in Ireland, but distributed with Amazon Web Services. So here’s the run-down:

(note: Originally I planned to keep all these environments up and visible since it was fairly affordable to do so with Jumpstarter.io. BUT! They discontinued their service… still a bit bitter about that.)

• Environment 1: Here I tested WPInject and my optimization method using Irfanview.
• Environment 2: Here I tested only EWWW Image Optimizer with the same image as in Environment 1.
• Environment 3: Here I optimized the whole environment, minifying assets, used JetPack for the image CDN, and various other optimizations to make the page load as quickly as possible. Then tested it with Irfanview, then the two WPInject methods as well.

Testing Tools

I used Pingdom Tools to test Pagespeed for Desktops. All tests were run from Dallas, TX, using IE9.

I used GTMetrix’s Public Beta Mobile Pagespeed tool to test for mobile speeds. All tests were conducted on an Android Chrome browser on a Nexus phone from Vancouver, CA (that was their only option).

In the results below, you can click on the results to see the live report.

6 Tests Total

For the Desktop speeds I used Pingdom tools, for Mobile I used GTMetrix since they have a Mobile test in public beta. The screenshots of the test results were added to the individual pages after the tests were done so they did not affect the test at all.

Considering the three environments, and the various ways the images could be used, I ended up with 6 tests total. The results are here.

[table id=1 /]

Observations

There’s several things I think are worth noting:

1. Clearly, doing local optimization is still the most effective method. This is for several reasons, primarily that even with the Flickr CDN considered, you have to use the image sizes that the image is available in. For example, these images are 605px wide. In order for the image to fill the content area, I had to pick the Flickr image that was 1024px wide since the next largest was 540px wide. Further, it’s highly unlikely that the Flickr authors optimized their images before uploading to Flickr, so you’re stuck with a lot of superfluous data in the images that you don’t need.
2. The second drawback to the Flickr method is really apparent now, but wasn’t when I first did the test. Basically, if you want to embed the image and benefit from Flickr’s CDN, you run the risk that the author might at some point pull the image. You’ll see here, that’s exactly what happened to the image I used shortly after I setup the test.
3. This is what struck me the most. EWWW really does almost nothing in terms of real optmization. Man! I expected more from that tool. The page load times are long, the file size is only slightly smaller than the WPInject Onsite test. For me, I’ve basically written that tool off my list, it just doesn’t deliver.
4. All of these really didn’t deliver strong enough results for mobile devices. The Irfanview method was still the best but more definitely could be done. Keep in mind that I only optimized that image to be 605px wide, so mobile viewers have to have that shrunk down to about 280px wide.
5. Lastly, the difference between using the WPInject method, and my own local optimization method is minor. For a small site, I would totally recommend using WPInject simply because it’s easy and does things well. Of course, I’d suggest you use the onsite method, and maybe add Imsanity as well to automatically shrink those larger images down. But, for larger sites with a lot of images, the manual method will still deliver a much greater result in the long run for your server and your pageload times.

The Next big Thing

So, have a small site? Use WPInject, it’s worth it. Big site? Read my optimization tutorial.

Also, since then, I’ve become a religious user of jpegmini.com and tinypng.org. They are both excellent online tools for jpg and png optimization.

Here’s a few other developments to watch out for.

• Kraken.io Website with big budgets and lots of images should plan to put money aside for a server-side image optimization tool like Kraken. I don’t have personal experience with this, but the concept is awesome.
• Cloudinary CDN and Image Optimization tools I’m toying around with this a bit, as well as Blue Hat CDN. Both of these are really interesting, and are not limited to images at all. I’d almost call these “micro-CDN’s” in the vein of Jetpack’s Photon. They offer the services people are looking for but perhaps not the performance of a serious CDN like Cloudflare or MaxCDN.