Make a PNG picture transparent on a Web page

Saturday to participate in the Webtech Eighth Web Exchange, about picture optimization, actually involves a PNG image instead of GIF, but in the Web page can not achieve transparency effect.

Look at the pictures of Taobao, in fact, are PNG. The solution is to use png-8 to achieve transparency.

PNG, is a non-distorted compressed bitmap graphics file format. The PNG format is lossless, allowing the use of a palette technology similar to the GIF format to support true color images and features such as alpha channel (semitransparent). There are now a lot of people using PNG format on the Internet and other aspects.

PNG, is a non-distorted compressed bitmap graphics file format. The PNG format is lossless, allowing the use of a palette technology similar to the GIF format to support true color images and features such as alpha channel (semitransparent). There are now a lot of people using PNG format on the Internet and other aspects.

PNG's English name is Portable Network Graphics, a Portable network picture . Another argument is that the name originates from the unofficial "PNG is not GIF".

Characteristics

* Support 256 color palette technology to produce small volume files
* Maximum support for 48-bit true color images and 16-bit grayscale images.
* Supports the translucent properties of the alpha channel.
* Gamma correction information that supports image brightness.
* Supports storing additional text information to preserve the image name, author, copyright, authoring time, annotation, and so on.
* Use lossless compression
* Asymptotic display and streaming read and write, suitable for the network transmission to quickly display the preview effect and then show the whole picture.
* Use CRC cyclic redundancy encoding to prevent file errors.
* The latest PNG standard allows multiple images to be stored in one file.

PNG is divided into two forms: PNG-8 and PNG-24. PNG-8, like GIF, supports up to 256 colors, and PNG-24 supports 48-bit true colors, sometimes better than JPG, which is beyond the scope of the discussion.

How to generate PNG-8 and PNG-24 images. Using the PS Save as Web format (accelerator: Alt + Shift + Ctrl + S), select the image format in the Right property window. If you use fireworks, file-Image Preview (shortcut: ctrl+shift+x), in the relevant column, select Format Palette, index color, etc. export ...

One, PNG-8 and GIF

PNG-8, like GIF, supports monochrome transparency. GIF Some PNG-8 have a bit, GIF does not have PNG-8 also, such as: the same file PNG-8 format is smaller than GIF.

Second, the degree of PNG-8 and PNG-24 support to IE6

PNG-24 is a format that supports alpha channel transparency, supports translucent, IE6 does not support PNG-24, but he fully supports PNG-8.
If it is not transparent png-24,ie6 is also the perfect support, the reason that IE6 does not support PNG-24 is because PNG-24 translucent will be in the IE6 of abnormal display.

Iii. the transparent difference between PNG-8 and PNG-24

PNG-8 and GIF have some similarities, the patterns are indexed colors, only pixel-level pure transparency is supported, and alpha transparency is not supported. The "IE6 does not support PNG transparency", as we usually say, refers to the opacity that does not support PNG-24 (the transparent area appears dimmed). But IE6 supports PNG-8 transparency just as it does for GIF.

High compression ratio of PNG-8

When Chettu, sometimes choosing PNG-8 can get a higher compression ratio. Notice, it's PNG-8, not PNG-24. However, in some cases, GIF or JPG is smaller, you need to debug according to the actual situation to choose the best solution.