Nowadays, it would be a challenge to find someone involved with website/web-app/web-product development who doesn’t know how important it is to have a fast-loading and well-performing website. While loading speed depends on various factors, there’s a reason why we want to exclusively address image compression in this article.
According to data taken from HTTP Archive as of August 1, 2020, the average or, to be more precise, the median amount of total data requested by a webpage is 2098 kilobytes, where 1004 kilobytes are responsible for transferring images for that specific page.
That doesn’t mean that all websites are almost 50% images in terms of network data payload. The data includes both poorly and perfectly optimized websites, as well as those rare ones that don’t have images at all. Still, there’s one important fact that can be gleaned from the data: image size matters, and that’s where image compression comes into play.
In this article, we’re going to talk about lossless image compression. To better understand what this type of compression prevents us from losing, let’s talk about its opposite.
Lossy Image Compression: A Quick Overview
Lossy compression refers to a method of compressing digital data, in this case image data, where some of the data of the source file is lost. You’ve probably seen images on the web that are distorted by big, fat, washed-out pixels.
The main advantage of this type of compression is file size. The more compressed the image is, the less data needs to be transferred over the network.
But what if we have a sharp and clean website logo that we want to keep intact? In that case, sacrificing the visual experience just to get a few extra milliseconds seems to be a bad deal. But all is not lost: let’s see what lossless image compression has to offer.
Lossless Image Compression
This type of compression refers to a set of image compression algorithms which do not affect image quality, while still providing more optimal results in terms of file size. When applied to the whole world of media (not only images), it means that the initial data could be perfectly restored from the compressed version.
Formats
There are several lossless formats out there. Here are two of them that are widely used on the web:
- PNG. Since its invention in the late 90s, this format has been widely used in a number of applications, including web browsers. Unlike lossy JPEG, it supports transparency.
- WEBP. A relatively new player in the game. Developed by Google, it’s positioned as a good replacement for PNGs. It supports lossy and lossless compression types and works with alpha channel data. It already has wide native browser support, but one notable gap is Safari, which is slated to support it in version 14, expected in September 2020. Also, older browsers may have problems displaying it.
Use Cases
As we mentioned earlier, lossless compression is typically used in situations where it’s crucial to maintain the highest image quality possible. For example, website images with big dynamic/color range or transparency. Sharp color transitions are sensitive to compression, which is why it’s important to preserve as much data as possible to provide that sharpness on your website.
A Note on Terminology
Lossless does not mean uncompressed. For example, a BMP (uncompressed bitmap image format) with dimensions of 64×64 (a total of 4,096 pixels) will always contain the same amount of data, even if there’s only one color.
In contrast, simply put, lossless formats like PNG look for patterns. In other words, why encode the same color for each pixel when the same value can just be duplicated via a compression algorithm?
How to Implement Lossless Compression
While working with image manipulation software, you can save an image to PNG manually.
Alternatively, there are various tools on the web for performing lossless image compression online. Below is a screenshot of one of the websites found as a result of searching for “convert to png online.”
Automated Solution
The above solutions can be useful for individual image compression, but what if you already have a large set of images? Of course, it’s possible to do a batch image conversion and then upload them to your website. While that may sound pretty straightforward, a few problems may occur:
- Changing format/compression level would require you to manually change it and then upload.
- Not all images are made equal. Compression types and parameters that do a good job with graphics may not work well with photos.
To help you avoid the headache, we at Uploadcare included an automatic image compression feature in our toolkit. Let’s see an example:
Automated Image Parameters Detection
With Uploadcare, there’s no need to upload new images for every occasion. It works with image files that have already been uploaded to your Uploadcare account, and returns new versions without altering the source files. The example above is a demonstration of how the “auto” conversion mode works. With this enabled, the system will automatically detect the image parameters and the visitor’s device capabilities to deliver the most optimal file.
“Lossless-ish Lossy Compression”
Another important feature to mention is the “smart” quality mode. For a big portion of visual assets, having 100% pure lossless compression is not a strict requirement.
“Smart” mode is a content-aware setting. When converting to lossy JPEG or WEBP, the mode automatically adjusts the format and compression settings to preserve visual quality while minimizing the file size.
Bottom Line
Lossless compression has its own niche and use cases, and the same is true for lossy compression. Using optimal compression settings, image size, and format is the key to good image loading speeds. Since Uploadcare Image Compression was made specifically for that purpose, why not see how it works in practice? Sign up for our free 14-day trial to test it yourself, or explore our documentation to get more technical information.
