因为最近在看性能优化，把之前写的一篇笔记关于图片的笔记搬到这里来，在性能优化中，图片的优化也是一个很重要的方面
png8 png24理解的误区
图片格式
png gif jpeg的优缺点以及使用场景。png8、png24、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更小的体积]，支持半透明，【具体看是png8、png24、png32】
jpeg
- JPG所能显示的颜色比GIF,PNG要多的多[png 24/png32支持的颜色比png8 多],同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真.
学习笔记参考阅读的链接