Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression. PNG (pronounced ping as in ping-pong; for Portable Network Graphics) is a file format for image compression that, in time, is expected to replace the Graphics Interchange Format (GIF) that is widely used on today's Internet.PNG is the most widely used loss less image compression format on the Internet.
PNG supports
palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors),
grayscale images (with or without alpha channel for transparency), and
full-color non-palette-based RGB/RGBA images (with or without alpha channel).
PNG was designed for transferring images on the Internet, not for
professional-quality print graphics, and therefore does not support non-RGB
color spaces such as CMYK. A PNG file contains a single image in an extensible
structure of "chunks", encoding the basic pixels and other
information such as textual comments and integrity checks.
HOW PNG IMAGE WORKS:
The Portable
Network Graphics (PNG) has become a staple for App development over the past
few decades. It’s creeped up everywhere from game development, to web
development, and Android development, which means that it’s widely adopted, but
also has the opportunity to be widely abused.
And as I’ve
discussed before, PNG provides a nice, high resolution image format, but that
means that there’s lots of room for improvement for data compression. But
before we can start talking about how to compress PNG files further, we have to
first talk about how the format works.
#.Understanding the Compression:
PNG’s
compression process is entirely lossless; meaning that the compressed file can
reconstruct the source image exactly. Done in two stages :- Filtering and then
Compression.
1.Filtering (prediction).
Delta
encoding is one of the most powerful numeric compression methods out there. The
basic idea is that you can represent any value as a difference from the
previous value. So,
[2,3,4,5,6,7,8]
can become [2,1,1,1,1,1,1], where
[2, 3–2=1,
4–3=1, 5–4=1, 6–5=1, 7–6=1, 8–7=1]
The reason
this is so powerful, is that if the data is linearly correlated (that is, value
has some low-difference from the previous value) then you end up transforming
values of your dataset into lots of duplicate, low values, which are more compressible.
The PNG
format makes use of delta encoding in a format that it calls “filtering”.
Basically, for each scan-line of pixels, a current pixel is encoded in some
relation to the pixel to the left, the pixel above, and the pixel above-left.
2.Compression (DEFLATE).
Once
filtering has occurred on a scan-line, it’s passed off to a descendant of the LZ77
algorithm, known as DEFLATE. This algorithm combines LZ77 coding alongside a
Huffman coder. Which is almost identical to compressors like PKWARE, PKZIP,
GZIP etc. The implementation is out-of-the-box standard, but has some
interesting caveats when it comes to image data.
Deflate
limits match lengths between 3 and 258 symbols; which puts the maximum conceivable
compression ratio around 1032:1.
If the match
is less than 3 symbols, then you incur some overhead to represent the symbol.
The result
of these two, means that the size of your image can have an impact in if
matches are found in a scan line.
Consider
this image below, The 270x90 version is only 20k, however the 270x92 version is
2x larger.
Logically
this seems wrong. Adding 540 pixels to an image shouldn’t cause a 2x bloat in
compression. However when we look a little closer, we can see why this is occurring.
The following heat map of the images represents how compressed a given pixel
is. Deep blue = very compressed, yellow/red = not very compressed
What’s
occurring here, is that in the smaller image, there’s more matches in the
scanlines, and thus there’s better compression. However, adjusting the size,
slightly, changes the type of matching that can occur; some potential
candidates for matching are now outside of our LZ window, and thus aren’t
matched, resulting in a larger file.
If you’re
looking to see how well your own images compressed with PNG, check out PNG Thermal.
#.Understanding the
format:
Now, it’s
worth noting that PNG is more than just the filtering & compression stages.
It’s a pretty extensible container format, that can support all sorts of image
types and added data.
Let’s first
start with the fact that the PNG file format can support a series of chunks
inside of it which can include various types of data. For example, you’ve got
the PNG Header chunk which contains simple information about the image like
width, height, bit depth & color-type.
The Image
data chunk contains the actual image information itself (oh, and note, this
information can exist in multiple chunks). Then for color paletted images,
there’s a separate chunk for that.
#.Pixel format:
The PNG
format can ALSO support various types of pixel formats so you can create an
optimal
Indexed = 1
channel, can be 1,2,4,8 bpc
Grayscale =
1 channel, can be 1,2,4,8,16 bpc
Gray+Alpha =
2 channel, can be 8 or 16 bpc
Truecolor(RGB)
= 3 channel, can be 8 or 16 bpc
RGBA = 4
channel, can be 8 or 16 bpc
Pixel
formats are selected by the author of the image file. So it’s not too
interesting to discuss, other than making sure you’ve chosen the right pixel
format; Storing a greyscale image as a truecolor w/alpha is a bad idea.
ConversionConversion EmoticonEmoticon