Shulou(Shulou.com)06/03 Report--

The main content of this article is to explain "in-depth understanding of PNG pictures", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "learn more about PNG pictures".

1. PNG picture type

There are 8-bit, 24-bit, and 32-bit PNG formats. Here are some terms:

Index transparency: similar to GIF, a pixel has only two effects: full transparency and full opacity. Alpha transparency: translucent PNG8

8-bit PNG supports up to 256 colors (to the power of 2), and 8-bit PNG supports index transparency and alpha transparency.

PNG24

Supports 2 to the power of 24 colors, but does not support transparent information.

PNG32

The 32-bit PNG adds 8-bit transparent information to the 24-bit PNG, so it supports varying degrees of translucent effects.

Summary

Format color category number of digits transparent support PNG82 to the power of 8 does not support PNG8+ index transparency 2 to the power of 8 only supports full or fully opaque PNG8+alpha transparency 2 to the power of 8 supports translucent PNG242 to the power of 24 does not support PNG322 to the power of 32 supports translucency

2. Graphics processing software Fireworks

In Fireworks, all the above-mentioned formats PNG can be generated correctly, as long as you select the corresponding format in the OPTIMIZE panel.

Photoshop

In Photoshop (abbreviated as PS), the choice of PNG format can be achieved by selecting Save for Web & Devices from the File menu. Note:

PS does not support the 8-bit PNG+alpha transparent format; there is no 32-bit PNG option in PS, but the PNG24+ transparency is actually PNG32.

3. Browser support

IE6 does not support the translucent effect of PNG8 and PNG32. The translucent problem of PNG32 can be solved by using filter, but it can not be solved by PNG8.

Let's test the browser's support for transparent PNG, where IE6 uses a filter to load PNG images. Other browsers use img tags. After experiments, it is found that the performance of non-IE6 browsers is consistent, but IE6's support for PNG8+alpha transparency is not good enough, and the translucent part of the image is processed completely in a fully transparent way. The test results are shown in the following figure:

4. Summary

The 1.PNG format comes in three forms: 8-bit, 24-bit, and 32-bit.

8-bit PNG supports two different forms of transparency (index transparency and alpha transparency)

24-bit PNG does not support transparency

32-bit PNG adds 8-bit transparent channels to 24-bit, so it can show 256 levels of transparency.

two。 Image processing tool

Photoshop: PNG8+alpha transparent PNG is not supported or exported

Photoshop:32-bit PNG output is output in the form of 24-bit PNG plus transparent information

Fireworks: good support for PNG.

3. Browser support

Non-IE6 browsers can normally display PNG images containing transparent information (including index transparency and alpha transparency).

With the help of the filter, IE6 can PNG32 the transparent PNG image under IE6, regardless of whether the filter is used or not, the translucent part is processed completely in a fully transparent manner.

IE6's support for PNG8+alpha transparent images is not good enough.

At this point, I believe you have a deeper understanding of "in-depth understanding of PNG pictures", you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.