Our values to be saved now look like this and are now much better to compress: In our example, it is noted for each line that the filter "Sub" was used. This step can be reversed afterwards, so no data is getting lost. On each line you could use the filter "Sub" (one of 5 possible filters), which means that we simply remember the difference to the previous value. Let's take a look at the red values of a 5x5 px image: The red tones. So, by pre-filtering, you try to generate the same data from different data. Step 1: Pre-filteringĭata can be compressed best if it is repeated as often as possible. The compressionĪ PNG is compressed in three steps: pre-filtering, dictionary-based coding via LZ77, and finally entropy coding according to a certain Mr.
Now we know what color depths mean and how we can calculate the file size of an uncompressed image, but the data still occupies a lot of space and needs to be compressed accordingly. The first, smaller PNG is an 8-bit PNG, while the larger PNG is a 32-bit PNG. This is one of the reasons why the first PNG with the balls is smaller than the other. The three color depths here once again in a short overview: 8-bit PNG Therefore, this is the most significant color depth in the area of PNG compression. However, with such a picture, you are limited to a maximum of 256 colors, but this is more than enough for the majority of the images for which it makes sense to save them as PNGs. Thus, to store a pixel, you only need 1 byte of memory for the position of the color in the palette. Here, up to 256 colors are defined with their red, green, blue and transparency information in a so-called palette, and for each pixel just the position of the color in the palette will be stored. You have to select "PNG-24" and mark the checkbox with the name "transparency".Īn 8-bit PNG works a bit differently. Thus, an image may also include transparent regions in 256 gradations.īy the way, Photoshop does not show a selection box for 32-bit PNGs in the "Save for Web. The two other color depths that you will run across when you are puzzling with the PNG image format are 32-bit and 8-bit:Ī 32-bit PNG is similar to a 24-bit PNG, but it also contains an additional 8-bit channel for transparency information (usually called alpha channel). The depth of color thus means the memory consumption of a pixel. Since, however, there are color depths other than 1 byte per channel, the designation 24-bit picture (that is, 3x8-bit picture) has been used for an image, because 1 byte is composed of 8 bits. I you wanted to label the color depth, you could speak of a 3-byte image. This is also pretty much the size of an uncompressed BMP image (and incidentally the size of a 3.5 " HD floppy disk. If you now have a 800 x 600 px large image, this results in a memory consumption of 800 x 600 x 3 byte = 1,440,000 B = 1.44 MB. With a memory consumption of 3 bytes, an entire pixel can be displayed (1 byte each for red, green and blue). And one byte can represent exactly 256 values. Most of your images will be in the RGB color model (as is our example image), and thus one pixel of your image consists of the three colors (or color channels) red, green, and blue, each of which can have 256 gradations.Ģ56 increments, because each color of a pixel should be represented by the memory consumption of 1 byte. In the course of the article, I will continue to work with this image and bring you closer to the subtleties that lead to this fact. Take a look at these two balls-pictures: 4,492 Bīoth images look the same, have the same width and height, both are PNGs, but the file size is significantly different. In order to be able to compare file sizes resulting from the use of different tools (, Photoshop, TinyPNG and Co.), I would like refer you to the section Comparable file sizes in the JPG article.
This time however I would like to explain the functionality of a PNG and will show you at the end of the article how you can reduce the file size of your PNGs with the help of Compress-Or-Die (that I will call COD in the rest of the article).Īs with the previous article, I will present some aspects in a simplified way if it facilitates understanding, because no one is helped by mathematician buzzword bingo and few of those who would like to reduce their image sizes are mathematicians, but more likely webworkers or digital advertising specialists. This article is the follow-up article to Finally understanding JPG, which I would like to recommend to anyone who would like a deeper but generally understandable introduction to JPG compression.
0 kommentar(er)
