The Art of Compromise: How Lossy Compression Works

With the ever-increasing data generated worldwide, compressing digital assets for efficient delivery is a common practice almost anywhere. Digital assets like images and videos are compressed and optimized for various purposes, including file type changes, dimension editing, cropping, bit depth reduction, and more.

Image compression is especially important for images used on websites and applications, where loading speed and storage efficiency are critical. In this article, we’ll explore different tools for achieving lossy compression, a type of image compression technique, in Python using Cloudinary.

In this article:

• Lossy vs Lossless Image Compression
• Advantages and Disadvantages of Lossy Image Compression
• Tools for Lossy Image Compression
• Lossy Compress Images with Cloudinary

Lossy vs Lossless Image Compression

Lossy compression is a type of image optimization technique that reduces the file size of an image by permanently removing unnecessary information and details from the image. Some common examples of lossy compression image formats include JPEG, HEIC, WebP, glTF, JPEG 2000, and TIFF.

On the other hand, lossless image compression is an optimization technique that reduces the size of an image file without sacrificing any significant information or diminishing its quality. Lossless image compression works by removing unnecessary metadata or redundancy and reconstructing the information more efficiently. Examples of lossless compressed image file formats include PNG, BMP, and GIF.

Advantages and Disadvantages of Lossy Image Comprehension

Despite its popularity and wide adoption, lossy compression has its advantages and disadvantages. Knowing these can help you make an informed decision when compressing images for various use cases. Let’s go through some of them.

The Advantages of Lossy Image Compression

• Storage Saving. Since lossy compressed images have a smaller file size, they take up less storage space. This is a great advantage, especially for devices with limited storage capacity and for reducing cloud storage and data transmission costs.
• Faster Loading Images. Lossy images load considerably faster due to their relatively small file size (often by a 50-90% reduction of the original size) than lossless or uncompressed images. This can significantly impact users’ experience, as visitors to websites and applications do not have to wait long for images to load.
• Better SEO. Search engines favor websites with faster loading times, as this improves user experience. Lossy compressed images load faster, and websites that utilize them often achieve better SEO rankings.
• Widely Supported. Lossy image formats, such as JPEG and WebP, are widely supported across various platforms, browsers, and devices, meaning most users can view them without issues.

The Disadvantages of Lossy Compression

• Lossy Compression is Irreversible. When an image is compressed using a lossy compression algorithm, restoring the original image quality is impossible.
• Color Banding. Color banding is the appearance of distinct, visible bands of color in what should be smooth gradients. It may occur in areas of an image where the color transitions gradually, such as skies and shadows, resulting in posterization and loss of detail.
• It’s Not Suitable for All Image Types. Lossy compression works poorly for images with text, sharp edges, or intricate patterns due to the production of artifacts. This makes it a poor choice for graphics, logos, or professional images that require precise color reproduction and sharp, clean lines.

Tools for Lossy Image Compression

Numerous tools are available for lossy image compression, depending on your use case and skill level. Let’s take a look at some of the most common ones.

Browser-based

This category of tools is easy to use, with no installation required, and accessible from any device with a web browser. They are ideal for quick one-off file compression and offer basic interfaces that allow you to configure the compression process’s settings. However, these tools are also limited by scale–they’re usually only able to handle one file at a time or in small batches.

Software

These installable applications often provide more robust functionality and advanced features and control. They offer additional editing capabilities and are suitable for professional use and complex workflows but are usually tied to other functionalities, such as image editors or file converters. Some examples of these include Adobe Photoshop, GIMP, and ImageOptim.

Command Line Tools

If you’re more experienced and comfortable with writing complex scripts for automation and bulk processing of images, then you may want to consider this option. Far more advanced than regular software–and equally complex–these tools can offer much more flexibility and customization for lossy compression. However, they often have a steep learning curve if you’re not already familiar with the command line. Notable examples include ImageMagick, Pillow, and pngquant.

Libraries and packages

This option is ideal if you have programming language skills and want to integrate lossy compression into your software projects. With this method, you can programmatically control compression settings and modify them to your liking, build custom image processing pipelines, etc. Various libraries and packages are available for programming languages, such as Sharp for Node.js, Pillow for Python, ImageProcessor for C#, and many others.

Lossy Compress Images with Cloudinary

Image optimization is one of Cloudinary’s core features. Cloudinary allows you to optimize images by delivering them in different formats, dimensions, quality, or resolutions. One major advantage of Cloudinary over other libraries and packages is that it can be used in several popular programming languages through one of its many SDKs.

Cloudinary uses a robust and efficient algorithm to automatically deliver images of the highest optimal quality to your users when delivering your uploaded images. By default, Cloudinary compresses images using an optimal encoder to return a compressed image based on your use case or the end user’s device.

To use lossy compression with images in Cloudinary, we can use the lossy flag (or fl_lossy in URLs) in the transformation parameters of the image asset.

Let’s take the following image with a file size of ~480 KB, for example:

<https://res.cloudinary.com/demo/image/upload/cld-sample.jpg>

Now, adding the fl_lossy flag to the URL reduces the image to about ~420 KB:

<https://res.cloudinary.com/demo/image/upload/fl_lossy/cld-sample.jpg>

That’s about a 13% reduction in size.

But… We can get a better result.

Adding the q_auto and fl_lossy flags together will make Cloudinary use its built-in intelligent quality selection algorithm to compress the image to a smaller file size while still maintaining an acceptable quality.

Here’s the image with a size of ~245 KB. That’s a whooping ~49% reduction in file size!

<https://res.cloudinary.com/demo/image/upload/q_auto,fl_lossy/cld-sample.jpg>

Comparing this image with the original, you can tell it’ll take a lot of efforts to spot any differences between the two. This example highlights Cloudinary’s state-of-the-art compression algorithm, with which you can compress images more efficiently, while maintaining a level of quality that is virtually indistinguishable from the original to the human eye.

Wrapping Up

Lossy image compression is an optimization technique widely used in digital media, including images, video, and audio, to improve performance or achieve a specific goal. So far, we have explored what lossy compression entails and discussed its advantages and disadvantages. This comprehensive overview equips you with the knowledge to make informed decisions when compressing images for various applications.

Take your digital experience to the next level with Cloudinary’s powerful media optimization tools. Sign up for free today!