mujiang.info
mujiang.info copied to clipboard
ericdum
png8支持透明通道（一）
每一次有新同学加入，除了讲代码，还有一个必须要说得就是图片的格式选择和压缩。
看之前请回答几个问题：
- 你知道jpg、gif、png的区别吗？
- 你知道png有8位、24位、32位吗？
- ie6透明问题只能用滤镜这类的方法来解决吗？
- 你知道png8可以有半透明（alpha通道）吗？
如果你对上面的问题有否定的回答，那么我确定这篇文章值得你一看。
图片格式的选择
根据需求选择合适的图片格式是每一个前端工程师的义务。一般会要求美术同学给到原始的图片或psd，然后前端再进行格式转化和压缩。
为什么不让美术同学直接给到压缩好的图片呢？主要有两个考虑。
- 降低沟通成本
- 技术问题让技术解决
下面先简单地介绍一下各种格式的图片，随手写来，不准确的地方欢迎拍砖，我会一一回复、改正。
jpg
jpg(jpeg)是一种有损压缩的图片具体的解释见：http://zh.wikipedia.org/wiki/JPEG
什么叫有损压缩？有损压缩就是为了将图片压缩到更小，利用人眼观察图片的特点改变某些丢弃掉一些人眼不易察觉的原始颜色信息，而这个是不可逆的。
这种压缩方式优点很明显
- 压缩比高（可调）
- 颜色丰富
- 边缘平滑
缺点也很明显
- 降低画质（可调）
- 不能重复压缩（越压画质越差，每次压缩都会丢失信息）
gif
gif是一种无损压缩的8位位图可以实现动画，具体见：http://zh.wikipedia.org/wiki/Gif
什么叫8位位图？分两段来看，“位图”指详细记录了每个像素点的颜色信息的图片，“8位”指每一个像素点有8个2二进制位，有计算机基础知识的就知道8位就能表达256个颜色。
优点：
- 动画
- 无损
缺点：
- 256色
- 压缩比不如png8（不一定，稍后讲）
- 不支持透明
png
png通常说的是png24/png32，是一种无损压缩的带alpha通道（透明度）的位图。http://zh.wikipedia.org/wiki/PNG
什么是png24/png32？png24就是24位png——8位_3通道（RGB红绿蓝）。png32就是32位png——8位_4通道（RGBA红绿蓝透明）
优点：
- 颜色丰富
- 支持alpha通道
- 无损
缺点：
- 图片太大。
- ie6不支持alpha通道
png8
还有一种png是png8，是一种无损压缩的带alpha通道的8位位图，使用索引。把他单独拿来说是因为很多人都不熟悉他，他也是本文的重点。
什么是使用索引？具体实现我也不太清楚，可以理解为在图片前建立256个颜色的索引，如定义：0表示#ff1201，1表示#ff0000......然后再分别在每个像素点上直接使用0、1这样的标号。也可以直接简单地理解为：没有动画，但有alpha通道的gif。
优点：
- 现有工具压缩算法好
- 支持alpha通道
- ie6也支持alpha通道
- 无损
缺点：
- 256色
实际应用
虽然每种格式都有相应地缺点，但是根据不同的需求，总是能找到最适合的。
- jpg通常用在颜色复杂、但不要求特别精细的图片上，如照片、宣传图、背景等。
- png通常用在颜色复杂并且要求特别精细或者有透明需求的图片上，如复杂的logo、图标等。由于无损还可以当做“原图”来存档使用。
- png8在png的基础上“减去”颜色复杂。
- gif由于静态部分可以被png8代替，所以通常只用于简单的动画。
png的压缩
其他压缩方式先不说了，用firework是可以满足需求的。而之所以很多人不知道png8支持alpha通道我认为很大程度上就是因为photoshop和firework不支持。所以需要其他工具来压缩。
待续……
这两周由于团队有大变动，我又接手了一些运维方面的事情，有大量的东西需要学。所以篇文章的后半部分需要延期了，这周补上。
内容预告，急性子同学可自行补：
- ie6对png8的支持
- png32、png8的压缩比较
- png8的压缩方法：https://github.com/pornel/pngquant , https://tinypng.com/
