Optimizing your website’s images is a great way to speed up the site. And of all the speed tweaks you can do, image optimizing can be among the most dramatic.
If you can reduce each image on your website by 10-30%, you’ll make a real difference in how quickly your site loads. And that’s good for your visitors, good for your server bandwidth costs, and good for SEO.
There’s a range of aggressiveness with optimization, but in general, what it does is strip out unnecessary data to make your image files smaller and therefore load faster.
You can do that losslessly, where there is no effect whatsoever to the visual image quality, or be more aggressive and convert to even smaller files by applying some lossy optimization that discards some information. Lossy optimization tosses out information, so it does degrade image quality. But with good algorithms, the degradation can be minimal to practically nonexistent.
It’s quite reasonable to expect to be able to reduce the file sizes of each of your images by between 10% and 30%, depending on the settings you use. Even saving 10K here and 40K there can really add up over the course of hundreds, thousands, or hundreds of thousands of page views a month. And every fraction of a second you can shave off your page load times can even potentially have a positive effect on Google rankings now that Google explicitly factors in page loading speed to its ranking algorithms.
There are all sorts of tools available to help with image optimization. Most of them package a range of individual scripts, each of which has its own strengths. You can often mix and match which scripts to use in order to control how aggressive the optimization is. One of my favorite apps for doing it on my computer is ImageOptim, and I’ve written about that here.
You can run something like that on images before you upload them to your website. The catch is that the optimization only applies to the version you upload. But some content management/blog systems, like WordPress and Drupal, generate other image sizes and thumbnails automatically when you upload an image. Those extra, derivative images won’t be optimized by default.
So if a website is using a platform like WordPress, a more comprehensive approach is to have something on the server that automatically optimizes every image you upload and generate in WordPress.
A long-time, free option is to use the WP Smush.it plugin that makes use of Yahoo’s free Smush-It service. But there are several catches. For one, there are terms of service concerning the rights of your images and your privacy to contend with. But the most important one is that it’s patchy. Smush.it is one of several impressive tools Yahoo! made available freely to developers back in the day, but has been neglected for years and seems to be maintained on life support (Pipes is was another). I’ve been underwhelmed by its reliability; it seems to be down as often as it’s up. So I gave up on it long ago. Another option is CW Image Optimizer, which basically takes the fundamentals of WP Smush.it and runs them on your own server instead of on Yahoo!’s servers. But it means installing some utilities on your server, which isn’t possible on all shared and managed hosting environments.
On my previous website host, I was using EWWW Image Optimizer. It’s very powerful and does a great job, but it also requires a reasonable amount of setup on your server. And I had to stop using it once I moved my site to Synthesis hosting because one of the crucial server functions, exec(), is disabled for security reasons, as it is on many other managed hosting solutions like WPEngine. I was disappointed to have to stop using EWWW IO; the other options just aren’t as good.
But now there’s a new cloud version that takes all those pesky server-side configuration issues out of the equation. It means that you can now run EWWW Image Optimizer on any host so long as you can install your own plugins (i.e., doesn’t work on Wordpress.com hosted sites).
It’s called EWWW Image Optimizer Cloud. Basically, it handles all the heavy lifting on specially configured cloud servers, taking all the configuration and CPU usage headaches away. You don’t have to worry about things like jpegtran, optipng, advpng, or, crucially, exec().
There are two things you need to get up and running. The first is to install the EWWW Image Optimizers Cloud plugin in WordPress. The second is that you’ll need to purchase an API key–while the plugin itself is technically free, the service it relies on to work isn’t free. The pricing structure changed after I signed up. It’s now divided up into pricing bands based on actual usage of how many images you’re processing per month (remember that it’s processing the different sized thumbnails generated by WordPress as well), starting at $0.005 per image for the lowest quantity (up to 1000 images) down to $0.002 per image if you’re processing over 10,000 images in a month. There are also prepaid and annual plans. You can find the latest plans here.
The developer does a great job of walking through the details of all the various settings in a couple of screencast tutorials here. But here’s a general overview.
Basic Settings
The Basic Settings tab gives you the options for stripping out all metadata and some top-level optimization options. A particularly interesting one here is the Lossy JPG optimization one. Normally, I wouldn’t use this, but in this case, it uses the impressive JPEGmini service. JPEGmini isn’t free, but you don’t have to pay separately for it if you get an EWWW Image Optimizer Cloud subscription (which is required to run the cloud version of EWW IO anyway).
I’m very cautious about using automatic lossy optimization, but I’ve been happy with the results from JPEGmini. Before enabling this option, I recommend testing the results for yourself on the JPEGmini site by running one of your own images through to see a before and after comparison.
The Lossy PNG option also uses gives impressive results, but since I really only use PNG for some screenshots of general graphic files like logos, I’m less worried about generating lossy versions of those.
Cloud Settings
The most important field here is the API key. Before you can use the cloud service, you’ll need to purchase an API key. Prices are scaled by the number of images per month to process, starting at $1 for 1,000 images per month on up to $20 for 100,000 images.
Advanced Settings
This tab provides options for scheduling optimization, adding folders not within the usual structure, and skipping images.
Conversion Settings
Most of the options in this tab require a more detailed understanding of what’s going on. Some, like the WebP option, probably require some configuration on the server. If you want to work with these options, I recommend checking in with the developer’s documentation.
Bulk Optimize
By default, EWWW Image Optimizer optimizers new files you upload to the Media Library. But you can also use the Bulk Optimize tool to work on files already in WordPress.
Once you start the process, it’ll give you a progress report in real-time as well as telling you how much was saved for each image. If you’ve enabled some of the extra PNG optimization options, don’t panic if it seems to slow down on PNG files–that’s normal.
One of the important things about running optimization on the server is that it also optimizes all of the thumbnail and other media sizes that are created automatically when you upload images to WordPress. You’ll notice here that I have a lot of extra thumbnail and image sizes that have been generated for various uses that are created by Wordpress’s [add_image_size [function(http://codex.wordpress.org/Function_Reference/add_image_size).
Running the Bulk Optimize function will probably take a while. The images have to go from your server to EWWW’s optimization servers, and back again. But the good news is that you should only have to run the bulk optimization service once.
And something to be aware of if you’ve activated EWWW Image Optimizer Cloud at the network level on a multisite installation is that although you access the settings at the network admin level, bulk optimization has to be done on a site by site basis because each site has its own media library.
Media Library
Once you’ve done that, you also get some per-image options through the Media Library. Just change the Media Library view to the list view (in the Media Library screen, hit the top left icon immediately under “Media Library).
You’ll have a new column called Image Optimizer that shows things like optimized size reductions and any processing options you have for each individual image, such as re-optimizing or converting.
Wrap-Up
EWWW Image Optimization Cloud is a very effective and very powerful tool for speeding up your WordPress site. If you’ve been disappointed with WP-Smush.it, I highly recommend taking a look at EWWW Image Optimization Cloud.
The two main reasons I see that it might not be a good fit for everyone is its relative complexity compared to other options (that is, it has a lot of options), and its pricing structure means it can get expensive if you’re working with many thousands of images. The price per image is minuscule, but it can add up quickly because it applies to every version of an image, including the thumbnails and variants that WordPress generates automatically. But I’ve been using it for some time on my sites and have found it to work very well indeed.
You can find it here.
And if you’d like to explore other options, I have a detailed review of Optimus Image Optimizer here. WP Smush is another popular (and free) option that has been around a long while and has been rejuvenated with some new developers taking it over. Kraken.io and ShortPixel are other premium services (that is, they cost money to use) that are popular, and I plan to review soon.
BONUS TIP: The folks over at Gift of Speed have put together a very handy list of tips to speed up your WordPress site.
Thanks for sharing :)
What do you guys think about removing header and footer JS files which Wordpress automatically adds? I was reading an article which recommended this ) but I’m not sure if it’s okay to do. Thanks!
I implement many of those suggestions on my site, but not that one. For me the key is defining unnecessary because some plugin you install in the future might depend on it, or there may be consequences you don’t see with your regular browser. That’s not to say it can’t be done–just that it’s a step I’m very cautious about on my sites. Aside from that, though, it’s a very handy collection of tips.