PNG format type and application instance use

format and transparency of PNG

This fireworks will be clearer, open the FIREWORKD optimization panel, and you can clearly see that PNG has 3 different depth formats: PNG8, PNG24, PNG32.

Figure 01

Where you select PNG8 in the Optimization panel, you can find that PNG8 includes opaque, indexed transparent, alpha transparent 3 formats.

Figure 02

PNG8

8-bit PNG supports a maximum of 256 (2 8) colors, and 8-bit PNG actually 8 supports opacity, index transparency, and alpha transparency.

PNG24

Supports 2 of the 24-time color of the square, showing opacity.

PNG32

Support 2 of the 32-time color, 32-bit is our most commonly used format, it is in PNG on 24-bit PNG based on the addition of 8-bit transparent information to support a different degree of semi-penetration effect.

In fact, PNG8 's 3 formats are opaque, indexed transparent, alpha transparent, and all of PNG's formats are sorted:

PNG opaque format

PNG Index Transparent format

PNG Alpha Transparent format

PNG opaque format

When it comes to opacity, as in JPG, PNG opacity can only be opaque, representing the format: "PNG8 opaque" and "PNG24", and the Export software is: Photoshop, Fireworks. It is not recommended to use the PNG opacity format, and it is recommended that you replace it with a JPG image.

There may be students asked why PNG24 is opaque, I use Photoshop to guide the PNG24 ah?

　PNG24 is actually an opaque picture

Open Photoshop, open a transparent PSD file, and store it in all Web formats (ctrl+shift+alt+s), as shown in the following panel:

Figure 03

Without checking the transparency radio box, the transparent background of the picture will be filled with the default white

Figure 04

The PNG image has a depth of 24 bits and is opaque, similar to a JPG image

Figure 05

If transparency (alpha channel) is selected, transparent pictures with a depth of 32 bits are exported

Figure 06

　　"PNG8 index transparency" produces edge-jagged causes

From Photoshop to the Web All format panel in this understanding, the PNG24 depth is in fact 24 bits, and then check the 8-bit ALHPA channel, 24+8=32, that is, "PNG32" = "Png24+alpha", This may be why Photoshop software developers do not add the PNG32 bit format, the following figure is a selection of picture formats that Photoshop stores for all format interfaces of the Web, and no PNG32 options ~

Figure 07

　　PNG Index Transparent format

Speaking of index color transparency, we can understand what is indexed color, "PNG index Transparent" representative format has "PNG8 index transparency", the export software has: Photoshop, Fireworks, its characteristics summarized as follows:

Select the most representative number of colors in a picture (usually no more than 256 species)

can only be opaque or fully transparent

Small file size

With Edge Sawtooth

Support IE6

How to Export "PNG8 index transparency" using Photoshop

Figure 08

Use Photoshop to store all formats for the web, and to export PNG8 index transparency, as shown in the red border of the following picture

Note: Using Photoshop to Export "PNG8 index transparency" works better than fireworks exports, and this does not describe using fireworks to export "PNG8 index transparency"

PNG8 index transparency has only transparent indexed colors, no semi-transparent indexed colors, and a picture with semitransparent pixels on the left, and no jagged in the browser, while the right picture is a fully transparent or opaque pixel and has a jagged edge when the browser is open.

Figure 09

Because "PNG8 index transparency" does not have a semitransparent indexed color, when you export using Photoshop, the original semitransparent is converted to opaque, resulting in aliasing.

Figure 10

　　How to avoid "PNG8 index transparency" Edge aliasing

Method: Set the clutter and background color color consistent to achieve visual transparency.

Believe that it is not difficult to understand, using the edge and background color consistent, you can meet the visual transparency, the disadvantage is only to adapt to a background color, in other background color will also produce miscellaneous edge.

Figure 11

Figure 12

How to set it up, turn Photoshop on, and in the store for the web Format panel do the following to select a color consistent with the background color in the miscellaneous options.

Figure 13

PNG Alpha Transparent format

When it comes to alpha transparency, we can see what an alpha channel is, "PNG alpha Transparent" represents "PNG8 alpha transparency" and "PNG32," and the export software has fireworks, which is summed up as follows:

A 8-bit grayscale channel that uses level 256 grayscale to record transparency information in an image, defining transparent, opaque, and translucent areas

　Supports full transparency and translucent

"PNG8 Alpha Transparent" files are small in size

"PNG8 Alpha Transparent" has burrs under IE6

How to export "PNG8 alpha transparency" using fireworks

Firewoks, in the Optimize panel, you can export PNG8 alpha transparency by using the red border configuration of the following picture.

Note: Firewoks supports exporting "PNG8 alpha transparency" and Photoshop does not support exporting "PNG8 alpha transparency"

Figure 14

Figure 15

　What kind of PNG does the mobile phone choose?

Speaking of mobile phones, considering the flow of the problem is essential, the selected PNG needs to meet small size and good visual effect, then which PNG format to meet these 2 requirements? Do an experiment.

Different PNG format test

Test platform: ios&android WebKit Browser

Test Picture: Color Snow Blue Map 1230*82

Figure 16

Test content: The same sprite chart exports the size, transparency, clutter of different PNG formats, and the comparison between the retina display and the normal screen

Test results:

Figure 17

From the above figure can be seen PNG32 and PNG24 volume is too large, very consuming mobile phone user traffic, not the range we choose, then you can lock the target in the "PNG8 Alpha Transparent" and "PNG8 Index Transparent", 2 contrast, you will see "PNG8 Alpha" on the phone side of the support is good, may have children's shoes will think, alone a picture can not be concluded ~

And after the author uses a number of snow blue chart after the use of fireworks export "PNG8 alpha", in the mobile phone side of the support is relatively good ~ not only small file size, save flow, and translucent effect is good

Hence, the mobile end uses "PNG8 alpha Transparent", believe that "PNG8 alpha Transparent" is a trend of the future ~

　What kind of PNG does the PC side choose?

What kind of PNG is used on the PC side, in fact, this topic is very early conclusion, here is a brief introduction.

Scenarios for using PNG8

Use Photoshop to open Sprite map, export a PNG32 and a "PNG8 index transparent" picture, advanced browser use PNG32 bit picture, for IE6 use "PNG8 index Transparent", and set "PNG8 Index transparent" miscellaneous edge and background color color consistent to achieve visual transparency

Note: Why use PNG32 instead of "PNG8 alpha transparency"? Because the PC end of the network is mostly good, it is recommended to use a better performance of PNG pictures, obviously PNG32 is the most appropriate, of course, you can also use "PNG8 alpha Transparent", But the quality under the HD monitor is inferior to PNG32

Figure 18

. bg{Background:url (Global. png?v=20130530) No-repeat; _background:url (global_png8.png?v=20130530) no-repeat;//ie6 used background Map}

　Scenarios for using IE filters

Compared to the consumption performance, and there is not support background tiles, resulting in the failure of links and other shortcomings, do not recommend the scheme, do not for IE and make themselves like ie~

. Bg{filter:progid:dximagetransform.microsoft.alphaimageloader (src= "img"). PNG ", sizingmethod=" scale ");}

In addition, there are JS and patching methods, here do not introduce, we are interested in Baidu under: IE6 support PNG24

PNG format, color type, number of digits, transparency, browser support overview

Figure 19

Classification:

• PS Getting Started tutorial