When I joined Wholegrain a few months ago, it was a revelation that the internet creates a considerable amount of global carbon emissions. This revelation brought with it a new found commitment to performance. I’ve always liked the idea of super fast load times and all the benefits that brings for users but I’ll confess it’s been difficult to get motivated about. But having learned about the internet’s effect on global warming, I realise that heavyweight, bloated websites aren’t just bad news for users online, they also have far-reaching effects offline; global warming is really bad UX.
There’s a lot we can do with styles, scripts and markup to compress them and improve performance but we can’t control user uploaded content in the same way. This added complication may explain why I see many sites with optimised source files but huge, unoptimised images. When images reportedly account for 43% of page weight on average, it’s not an option to just ignore them.
Luckily, when working within WordPress, we have access to a slew of plugins, offering zero-configuration, automatic image compression. Some of these even offer a useful amount of free credit each month.
The Competition
While there are many plugins on offer, there are vast differences in feature sets and results. We had a few criteria to whittle down the competition for best image optimiser:
- Highest average compression whilst retaining acceptable image quality (different images achieve different levels of compression)
- WebP conversion (WebP is a new image format which can achieve 30% more compression than JPEG. This isn’t supported by all browsers yet but between 45-70% of users )
- Client-friendly interface and little manual input required
- Retains the original file in case we want to revert back to it or compress it at a different compression level.
Nice to Haves
- PNG>JPEG conversion (if there’s no transparency)
- API access for use outside Wordpress
- Multiple API keys so that we can track usage per install
- Additional quality settings so that we can choose a compression level appropriate to the needs of the website.
With these considerations in mind, I decided to go and find the best image optimiser plugin available.
There were just four image optimiser plugins that satisfied all our requirements:
There are a few really popular plugins that didn’t make the cut, including WP Smush It. Mostly, this is because they didn’t support WebP (yet).
Testing and Results
Apart from Optimus, they all have multiple levels of compression to choose from. I used the highest compression levels on all of them apart from ShortPixel, where I also tested the one below once I saw that the ‘Lossy’ level reduced the image quality too much.
I exported four high resolution photographs from RAW files as full quality JPEGs and ran them through each plugin. To start with I wanted to see which plugin achieved the greatest compression rate. There was a surprising amount of difference in the results. The average reduction for Optimus was only 56% while ShortPixel’s Lossy setting achieved a really impressive 93%.
Plugin | Avg. Compression |
---|---|
ShortPixel (Lossy) | 93% |
ShortPixel (Glossy) | 84% |
EWWW (Maximum Lossy) | 84% |
Imagify (Ultra) | 69% |
Optimus | 56% |
While file size matters to us, image quality is important and blotchy, fuzzy images are sad. We’re not in the business of making sad websites…
I found most of the results satisfactory. The following is my assessment of quality from each optimiser.
Optimus
The sharpest images with very few compression artifacts. Image grain was retained but not as well as Imagify. Fell down a bit on the poppy in the flowers image which had worse artifacting than EWWW.
Imagify (Ultra)
Similar quality to Optimus but resulted in slightly less sharp images. Much better handling of image grain and of the poppy. Resulted in smaller files and I preferred the quality.
EWWW (Maximum Lossy)
Loss of clarity on grain and textural detail. Slight dulling on all small details. We start to see squares and lines appear when zoomed in but no really noticeable artifacting and still very usable images and extremely impressive for the reduction in file size!
ShortPixel (Glossy)
A lot more artifacts noticeable. Some areas are noticeably compressed even without zooming in. Handles grain a lot better than EWWW but apart from grainy areas there is a loss of overall sharpness and in some areas like the poppy we see a clear degradation overall.
ShortPixel (Lossy)
This was the only setting that I wouldn’t use in most contexts. It might be useful if speed on a site was really crucial but the degradation in quality started to impact the images too much for general use.
For a side-by-side comparison of the images I tested, click Run Pen below or open in a separate tab.
See the Pen Pure CSS image comparison with zoom. by Jerome Toole (@jerome-toole) on CodePen.
For reference, the original and compressed images are available here.
What’s the best image optimisation plugin for Wordpress?
ShortPixel!
While the quality of the Glossy setting was a little below what I would ideally want and EWWW managed the same average compression with better quality, the combination of features in ShortPixel were the best fit for us and the interface is really user-friendly.
EWWW image optimiser would have stolen first place but is missing a couple of very useful features:
- There’s no option to re-optimize a selection of images using another compression level.
- You can only restore the original image for 30 days after compressing.
I’d also add that ShortPixel also has a weakness which is the lack of one more setting below ‘Lossy’. Something that would be useful in quality critical applications such as a photography site or art institution. In those scenarios, I might use Imagify or EWWW as both plugins offer less aggressive compression levels.
A note on other image optimiser cloud services:
I haven’t had time in this review process to get outside the WordPress plugin space and check out the cloud image processing providers such as: Imgix, Cloudinary and Sirv. They look interesting but won’t be as easy to set up. The major benefits here might be the ability to use more complex requests like blurring to deliver even smaller placeholders when lazy loading.
All this to look forward to in another post!