Chances are, if you’re reading this, you know enough about image compression to know it’s worth researching, but not enough to answer the big question every beginner has: what’s the difference between lossy and lossless compression of images? Well, to put your mind at ease, here’s the short answer:
Lossless image compression has no loss in quality but bigger file sizes. Lossy image compression has a slight loss in quality but smaller file sizes.
Simple right? On the surface, sure, but the real differences between lossy and lossless compression get a bit more technical. How does each work? What’s kind of quality loss are we talking about? And, most importantly, which one is right for you?
In this article, we’re going to clear everything up once and for all, and even take a look at ShortPixel’s own exclusive option, glossy image compression. Below, we explain each in more detail, and offer some advice about when to use which.
Lossless Image Compression
As we mentioned above, lossless image compression has zero loss in quality. We mean that literally — every pixel in the compressed version is identical to the original. However, the cost is that the final file size is not as small as with like lossy.
So, how can an image compressor reduce the size of a file without affecting the image quality at all? Well, lossless image compression doesn’t change the file’s bits (binary digits in data code), only rearranges them in a more efficient manner. Think about it like loading boxes into a truck. An experienced packer knows the best ways to fit boxes together, so they’re able to fit more boxes in the same amount of space.
Another secondary benefit of this process is that the compressed data can be restored in the future. For example, if you decide later that you want to re-edit or modify the image, or you want to use part of it for another project, you can restore the file to its original form with no penalty. On the other hand, this advantage is moot if you’re using a tool like ShortPixel; we have an automatic backup function built into our plugin, so you can always restore the original no matter what type of compression you use.
Lossless image compression is the go-to choice for when image quality is the utmost priority. Even the highest-quality images can still reduce their file size with lossless image compression without affecting how they look, so no matter what, you can always reduce image sizes (and loading times) by choosing lossless.
Advantages:
– Retain full quality of images
– Can restore compressed data
Disadvantages:
– Smallest reduction in file size
When to Use It:
Because the amount of data reduction is small, the benefits of image compression like improving site speed and SEO are lessened. For this reason, lossless image compression shouldn’t be your first choice. This option is reserved for special scenarios, in which altering the image quality in any way is not an option, or if you plan on restoring the file in its entirety later.
Lossy Image Compression
The other, more popular image compression choice is lossy. With lossy image compression, we see dramatic reductions in file size — up to 90% with ShortPixel — and only minimal changes in image quality, sometimes even imperceptible. This massive benefit at a minor cost makes lossy image compression the most common option.
Unlike lossless image compression, lossy image compression deletes part of the original data bits in order to reduce the file size. Usually this data is negligible, such as waste created during image processing, but different image compressors pull data from different areas. For example, some compressors’ algorithms reduce quality in the image background without altering the image’s focal points at all. This leads to more significant file reduction, but unfortunately the compressed file can not be restored later. Again, this doesn’t affect our users because of the automatic backup.
Advantages:
– Significant reduction in file size, leading to faster loading times and improved SEO
– Image quality is (mostly) retained, so your images still look great
Disadvantages:
– Files cannot be restored later
– The more the file is compressed, the higher the risk of perceptible differences
When to Use It:
Virtually any site or any industry can take advantage of lossy image compression. Since all sites use images, they can all benefit from reduced file sizes for improving site performance. And because the loss of image quality is rather small, it won’t affect the user’s experience. The only exception may be photography blogs or other sites where visuals are prioritized; sites like these must balance both image quality and how file sizes affect loading times. For these sites, we recommend a third option, halfway between lossy and lossless compression:
Glossy Image Compression
An option available exclusively at ShortPixel, our glossy image compression provides the perfect compromise between lossy and lossless compression, retaining optimal image quality and reducing file sizes enough to make a difference.
To pin it down, we designed our glossy feature specifically for photography bloggers, although any site that prioritizes visuals can benefit from it. For these sites, image quality is crucial; the images are, after all, the focal point of their sites, so the better the images look, the more successful the site is. The downside, of course, is that photography blogs feature a lot of high-quality images that have enormous file sizes. Each one of these mammoth files weighs down the site loading times, which has disastrous effects on the user experience, not to mention harms the Google Insights score.
So, we designed the glossy feature to offer the best of lossy and lossless compression combined: compressed images with better quality than lossy image compression, but with smaller file sizes and faster loading times than lossless image compression.
Advantages:
– A middle ground between the advantages of both lossy and lossless compression
Disadvantages:
– File reduction is not as much as lossy. Image quality isn’t as high as lossless
When to Use It:
Glossy is the ideal choice for any site that revolves around visuals, but still needs the advantages of a faster loading times. Some examples of those who benefit most from glossy image compression are:
– photography blogs
– portfolio sites (design agencies showcasing past works)
– digital artists
– webcomics
– tourism sites (which use photos for marketing)
– social media professionals
Before deciding on glossy, consider how many images you have on your site, and how they look with lossy image compression compared to glossy.
Bonus: Glossy, Lossy, Lossless comparison
So, What’s the Difference Between Lossy and Lossless Compression?
Perhaps it’s the easiest to understand the differences by looking at all three options as degrees of a spectrum.
Lossy ——- Glossy ——- Lossless
On the left, you have the biggest loss in file size, but also the biggest loss in image quality. The farther you go to the right, the more both the image quality and file size rise.
In a nutshell, lossy image compression works best for most sites since it offers the biggest reduction in data, and with minimal effect on image quality. For sites that value visual integrity more than average, glossy is the best option. And for those few exceptions when image quality cannot be affected at all, lossless is the way to go.
See for yourself how ShortPixel can improve your site speed, SEO, Google Insights ranking, and user experience.
Sign-up for free, or download our freemium WordPress plugin now!
Image credits
Dawid Małecki, Artem Beliaikin, Nathan Dumlao, June Liu, Dominik Scythe
(From Unsplash.com)