入门笔记主要记录GIF、JPG和PNG三种Web常用图片格式的区别。

每种图片格式都有自己的色彩模型、表示形式、压缩方法和透明效果支持特性。只有充分地了解每一种格式的优劣之处，才能根据实际情况做出合理的选择。

索引颜色(Indexed Color)

索引颜色是位图图片的一种编码方法，需要基于RGB、CMYK等更基本的颜色编码方法。可以通过限制图片中的颜色总数的方法实现有损压缩。挑选一副图片中最有代表性的若干种颜色（通常不超过256种），编制成颜色表。在表示图片中每一个点的颜色信息时，不直接使用这个点的颜色信息，而使用颜色表的索引。

如图所示

---

逐帧动画(frame by frame animation)

又名帧动画,关键帧动画,是在时间轴上逐帧绘制帧内容实现的动画.区别于靠算法实现的实时动画(real-time),如电游画面.

---

抖动(Dithering)

抖动是Gif压缩中一项十分有用的技术。由于GIF 和PNG只有256种颜色，因此，在表现一些含有丰富色彩信息的照片图像或含有平缓过度色的图像时， 就会出现梯田状的条形色块，这时，我们就需要用到Dithering（抖动）功能， Dithering可以模仿一些在调色板无法找到的颜色，从而使得整个图像颜色与颜色 之间的过渡更为自然，不过，Dithering同样会使图像Size变大.

综述：8位（最多256色）；无损压缩；1位透明；

适用图像：带有大块相同颜色区域的图像、单色插图、文本、色块等。
比如：简单Logo、小图标（Icon）、用于布局的图片（例如某个布局角落，边框…）等仅包含不超过256种色彩的简单图片场合。

压缩方式：使用索引颜色实现无损压缩。超过256色时，只能忍痛割爱；小于256色时，索引颜色也减小，图片相应减小。

透明度：1位透明度。某个像素，要么透明，要么不透明，不存在30%透明度情况。

特性：支持逐帧动画。

综述：24位真彩；有损压缩；不支持透明

适用图像：允许轻微失真的像素色彩丰富的图片（照片）.

压缩方式：JPEG 使用的是特殊的压缩算法，从而可以实现非常高的压缩比。为了达到这样惊人的压缩率，JPEG 要损失一些图像数据。可以通过图像处理软件调整这个“损失率”，这样，尽管压缩后的图像和原来的图像并不完全一样，但它们可以非常接近，以至于大多数人都无法分辨出之间的差别。

透明度：不支持

特性：JPEG 使用的压缩和解压缩算法使得它在处理大范围的颜色块时，会留下很明显的人工痕迹。所以，如果你想显示出用线条描绘的图画，GIF 也许更适合一些。

综述：8/24位,无损压缩,不支持动画,支持隔行扫描 ,支持Alpha透明度

适用图像：8位PNG图像适用范围几乎同gif一样,有时候会更小;24位PNG图像支持1670万种不同的像素颜色,且支持Alpha透明效果(可变的透明度)

压缩方式：JPEG 使用的是特殊的压缩算法，从而可以实现非常高的压缩比。为了达到这样惊人的压缩率，JPEG 要损失一些图像数据。可以通过图像处理软件调整这个“损失率”，这样，尽管压缩后的图像和原来的图像并不完全一样，但它们可以非常接近，以至于大多数人都无法分辨出之间的差别。

透明度：8位PNG同GIF;24位PNG支持可变的透明度,30%/80%等.(IE6?no!)

【名词解释】

逐行加载

又名逐行扫描,一般情况下，图像的像素数据是按从顶部到底部顺次、逐行排列的一个序列来加载的。如果网速快,这个过程瞬间完成;如果慢,则如拉下普通窗帘一样出现

隔行加载

又名隔行扫描和交错扫描.通过隔行扫描，图像可以在屏幕上一下子显现出来,然后变清晰。

---

【隔行加载 技术应用】

1 隔行gif/png：指图像文件是按照隔行的方式来显示的，比如先出奇数行，再出偶数行，造成图像是逐渐变清晰的。

---

2 逐级jpg：让图像先以比较模糊的形式显示，随着图像文件数据不断从网上传过来，图像会逐渐变清晰。

---

注:
1 Photoshop和Fireworks中的”渐进式浏览器显示”、”交错式浏览器显示”、”交错”、”连续”选项来设置，默认不选。
2 选择后,gif和png图像大小变大,jpg变小.

1. 文中用图选自维基百科.
2. 《CSS禅意花园》 第四章-图像
3. GIF、JPG和PNG
4. 多媒体教程 – GIF 图像
5. 多媒体教程 – JPEG 图像