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的秘密 — 内容简介 原文地址:http://www.iyunlu.com/view/Front-end/60.html
- 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: http://cdc.tencent.com/?p=5584 use the path to adjust the sub-pixel-improve the image's fullness
- 25. Recommended Compression tool Pngoptimizer (Http://psydk.org/PngOptimizer)
- 26. Recommended Compression tool PNGOut (http://advsys.net/ken/utils.htm)
- 27. Recommended compression tool Yahoo: smush.it (http://www.smushit.com/ysmush.it/)
- 28. An ice- cold Blog for the UX: http://iyunlu.com/view
The Secret of PNG
