[Original] PNG usage tips

PNG is an image file storage format. It is not a strange term in web design. It is often used in front-end development, such as CSS Sprites. The usage of PNG is not just that. What are the formats and features of PNG? What are the commonly used PNG formats on the PC end? What is the most suitable PNG format on the mobile phone end? If you have any questions about these questions, I am very happy to tell you the answer you need (* ^__ ^ ......

This article was originally to be published last week. Later, I went back to my hometown and returned to Shenzhen this week. It was postponed until today ~

I will not talk about it anymore. Read the article ~~

Directory:

• PNG format and transparency
• [PNG opacity] format
• Png24 is actually an opaque Image
• [PNG index transparency] format
• How to use Photoshop to export "png8 index transparency 』
• [Png8 index transparency] reasons for generating duplicate Edges
• How to avoid the cross-edge aliasing of [png8 index transparency]
• [PNG Alpha transparent] format
  • How to use fireworks to export [png8 Alpha transparency]
• Which PNG is selected on the mobile phone end?
• Which PNG is selected on the PC end?
• PNG format, color type, number of digits, transparency, browser support Overview

PNG format and transparency

This fireworks will be clear. Open the fireworkd optimization panel and you can see that PNG has three different depth formats: png8, png24, png32

On the Optimization panel, select png8. You can find that png8 includes three formats: opacity, index transparency, and Alpha transparency.

Png8

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

Png24

Supports the 2's 24 power color and is not transparent

Png32

Supports the 32-bit power of 2. The 32-bit format is the most commonly used format. It adds 8-bit transparent information on the basis of the 24-bit PNG, support for different levels of transparent Effects

 

In fact, the three formats of png8 are not transparent, the index is transparent, and the Alpha is transparent. All formats of PNG are classified as follows:

• [PNG opacity] format
• [PNG index transparency] format
• [PNG Alpha transparent] format

Please refer to the following link for more information ~

 

[PNG opacity] format

When it comes to opacity, just like JPG, "PNG opacity" can only be opaque, representing the formats: "png8 opacity" and "png24". The export software includes: Photoshop and fireworks. We do not recommend that you use the "PNG opacity" format. We recommend that you use a jpg image instead.

Some colleagues may ask why png24 is not transparent. I use Photoshop to export png24?

Png24 is actually an opaque Image

Open Photoshop, open a transparent PSD file, store it in all web formats (CTRL + Shift + ALT + S), as shown in the following panel:

If the transparency check box is not checked, the transparent background will be filled in white by default.

The depth of the exported PNG image is 24 bits, and the image is not transparent, similar to that of the jpg image.

If the alpha channel is selected, the exported depth is a 32-bit transparent image.

From the panel where Photoshop is stored in all web formats, the depth of png24 is actually 24 bits, and then select the alhpa channel with the last 8 bits, 24 + 8 = 32, [png32] = [png24 + Alpha]. This may be the reason why the Photoshop software developer does not add the png32-bit format. Select the image format for the Photoshop storage as the image format on all web interfaces, there is no png32-bit option ~

[PNG index transparency] format

When it comes to index color transparency, we can understand what index color is. "PNG index transparency" indicates the format of "png8 index transparency". The export software includes Photoshop and fireworks, which are summarized as follows:

• Select one of the most representative colors (usually no more than 256)
• It can only be opaque or fully transparent
• [Png8 index transparency] Small File Size
• [Png8 index transparency] produce cross-edge sawtooth
• [Png8 index transparency] supports IE6

How to use Photoshop to export [png8 index transparency]

Use Photoshop to store all web formats. You can export the png8 index transparency according to the red border configuration of the slice.

Note: The effect of using Photoshop to export [png8 index transparency] is better than that of fireworks export. Here we do not introduce using fireworks to export [png8 index transparency]

[Png8 index transparency] reasons for generating duplicate Edges

[Png8 index transparency] only transparent index color, no translucent index color, the left side of the image with translucent pixels is shown below, and there will be no sawtooth when opened in the browser, the image on the right is a fully transparent or non-transparent pixel, and the image on the right is jagged after the browser is opened.

Because the [png8 index transparency] does not have a translucent index color, the original translucent indexes are converted to opacity when exported using Photoshop, resulting in sawtooth.

How to avoid the cross-edge aliasing of [png8 index transparency]

Method: Set the color of the complex and background to be visually transparent.

I believe it is not hard to understand that the use of complex edges is consistent with the background color to meet the visual transparency. The disadvantage is that only one background color can be adapted, and other background colors will also generate complex edges.

How to Set it? Open Photoshop and perform the following operations on the panel where the storage is in Web format:

[PNG Alpha transparent] format

Speaking of Alpha transparency, we can understand what an alpha channel is. "PNG Alpha transparency" indicates the formats of "png8 Alpha transparency" and "png32". The export software has fireworks, which is summarized as follows:

• An 8-bit grayscale channel that records the transparency information in an image with a gray level of 256, defining transparent, opaque, and translucent Areas
• Fully transparent and translucent
• [Png8 Alpha transparent] Small File Size
• [Png8 Alpha transparent] with edges under IE6

How to use fireworks to export [png8 Alpha transparency]

In firewoks, The png8 Alpha transparency can be exported Based on the red border configuration of the image on the optimization panel.

Note: firewoks supports exporting [png8 Alpha transparency]. photoshop does not support exporting [png8 index transparency].

 

 

Which PNG is selected on the mobile phone end?

Speaking of mobile phones, it is essential to consider traffic issues. The selected PNG must meet the needs of small sizes and good visual effects. Which PNG format meets these two requirements? Create an experiment ~

Test in different PNG formats

Test Platform: IOS & Android WebKit Browser

Test image: SPRITE color image 1230*82

Test content: the size, transparency, and miscellaneous of different PNG formats are exported from the same selenium graph, and the comparison between the retina display and normal display

Test results:

It can be seen that png32 and png24 are too large to consume mobile phone user traffic, which is not the scope of our selection. Then we can lock the target in [png8 Alpha transparency] and [png8 index transparency, comparing the two, we can see that [png8 Alpha] has good support on the mobile phone end. Some children's shoes may think that one picture alone cannot draw conclusions ~

The [png8 Alpha] exported by fireworks after I use multiple photos of the snow green map test, the support on the mobile phone end is relatively good ~ Not only is the file small, it saves traffic, but it also has a good translucent effect.

So,The mobile end adopts [png8 Alpha transparency]I believe that [png8 Alpha transparency] is a trend in the future ~

 

Which PNG is selected on the PC end?

Which PNG is used on the PC end? In fact, this topic has come to a conclusion very early. Here is a brief introduction.

Png8 solution:

Use Photoshop to open Sprite and export a png32 image and a [png8 index transparency] image respectively. The advanced browser uses the png32-bit image and the [png8 index transparency] For IE6. and set the [png8 index transparency] To be visually transparent when the color of the background color is the same as that of the background color.

Note: Why do I use png32 instead of [png8 Alpha transparency]? Because the network speed on the PC side is mostly good, we recommend that you use PNG images with better performance. Obviously, png32 is the most suitable. Of course, you can also use [png8 Alpha transparency]. however, the quality of a high-definition display is not as good as that of png32.

.bg{background:url(global.png?v=20130530) no-repeat;_background:url(global_png8.png?v=20130530) no-repeat;}

Solution for using IE filter:

This solution is not recommended because it is performance-consuming and does not support Background tile, leading to link failure. Do not make yourself like ie for IE ~

.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);}

In addition, there are JS and patching methods. We will not introduce them here. If you are interested, you can use IE6 to support png24.

 

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