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.
“Total Kilobytes” taken from HTTP Archive.“Image Bytes” taken from HTTP Archive.
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 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.
On the left, you can see the result of very strong lossy compression. The right side is much less compressed.
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.
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.
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.
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.
Here's an example of a logo with sharp color changes compressed with the medium JPEG setting in Photoshop. Size: 29.6KB.This is a PNG version of the same image. Much better quality. Size: 18.47KB.
Lossless does not mean uncompressed. For example, a BMP (uncompressed bitmap image format) with dimensions of 64x64 (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?
While working with image manipulation software, you can save an image to PNG manually.
Here’s what saving to PNG looks like in Photoshop.
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.”
An example of online image conversion with adjustable parameters, etc.
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:
A screenshot taken from the Uploadcare Transformations documentation representing different compression results.
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.
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.
The results produced by Uploadcare Smart Compression compared to regular compression.
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 a free account to test it yourself, or explore our documentation to get more technical information.
