对图片理解的误区

由于最近在看性能优化，把以前写的一篇笔记关于图片的笔记搬到这里来，在性能优化中，图片的优化也是一个很重要的方面

png8 png24理解的误区

图片格式

---

png gif jpeg的优缺点以及使用场景。png八、png2四、png32的区别

比较多的解释

区别：

• png8和png24的根本区别，不是颜色位的区别，而是存储方式不一样。
• png8有1位的布尔透明通道（要么彻底透明，要么彻底不透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）。 
  png-8 和 gif 有一些类似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。 
  咱们一般说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明。可是 IE6 支持 PNG-8 的透明，就像支持gif 的透明同样。

这样咱们在工做中就有了方向：

• 色彩丰富的、大的图片切成jpg的；
• 尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
• 半透明的切成png24。

图片格式区别及使用场景

png8

• png要么全透明，要么彻底不透明。不支持半透明。[这种说法是不正确的]
• 若是把一张须要透明的图存为png8格式的话，则图四周会展现不光滑而且有锯齿【ps不支持png8 加alpha透明】

不一样的解释

索引透明盒alpha透明：

• 索引透明：相似于GIF，某一像素只有全透和全不透明两种效果
• Alpha透明：半透明
• png8-8位 png24-24 png32-32 
  PNG图片类型
• PNG格式有8位、24位、32位三种

PNG8:

• 8位的PNG最多支持256（2的8次方）种颜色，8位的PNG支持索引透明和alpha透明。

PNG24:

• 支持2的24次方种颜色，但不支持透明信息。

PNG32:

• 32位的PNG在24位的PNG基础上增长了8位的透明信息，所以支持不一样程度的半透效果

格式	颜色种类	位数	透明主持
PNG8	2的8次方	8	不支持
PNG8+索引透明	2的8次方	8	仅支持全透或全不透明
PNG8+alpha透明	2的8次方	8	支持半透明
PNG24	2的24次方	24	不支持
PNG32	2的32次方	32	支持半透明

总结

• PNG格式有8位、24位、32位三种形式;
• 8位PNG支持两种不一样的透明形式（索引透明和alpha透明）;
• 24位PNG不支持透明；
• 32位PNG 在24位基础上增长了8位透明通道，所以可展示256级透明程度。
• Photoshop不支持也不能输出PNG8+alpha透明的PNG；
• Photoshop32位PNG输出是由24位PNG加透明信息形式输出；

ie6对png图片支持状况

• IE6在滤镜的帮助下可以渲染PNG32的透明PNG图像
• IE6下不管是不是用滤镜，半透明部分是彻底按照全透明方式进行处理；
• IE6对 PNG8+alpha透明的图像支持不够好

我的理解：

• 日常所说的png24实际上是png32
• png8不支持半透明应该是不对的，通常状况下ps不支持png8+alpha通道的透明输出，只支持png8索引透明

gif png jpg 
gif

• 支持动画，不支持半透明，支持动画，适用于很小或是较简单的图片

png

• 体积小[PNG-8会在同等质量下得到比GIF更小的体积]，支持半透明，【具体看是png八、png2四、png32】

jpeg

• JPG所能显示的颜色比GIF,PNG要多的多[png 24/png32支持的颜色比png8 多],同时获得很好的压缩,因此JPG很适用于保存数码照片.可是注意它是一种失真压缩,这意味着你每次修改图片都会形成像素失真.

学习笔记参考阅读的连接

• http://www.17ria.com/article/184
• http://www.cnblogs.com/rainman/archive/2011/09/11/2173597.html
• http://xuqian0808.blog.163.com/blog/static/1701257102012112442752493/