If you’ve ever tested your site on Google PageSpeed Insights, GTMetix, Yahoo! YSlow, or any of those tools, you may have been told about the value found in compressing images.
There are some images you can fix, like the first one on that screenshot is for an image from Twitter I downloaded. There are some you can’t fix, like the last three are all telling me the default smilies for WordPress need some shrinking.
Either way, the short and skinny of it is that if you make your images smaller then your webpage loads faster. I know, it’s shocking. Many long-term webheads know that you can compress images best on your own computer, using ‘Save For Web’ and other command line tools for compression. That’s great, but that doesn’t work for everyone. Sometimes I’m blogging from my phone or my iPad and I don’t have access to my tools. What then?
Before You Upload
I know I just said but what about when you can’t resize before you upload. There are things you can do for this. Photo Compress for iOS will let you make your images smaller. So can Simple Resize. There are a lot of similar apps for Android as well.
For the desktop, I use Homebrew so I installed ImageMagik (which is also on my server for WP to use) and toss in a command line call for it. Sometimes I’ll use grunt (yes, Grunt, the same thing I use for Bower and coding) and ImageOptim to compress things en masse.
Of course, if I only have one or two images, I just use Preview which does the same thing more or less. Photoshop, which is still stupid expensive, also lets you do this, but for the layman, I suggest Preview for the Mac. I haven’t the foggiest what you can use on Windows.
If you’re not uploading images via WordPress (and very often I’m not), you pretty much have to do it old-school.
While You Upload
Okay great, but what about WordPress?
The best way about it is to have WordPress magically compress images while you upload them. And actually it does this out of the box. My cohort in crime at DreamHost, Mike Schroder, was part of the brain trust behind making ImageMagick a part of core WordPress. This was a massive undertaking, but it allowed WordPress to compress images better, faster, and more reliably than GD. I hesitate to say it’s ‘safer’ since the image loss (that is that weird fuzzing you get some times) is less.
If you want to make it even better, you need to use plugins. I used to tell people to use smush.it which was a Yahoo! run service. But then they deleted it and we were all very sad. WPMU Dev, who owns a SmushIt plugin, installed Smushing on their servers and you can now use WP Smush. I’m a bit of a fan of TinyPNG, which gives you 500 free compressions a month, and that’s enough for me. I like TinyPNG because there are no options. I install it, it runs when I upload images, and done. That doesn’t mean I don’t see value in things like ShortPixel, just that it’s not really what I want. Finally there’s Kraken IO which I love just for the name, but it makes people balk because it’s not free.
If you don’t want to use an external service, and I totally get why you wouldn’t, there’s EWWW Image Optimizer.
I personally use either EWWW or TinyPNG, depending on the site.
Can a CDN Help?
Maybe. I know a lot of people love offloading their images to CDNs. I currently don’t for no reason other than I’m a bit lazy and I hate trusting someone else to host my images. But that said, you actually can (rather easily) use a CDN if you have Jetpack installed. Their service, Photon, does exactly that. Now, I don’t use Photon because my users in Turkey and China like to visit my site, but there’s nothing at all wrong with those services.
Comments
7 responses to “Image Compression”
I use Imsanity, one of the resize as you upload plugins, especially on client sites where they sometimes routinely upload (or try to) 2+MB images. Thanks for the lost of others though!
@Bet Hannon: I use Imsanity too. Surprised she didn’t mention it in the post.
@Denise:
Becuase it’s not image compression last I checked.
https://wordpress.org/plugins/imsanity/ doesn’t actually ‘compress’ images, it resizes them. Compression is taking the image, whatever size it may be, and smushing it smaller while retaining the same dimensions. Resizing is also very useful, don’t get me wrong, but it wasn’t what I was looking at. Yes, it lets you adjust the quality of the image, but it’s not a full bore compression engine like EWWWW is.
The point of the plugins on this list is that they do better than WordPress does with compression by using more tools. Imsanity uses what WP gave us, which isn’t bad, but it wasn’t what I was looking for at the time.
You can use Imsanity and EWWW together, looking at it, and that would be the best of both 🙂
I export my photos with Lightroom (so they’re already somewhat compressed) and then I use mod_pagespeed on the server side to serve loseless webp images to the capable browsers. The compression with webp is pretty amazing.
Regards.
@Rick Torres: I’ve given up on Mod_pagespeed for the moment. I liked how it handled things, but I’ve found that the cache was way too sticky for my tastes. Deleting it was a pain in my ass, even after I followed all their directions.
I haven’t used Jetpack myself, but I have had to deal with support issues concerning Jetpack’s tendency to significantly modify the visual appearance of images.
Kraken.io is my 2nd-favourite image compression tool.
The one I tend to use the most these days is Compressor.io … which – like Kraken – does an excellent job without affecting the final output.
@Erik D. Slater: It’s a given that all image compression will affect the output of the images. How much it’s noticeable is the question. My real issue with Jetpack is Photon offloads the images and I don’t want an image CDN.