PNG tips for using PNG techniques

PNG format and transparency

This fireworks will be more clear, open the FIREWORKD optimization panel, you can clearly see the PNG has 3 different depths of the format: Png8, Png24, png32.

Among them, in the optimization panel select Png8, you can find Png8 including opaque, indexed color transparent, alpha transparent 3 formats.

PNG8

8-bit PNG supports up to 256 (2 of 8-square) colors, 8-bit PNG in fact 8 supports opacity, index transparency, alpha transparency.

PNG24

Support 2 of the 24-time color, expressed as opaque.

PNG32

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

In fact, PNG8 's 3 formats are opaque, indexed transparent, alpha transparent, just to classify all PNG formats:

"PNG opaque" format

"PNG index Transparent" format

"PNG Alpha Transparent" format

"PNG Opaque" format

When it comes to opacity, like the JPG format, "png opaque" can only be opaque, representing the format: "Png8 opaque" and "Png24", and the Export software is: Photoshop, Fireworks. The PNG opaque format is deprecated and it is recommended to use JPG images instead.

May have the reunion asked why Png24 is not transparent, I use Photoshop to come out is png24 ah?

Png24 is actually an opaque picture

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

Uncheck the transparency box, the transparent background of the picture will be filled with the default white

The PNG image is 24 bits in depth, the image is opaque and behaves like a JPG image.

If the transparency (alpha channel) is checked, a transparent image with a depth of 32 bits is exported

From the Photoshop store for the web All formats panel in this sense, png24 depth is actually 24 bits, and then check the 8-bit ALHPA channel, 24+8=32, namely "png32" = "Png24+alpha", This may be the reason why Photoshop software developers do not add the PNG32 bit format, for Photoshop to store a picture format selection for the Web All-format interface, and no PNG32-bit options ~

"PNG Index Transparent" format

When it comes to index color transparency, we can understand what is the index color, "PNG index transparent" represents the format "PNG8 index transparent", the export software is: Photoshop, Fireworks, its characteristics are summarized as follows:

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

can only be opaque or fully transparent

Small file size

With jagged edges

Support IE6

How to Export "Png8 index transparency" using Photoshop

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

Note: Using Photoshop to export the Png8 index transparency effect is better than fireworks export, which is not described using fireworks Export "Png8 index Transparent"

"Png8 Index transparency" causes jagged edges

"Png8 Index Transparent" has only transparent indexed colors, no translucent indexed colors, a picture with semitransparent pixels on the left, no aliasing in the browser, and a full transparent or opaque pixel on the right, and jagged after the browser opens.

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

How to avoid jagged edges with "Png8 index Transparent"

Method: Set the matte to the same color as the background color to achieve visual transparency.

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

How to set it up, open Photoshop, and in the Save for web format panel, select the color that matches the background color in the matte options.

"PNG Alpha Transparent" format

When it comes to alpha transparency, we can understand what the alpha channel is, "PNG alpha Transparent" stands for "Png8 Alpha Transparent" and "PNG32", and the export software has fireworks, which summarizes the following features:

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

Supports full transparency and translucency

"Png8 Alpha Transparent" file size is small

"Png8 alpha transparent" with raw edges under IE6

How to export "Png8 alpha transparency" using fireworks

Firewoks, in the optimization panel, the PNG8 alpha transparency can be exported according to the red border configuration like slices.

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

What kind of PNG is selected on the phone

Speaking of mobile phones, considering the problem of traffic is essential, the selected PNG needs to meet the small size and good visual effect, then which of the PNG format meets these 2 requirements? Let's do an experiment.

Different PNG format tests

Test platform: ios&android WebKit Browser

Test picture: Color species Sprite Figure 1230*82

Test content: The same sprite chart exports the size, transparency, matte, and contrast between the retina display and the normal display in different PNG formats

Test results:

From the visible png32 and png24 volume is too large, very consumption of mobile phone user traffic, not our choice of range, then you can lock the target in "Png8 Alpha Transparent" and "Png8 Index transparency", 2 contrast, you can see "Png8 alpha" on the phone side of the support is good, may have children's shoes will think, alone with a picture can not be concluded ~

And after the author uses more than one sprite to test the use of fireworks to export the "Png8 Alpha", on the phone side of the support is relatively good ~ not only the file volume is small, save traffic, and translucent effect is good

Thus, the mobile uses "Png8 alpha Transparent", believe that "Png8 alpha Transparent" is a trend in the future ~

What kind of PNG is selected on the PC side

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

Scenarios for using Png8:

Use Photoshop to open sprite charts, export a png32 and a "PNG8 index transparent" image, advanced browser use PNG32-bit images, use "Png8 index transparent" for IE6, and set "PNG8 index transparent" matte with background color to achieve visual transparency

Note: Why use PNG32 instead of "Png8 alpha Transparent"? Because the PC side of the internet is mostly good, it is recommended to use a better PNG image, obviously PNG32 is the most suitable, of course, you can also use "Png8 alpha Transparent", But the quality under the HD monitor is inferior to PNG32

. bg{

Background:url (global.png?v=20130530) no-repeat;

_background:url (global_png8.png?v=20130530) no-repeat;//ie6 using the background map

}

Scenarios for using IE filters:

Compare consumption performance, and there is no support background tile, resulting in link failure and other shortcomings, do not recommend the program, do not for IE and make yourself like ie~

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

In addition there are JS and patching method, here do not introduce, we are interested can Baidu under: IE6 support Png24

PNG format, color type, number of digits, transparency, browser support at a glance

PNG tips for using PNG techniques