The Secret of PNG

Source: Internet
Author: User
Tags transparent image

PNG is the image format that we often use, but do you really know about PNG?
This is a front-end sharing will, a bit of cold will take you to understand the PNG you do not know. There are three first questions:
What is PNG?
What are the features of PNG?
How do I optimize PNG?

Png的秘密 — 内容简介 原文地址:
  • 1. PNG's secret-do you really understand PNG? By a scouring UX trace
  • 2. First we look at three questions:
  • What is PNG?
  • What are the features of PNG?
  • How do I optimize PNG?
  • 3. What is PNG?
  • The full name is: Portable Network Graphics (Portable networks graphics) is a: Lossless bitmap image File format
  • PNG was born in 1996
  • The current version of PNG is ISO International (IEC 15,948:2003), which became the recommended standard on November 10, 2003.
  • 4. Characteristics of PNG
  • 1). Can be successive approximation of the display: the outline of the picture, and then gradually display the details of the image (corresponding to the PS interleaved option)
  • 2). Support for storing additional text information: Image name, author, copyright, creation time, comments, etc.
  • 3). Transparency: ① Boolean transparent (index transparent) can only be opaque or fully transparent. ②alpha transparency supports full transparency and translucency.
  • 5. PNG Comparison of various formats
  • 6. PNG Comparison of various formats
  • 7. The IE6 of Evil
  • IE6 PNG Translucent: Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= "img. png", sizingmethod= "scale");
  • Cons: Increase in additional CPU and memory consumption
  • Image not suitable for IMG Insert, background tile not supported
  • The link fails, the form cannot get focus, workaround: ① causes the link element and form element to get haslayout, typically plus: position:relavtive, but when the parent element is defined as Position:absolute, the This method invalidates the ② background layer as a separate container, and the content is sibling
  • 8. IE6 PNG Transparent progressive enhancement
  • For buttons with gradient shadows: Modern browsers use Fireworks to export PNG-8 modern browsers with alpha Transparent IE6 translucent parts for full transparency
  • If IE6 also needs translucent effects: Fireworks Photoshop
  • Then the IE6 is translucent through the filter
  • 9. Summary
  • The PNG format has 8-bit, 24-bit, 32-bit three forms, where 8-bit PNG supports two different forms of transparency (index transparency and alpha transparency), 24-bit PNG does not support transparency, 32-bit PNG adds 24-bit transparent channels on a 8-bit basis, and therefore can exhibit level 256 transparency.
  • Photoshop does not support or output png8+alpha transparent png,32 bits PNG output is output from 24-bit PNG plus transparent information, so fireworks supports PNG better.
  • Non-IE6 browsers can display PNG images with transparent information normally, while IE6 can properly display png8+ index transparency and 32-bit transparent PNG images with the help of the filter, but the Png8+alpha transparent image support is not good enough.
  • The composition of a. png file-----A fixed 64-byte signature domain for a PNG file: decimal number 137 80 78 71 13 10 26 106 binary 4e 0d 0a 1a 0a Block structure = key block + secondary data Block + Data Block summary
  • The composition of a. png file
  • 1.PNG file flag, fixed 64 bytes: decimal number 137 80 78 71 13 10 26 106 binary 4e 0d 0a 1a 0a
  • 2. File header data Block Ihdr (header chunk)--Fixed length 13 bytes
  • 3. Palette data Block Plte (palette chunk)
  • 4.sbit,trns (storage transparency information) block?
  • 5. Image data Block Idat (chunk)
  • 6. Image end Data iend (Image trailer chunk)--fixed 96 bytes: 0x00000000 0x49454e44 0xae426082
  • 12. We can give PNG an "axe".
  • 13. Example PNG header
  • 14. File Header data Block ihdr00000008-00000020
  • 15. Summary
  • PNG optimization tool selectively cleans up auxiliary data blocks
  • PNG is compressed based on the LZ77 compression algorithm, and the optimization tool is re-compressed to a larger level (lossless)
  • Application Scenarios for Png,jpg,gif
  • 17. PNG is intended to replace GIF, except for special scenes such as animated images, it is generally recommended to use PNG
  • PNG vs. gif
  • . png animations
  • The apng format is an unofficial bitmap animation format that extends from PNG. HTTP://IMAGE4.360DOC.COM/DOWNLOADIMG/2009/10/22/28 9266_7657398_48.png
      • 20. Application Scenarios
      • When should I use PNG? First look at such a picture title
      • JPG 80% 12.0 KB PNG-8 256-color 5.54 KB occurrence noise
      • . JPG 80% 33.1 KB distortion more severe PNG-8 256 colors 53.6 kb
      • 23. Summary
      • PNG is better (vector) when the number of image colors is low and basically solid color or smooth gradient
      • For images with rich color or deep layers of images with better jpg, such as: people, landscapes and other realistic photo shoot
      • For the background of the Web page, buttons and so on as far as possible to use PNG storage, to ensure better visual quality; ads, commodities, etc. can be stored using JPG (this time the file is smaller, faster loading)
      • 24. How should the design be wet?
      • Control the virtual reality of the pixel: use the path to adjust the sub-pixel-improve the image's fullness
      • 25. Recommended Compression tool Pngoptimizer (Http://
      • 26. Recommended Compression tool PNGOut (
      • 27. Recommended compression tool Yahoo: (
      • 28. An ice- cold Blog for the UX:

The Secret of PNG

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.