Introduction to the use of PNG8 and PNG24 formats and the difference between Png8 and Png24

This article explains the use of PNG8 and PNG24 formats, and the differences between Png8 and Png24.

How many formats are there in PNG, what are the features, what are the PNG formats that are commonly used on the PC side, and what are the most appropriate PNG formats on the phone? What is the difference between Png8 and png24? This article we share together.

　　First, Png8 and Png24 and PNG32 bit

About the format and transparency of PNG, fireworks in the software will be more clearly seen, open the Fireworks optimization panel, you can clearly see PNG has 3 different depths of the format: Png8, Png24, png32. Where you select Png8 in the Optimization panel, you can find that Png8 includes opaque, indexed transparent, alpha transparent 3 formats.

　　Second, the difference between Png8 and Png24

1. PNG8

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

2. PNG24

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

3. 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

Speaking of the difference between Png8 and png24, "png opaque" can only be opaque, representing the format: "Png8 opaque" and "png24", the Export software are: 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:

Without checking the transparency radio box, the transparent background of the picture is filled with the default white. The PNG image has a depth of 24 bits and is opaque, similar to a JPG image.

　　Third, how to export "Png8 index transparency" using Photoshop

Use Photoshop to store all the formats in the Web, and you can export PNG8 index transparency by configuring the red border of the following picture.

　　Four, how to avoid the "Png8 index Transparent" Edge Sawtooth

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.

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.

OK, about PNG8 and png24 format is introduced here, PNG8 and png24 differences believe that after the introduction of this article also has a certain clear

Category:

• PS Getting Started Tutorial