search

ericdum / mujiang.info

一个拖更10年的博客，内容在 Issue 里
MIT License
469 stars 81 forks source link

png8支持透明通道（一） #4

Open ericdum opened 11 years ago

ericdum commented 11 years ago

每一次有新同学加入，除了讲代码，还有一个必须要说得就是图片的格式选择和压缩。

看之前请回答几个问题：

  1. 你知道jpg、gif、png的区别吗？
  2. 你知道png有8位、24位、32位吗？
  3. ie6透明问题只能用滤镜这类的方法来解决吗？
  4. 你知道png8可以有半透明（alpha通道）吗？

如果你对上面的问题有否定的回答，那么我确定这篇文章值得你一看。

图片格式的选择

根据需求选择合适的图片格式是每一个前端工程师的义务。一般会要求美术同学给到原始的图片或psd，然后前端再进行格式转化和压缩。

为什么不让美术同学直接给到压缩好的图片呢？主要有两个考虑。

  1. 降低沟通成本
  2. 技术问题让技术解决

下面先简单地介绍一下各种格式的图片，随手写来，不准确的地方欢迎拍砖，我会一一回复、改正。

jpg

jpg(jpeg)是一种有损压缩的图片具体的解释见：http://zh.wikipedia.org/wiki/JPEG

什么叫有损压缩？有损压缩就是为了将图片压缩到更小，利用人眼观察图片的特点改变某些丢弃掉一些人眼不易察觉的原始颜色信息，而这个是不可逆的。

这种压缩方式优点很明显

缺点也很明显

gif是一种无损压缩的8位位图可以实现动画，具体见：http://zh.wikipedia.org/wiki/Gif

什么叫8位位图？分两段来看，“位图”指详细记录了每个像素点的颜色信息的图片，“8位”指每一个像素点有8个2二进制位，有计算机基础知识的就知道8位就能表达256个颜色。

优点：

缺点：

png通常说的是png24/png32，是一种无损压缩的带alpha通道（透明度）的位图。http://zh.wikipedia.org/wiki/PNG

什么是png24/png32？png24就是24位png——8位_3通道（RGB红绿蓝）。png32就是32位png——8位_4通道（RGBA红绿蓝透明）

优点：

缺点：

还有一种png是png8，是一种无损压缩的带alpha通道的8位位图，使用索引。把他单独拿来说是因为很多人都不熟悉他，他也是本文的重点。

什么是使用索引？具体实现我也不太清楚，可以理解为在图片前建立256个颜色的索引，如定义：0表示#ff1201，1表示#ff0000......然后再分别在每个像素点上直接使用0、1这样的标号。也可以直接简单地理解为：没有动画，但有alpha通道的gif。

优点：

缺点：

虽然每种格式都有相应地缺点，但是根据不同的需求，总是能找到最适合的。

其他压缩方式先不说了，用firework是可以满足需求的。而之所以很多人不知道png8支持alpha通道我认为很大程度上就是因为photoshop和firework不支持。所以需要其他工具来压缩。

待续……

这两周由于团队有大变动，我又接手了一些运维方面的事情，有大量的东西需要学。所以篇文章的后半部分需要延期了，这周补上。

内容预告，急性子同学可自行补：

yuchuanxi commented 10 years ago

你的下半部分都大半年了，还没出，希望你能从百忙中抽出时间补上，不胜感激！

ericdum commented 10 years ago

@wangfei10 好的，感谢支持，我尽快补上

wendycan commented 7 years ago

哈哈，已经 2017 年了~

symbiand commented 5 years ago

哈哈2810了

wendycan commented 5 years ago

哈哈，已经 2019 年了~

luckymore commented 5 years ago

@wendycan 看预告就好，别等了，楼主转行了

elaine140626 commented 1 year ago

哈哈，已经2023年了