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… Read more 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.

EWWWEWWW 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.

 

WPInjectWPInject

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.

EnvironmentDesktop PagespeedMobile PagespeedPagesize
Onsite WPInject2.13s3.16s522.7
Offsite WPInject1.56s3.14s523.1kb
Local Optimization1.6s2.73s227.0kb
Ewww Optimized1.78s3.34s521.9kb
Ideal and Irfanviewed1.27s2.74s120.8kb
Ideal Offsite1.37s2.97s395.6kb

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.

16 thoughts on “Image Optimization and Automation in WordPress

  1. Thanks for doing this comparison. I am always working with lifestyle, mommy, or food bloggers who rarely optimize their images. Most use Picmonkey or Canva to create images and even those need better optimization.

    I’m really interested in Kraken and am hoping one of my blogger clients decides to spend the money on an account At $5/month for the micro plan, I think it is a no-brainer.

    1. Thanks Mitch, ya, Kraken looks like the most automated and effective thing I’ve seen out there. I still wouldn’t want to be uploading 3MB+ files no matter what your environment, so a little education on that can go a long way. Of course, in the near-distant future we’ll all have the next generation FiberOptic cables and laugh at the days when we cared about 500kb savings 🙂 Hope to see you around here more often!

  2. This is a really useful article. Local image optimization is the best solution and probably most commonly used. For example we take a lot of screenshots, just changing a png-8 image to use 16 colors instead of 256 can reduce image size significantly with very little loss in quality. Online tools are unable to make the decision that how much quality loss is acceptable to you.

    1. That’s a good point Noumann, and one I touch on in my previous article which covered local optimization exclusively. I agree generally, but as my speed tests show, when dealing with a small amount of image the performance improvement is so minor as to almost not matter. The more images a site uses the more and more relevant and important really targeted optimization becomes.

      Thanks for chiming in, hope to see you around here more often!

  3. Hi Matt, I am the creator of WP Inject. It is interesting to see your test results here. Currently WP Inject is only meant to make finding and inserting images easy and it does not do any size optimizations of its own. Since I have not much experience in that matter I guess I will leave that to other tools, but if you have suggestions how image sizes could be improved in WP Inject I would love to hear them.

    1. Hi Thomas, thanks for stopping by. Naturally WPInject wasn’t intended as an image optimization tool, but I saw that as an automatic benefit of leveraging Flickr’s CDN. And of course that shows in the results. I had to really optimize the image sizes really well, and my optimal environment really well in order to get faster pagespeeds than just using WPInject alone. So kudos.

      I think one minor suggestion would be to have a small alert when choosing images that is the user chooses to embed the image from Flickr rather than upload it, they run the risk of that image being removed at some point. Just a pre-emptive alert might inform your users in advance.

      Thanks for stopping by and for making a really excellent plugin!

  4. Thanks Matt, I will consider adding such an alert. As of now the “save images to server” setting is activated by default, so I think most users changing that will know what they are doing (although thats always a dangerous thing to assume 😀 ).

      1. Totally understood that, no worries. I noticed just the other day that there had been a lot of updates since I first tested it, so I should dig in again. I think using the upload to server method, combined with a well-configured use of Imsanity is a killer option. Now if Kraken.io would offer a really affordable WP plugin to boot, we’d be pretty much done here!

    1. It depends on a few things. If your images are further down the page you could implement Lazy Load so that the image doesn’t load until the user scrolls down to that part of the page. That makes the page load quicker. Then of course try caching tools like WPRocket. Check out the rest of this series for other WordPress plugins that kind of automate this process.

Comments are closed.