What in the world does a suitcase have to do with image compression? We’re about to find out.
There are various approaches to image compression, that I’ve previously compared to a chisel and a chainsaw. EWWW IO being the former, and tools like PageSpeed Insights using the latter. However, there are other aspects to image compression that get very technical. I’ve struggled to explain them adequately, but today an analogy popped into my mind that helps to understand image compression better.
Efficient Packing
Most cameras (and of course phones) don’t usually generate a “fully compressed” image. They use faster, less CPU-intensive methods. They do this because waiting for your camera to save an image is painful, and space is cheap. Think of it like packing a suitcase: if you hurry, you might not pack your clothes too carefully. You’ll just throw everything in, and so long as it fits, everyone is happy. Until you get to the airport and have to pay baggage fees…
But what if you want to save a little money on those fees, or your vehicle doesn’t have enough space? Then you are going to try and pack things in as tightly as possible. You might even use a smaller suitcase. If you don’t quite have enough space, you might try different ways of arranging the items. Then you might try different ways of folding your clothes until you finally get everything you need into that suitcase and can get the zipper to close.
Both suitcases have the same things in them, but one is packed tighter, and more intentionally. That is what lossless compression does. We haven’t gotten rid of anything, we’ve just taken a little more care in the way we pack things.
Ditching the Fluff
Now, there is a second part to lossless compression, and that is metadata removal. Metadata is “non-essential” data, like the GPS location, or the shutter speed, the camera model, the exposure, and that kind of thing. So in our example, another way of getting everything you need in that small suitcase is looking for things you don’t really need. Perhaps that is an extra pair of sunglasses. It might be a blow dryer, just because you don’t know if the motel will have one in your room. You would like to take these things if you could. However, if you don’t have space, it won’t hurt to leave them behind.
Removing metadata (or EXIF information) is the process of stripping out everything that is not essential for displaying a picture. Metadata is also referred to as “non-pixel” data; pixels being the individual dots that are used to display an image.
So when you use Lossless mode, literally all we are doing is repacking the data, and getting rid of non-essential information. It certainly helps, but it’s not likely you are going to save a huge amount of space. Depending on your traffic though, that could be tremendous bandwidth savings, and it will generally make your site a little faster.
Downsizing Our Luggage
Now we get into two other methods of compression. These methods are both “lossy”, which means that the compression alters some pixels in the process. The amount of quality loss is going to vary depending on the method and the quality level in use. If we’ve already packed our suitcase as tightly as possible, but we want to do better, we’ll have to get rid of some things.
Finding Balance
The first method is simply recompressing while reducing the image quality. This allows us to throw away pixel data to achieve higher compression. If you’ve used any photo editor, you have probably seen a JPG quality setting. If you simply re-save at a lower quality setting, you can save a lot of space.
The second method is what EWWW IO, Imagify, and several others use. This method looks at an image, and tries to find places where it can remove detail or smooth things out without it being visually noticeable. It’s really surprising how much you can save this way, but it averages 30-50%.
The Rush Job
So back to the suitcase: Let’s say you’re going to be gone for a week. So you pack multiple changes of clothes, for every contingency, rain, snow, heat, etc. Then you realize it won’t all fit in your suitcase, so you need to get rid of some clothes. Now there’s two ways of doing this. If you’re in a hurry, you just grab half the clothes, throw them on the floor, close the suitcase, and head out the door.
That’s basically what happens when you change the JPG quality setting. Using quality level 100 is like having 100 changes of clothes for 7 days. That’s crazy, and it’s a pretty safe bet that you can just dump half the suitcase and you’ll be okay. But what if you accidentally dump all your socks and don’t realize it? Or worse, what if you accidentally threw out all your underwear? The lower you go on the quality setting, the more clothes you’re tossing out, and the more likely that you will throw out something you need.
Careful Planning, Better Compression
The method that EWWW IO uses is quite different. Most folks won’t just randomly throw clothes out of their suitcase. You will most likely take your time to determine what you really need in that suitcase. If you’re going to be on the beach all week, maybe tossing all the socks is okay. You might check the weather forecast, and it’s going to be sunny and hot every day. So you can get rid of the pants and sweaters, and just bring shorts and tank tops. You might also get rid of tennis shoes if you only really need sandals. On the other hand, if you’re going hiking, you might decide not to bring your swimsuit and sandals.
If you don’t use EWWW IO, I’m okay with that, but please don’t settle for tossing out half your clothes. Pick a solid compression tool that will take good care of your images. That choice will pay for itself. And you won’t get to the beach with hiking boots and wool sweaters!
Some folks might still be a little intimidated by image compression, and we totally understand that. If you need help getting your images optimized, the folks at WP Buffs can help you take care of all your speed and image optimization needs.
