Let us begin by addressing the title of this blog - PNG is supposed to be a lossless image format which can only have lossless compression, correct ?
If you came in here with this understanding you are correct, since PNG employs a lossless technique we do not have tools like chroma subsampling at our disposal to compress the pristine/source image. However PNG can be compressed in a "lossy" manner if you downsample colors per channel.
Color Quantization - This is the technique that allows us to reduce the file size of a PNG image file. Assuming the source image was created at 24 bit color depth(8 bits/pixel) we could bring this down to 65K colors or even all the way down to 256 colors. For most types of image file you would hardly notice any differences, one key reason being our vision is much more sensitive to luminance/light/brightness than color ( Read more about color in this blog - https://coderevere.com/single-blog.php?blog=colorspacemodel ).
This is the primary technique that tools like TinyPNG use to reduce the file size of a PNG file. By reducing color information using techniques like quantization technique the file sizes drop significantly in most cases. These tools not only help reduce file sizes but do it while ensuring they preserve transparency.
I used Image Magick to reduce the file size of the logo of this website, leveraging the color reduction technique mentioned above.
Original file :
1-bit :
2-bit :
4-bit :
8-bit :
16-bit :
As you can see from the results above, this logo in its original/pristine form is quite easy to color quantize considering its blocky nature, sharp edges and minimal colors. Almost all the outputs look the same, hardly any difference to the naked eye apart from the 1 bit monochrome output. For a more complex image though the differences would become noticeable much earlier at the lower depth outputs. We will run another image through the same process to show you how the color reduction has a different impact on different kinds of images.
Commands used to compress using Image Magick -
file command used on macOS to print a summary of the output PNG files -
This beautiful beach capture is a much more complex image, let us run it through the same color filters -
Original file :
1-bit :
2-bit :
4-bit :
8-bit :
16-bit :
You can see this image behaves differently when color reduction is applied considering the complex details it contains. At 8-bit is where it starts to show minimal visible differences, slightly improves at 16-bit, however if you were to stare into the sky portion of the image you will see visual degradation when compared to the original picture.
Moving up the ladder - from indexed color images to true color images you would see varying gains in compression/byte reduction as well as varying degree of degradation depending on the complexity of the image (we will discussed indexed color and true color in detail in a separate blog).
0 Comments