How to Compress Images the Right Way
What is image compression?
The concept of compressing images is fairly straightforward – making images smaller in size so they load faster. But what is actually happening during image compression? Most users are interested in compressing JPEG images (although TinyPNG is a pretty slick tool as well). The idea is to strip unnecessary information within the image itself while maintaining image quality. This is referred to as lossless image compression. Lossy image compression is more aggressive (and thus more savings) but is advisable only when testing thoroughly as this degrades image quality. Lossy compression can be useful in images that are of landscapes or natural elements as the quality loss may not be as perceptible.
What are the best tools for WordPress?
Comparisons
Test image size = 742 KB
Plugin | Compressed Size | Saved % | Method |
|---|---|---|---|
Imagify | 160 KB | 78% | Lossy |
Kraken | 564 KB | 24% | Lossy |
WP Smush Pro | 86 KB | 84% | Lossy |
reSmush.it | 96 KB | 87% | Lossy |
TinyPNG | 173 KB | 77% | Lossy |
*Note EWWW and a few others were intentionally left off as we feel they’re not as strong as the others listed.
*We’re also not overly concerned about pricing – they’re all comparable in the end.
Don't decide just yet...
You can see the data is very clear about which tool can get you the most savings. Smush Pro, reSmush.it are the clear front runners. Kraken just doesn’t produce enough savings to warrant further discussion. Goodbye Kraken – you can cross this one off the list already. The next step is to compare the optimized images side by side, see below if you’ve got that “pixel eye”:
Imagify
Kraken
WP Smush Pro
reSmush.it
TinyPNG
The Results
If you’re still with us (you may have gone cross-eyed staring at these) – we carefully examined the before and after for each of the tools above. What we noticed right away is although WP Smush and reSmush got us the most savings as we previously noted – we also lost a significant amount in quality They’re definitely more blurry than the others, can you see it?
It really comes down to how much quality is enough? How do you balance that with size? For us, quality is paramount and saving an extra 74KB between Imagify vs. Smush Pro at the price of quality wasn’t worth it. The only caveat would be an image heavy page at high resolution… then you may need to rethink your game.
Final Considerations
Each of these tools has it’s pros and cons – it’s really up to you on where your breakpoint between quality and speed lies. There are also different tiers of compression to consider (we went to max compression on all services). Problem with Smush Pro is it’s one setting for every image (either super smushed or regular smush) – just not enough options there for us. The other services have 3 tiers of compression – namely Imagify and Kraken.
For us at this point – it was down to TinyPNG & Imagify. Similar savings, similar quality. You’re probably safe choosing either one. But for competition’s sake – we’re going to crown one the winner.
TinyPNG has a neat Photoshop plugin. But beyond that it has all of the other features like resizing, automated compression, etc. – no real defining features.
Imagify’s “difference” maker is that you can compress each image to different levels (3 tiers as we mentioned) – which really helps you tweak individual images on your site, based on what they can handle. Believe it or not we have different levels of compression all over the place – you’d be surprised what some images can or can’t handle. The web portal can also compress PDF’s – awesome – that’s a nice little selling point for us.
In the end we gave Imagify the edge because of the flexible feature-rich system they’ve developed. That, combined with the near-lossless compression at a nice 78% clip – can’t beat it.
If you feel like any service or tool was misrepresented please comment below! We’re also curious to see if we missed any tools new or old – there’s a lot out there.
