JPG、PNG、GIF压缩原理与成像方式.doc

JPG、PNG、GIF图片格式压缩原理与成像方式
一、基本概念
要了解图片格式的特性，先要学习一些基本概念。这部分比较枯燥，但如果你耐心学完，一定获益匪浅。
1、矢量图与位图
（1）矢量图-完美的几何图形
矢量图是通过一些基本图形元素，如点、线、面，边框，填充色等通过计算方式来显示的图形。例如，描述一个圆通过其圆心位置和半径，通过边框粗细、颜色及填充色等描述其样式。电脑在显示时通过这些数据绘制出定义的图像。
矢量图的特点是：文件容量较小，且缩放不失真。缺点是无法表现自然界真实场景。
web页中的图像都是位图，即便有些矢量图形，也是用矢量工具绘制后转成的位图格式。
（2）位图-神奇的拼图
又叫像素图或栅格图，是通过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像的。
一张位图好比一幅拼图，其中的每个小拼块就是一个像素点，把这些不同颜色的像素点按一定规律拼接在一起，就形成了图像。放大一幅像素图时，能看出这些像素点（下图）。

位图的特点是：可以显示出色彩丰富的真实图像。缺点是文件较大，缩放会出现失真。
尽管web页中常用的JPG、PNG、GIF格式都是位图，但他们的编码方式不同，这就是有损和无损压缩的区别。
2、有损压缩与无损压缩
（1）有损压缩——你看到的不一定是真的
有损压缩就是在存储图像时不完全记录图像的每个像素点信息，它根据人眼观察现实的特性（人眼对光线敏感度比对颜色的敏感度高。生物实验证明，当颜色缺失时，人脑会利用附近的最接近颜色自动填补缺失颜色）处理图像数据，去除被人眼忽略的细节，用邻近色以渐变或其他方式重新填充。这样既大大降低图像的数据量，又不会影响图像的还原效果。

JPG是最常见的用有损压缩方式处理图像信息的格式。在存储图像时，JPG把图像分解成8*8像素的栅格（如上图），然后对每个栅格信息进行压缩，放大一幅图像时，就会发现这些8*8像素栅格中的很多细节信息被去除，而通过一些特殊算法用附近颜色进行填充（为看得更清楚，这里将图像压缩比调得很低）。这也是为什么看JPG图像时又是产生块状模糊的原因。
（2）无损压缩-最精确的拼图
无损压缩真实地记录了图像上每个像素点的数据信息，但为了压缩图像文件的大小，常采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

PNG是最常见的无损压缩图片格式。在存储图像前，无损压缩将自动判断图像中哪些相同和不同的部分，因此要对图像颜色进行索引（如上图），这些颜色称为索引色。索引色好比绘制该图像的“调色版”，在显示图像时将自动用“调色版”上颜色填充相应的位置。
既然PNG用无损压缩，为什么PNG图片还会失真？这是因为无损压缩只是说明其压缩方式可以尽可能地还原图像，但因其压缩是通过索引图像上相同区域颜色进行的压缩和还原，所以只有图像上的颜色数量小于可以保存的颜色数量时，才能记录和还原图像，否则就会丢失一些信息（PNG8只能索引256种颜色，所以对颜色多于256色图就不能真实还原；PNG24可以保存1600多万种颜色，可以真实还原人眼可以分辨的所有颜色）。PNG格式最多可以保存48位颜色。而有损压缩，则是无论原图颜色多少种，都将损失掉图像信息。
3、JPG和PNG
这里不再讨论GIF，因为PNG取代了GIF，而且PNG的压缩算法优于GIF，所以如果不需要动画。建议都采用PNG格式。
这里我们不妨把JPG和PNG的一些特性进行一个简单对比：
格式
压缩模式
交错支持
透明支持
动画支持
JPG
有损压缩
支持
不支持
不支持
PNG
无损压缩
支持
支持
不支持
（1）JPG特性
l 支持摄影或写实图像的压缩，并且可利用压缩比来控制文件大小。
l 有损压缩会降低图像数据质量，并且在编辑和再保存JPG格式时，累积这种损失。
l JPG不适合颜色很少、且具有大块颜色相近或亮度差异明显的简单图片。
（2）PNG特性
l 能在保真效果下，尽可能地压缩图像文件的大小。
l 储灰度图时，深度可达16位，存储彩图时，深度达48位，并且还可存储16位的alpha通道数据。

l 对需要保真的复杂图像，PNG能无损压缩，但文件较大，不适合用于网页上。
（3）PNG8与PNG24
PNG8和PNG24的叫法并非官方定义，但已经被大家广泛接受。PNG8和PNG24后的数字表示对应PNG可以索引和存储的颜色值。“8”为2的8次方即256色，“24”则表示2的24次方约1600多万色。
此外，PNG8还支持1位布尔透明通道，即或者透明或者不透明；PNG24则支持8位（256阶）的alpha通道，即从透明到不透明分为256级（即可以设置半透明）。
格式
最高支持色彩通道
索引色编辑支持
透明支持
PNG8
256色
支持
支持布尔透明
PNG24
约1600万色
不支持
支持8位（256阶）alpha透明
二、实际应用
1、什么时候用PNG
示例1
下图是淘宝网最常见的一个图片——“立刻购买”按钮，这里用JPG和PNG8格式分别保存后，可以看到：
l JPG保存的文件大小是PNG保存的文件大小的2倍
l JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）

什么原因导致的这种差异？
首先，“立刻购买”按钮是用矢量工具绘制的，其渐变填充是规则的线性渐变，字色和描边都采用纯色，所以这类图像的色彩数有限。依据无损压缩特性，用PNG存储此图只需保存很少色彩信息就可以真实还原。而对JPG来说，存放方式取决于图像的颜色层次，所以虽然颜色少但对比强烈，反而无法很好地对文件进行压缩。
此外，按有损压缩算法，JPG自动通过渐变或其他方式填充被删除的信息来实现压缩，该图的红、白色位置色差较大，JPG将自动填充额外的杂色，反而影响了图像质量。因此，JPG不适合存储大块颜色相近且亮度差异明显的图像。
示例2
再看另一个应用，下图是淘宝彩票页面的一个Banner。用PNG8和JPG保存后可以看到，用PNG8保存不仅可以保证图像质量而且文件大小仅8.3K，而用JPG 100%保存，文件增

至44.2K，而且和前面一样，也会出现不必要的噪点。如果要达到PNG8的压缩率改用JPG 45%保存，则图像出现严重的失真。

由此得出，具备以下条件的图像更适合用PNG8格式进行存储：
l 图像颜色少，并且主要以纯色或平滑渐变色进行填充。
l 具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
2、什么时候用JPG
示例1
JPG适合存储摄影或写实图像，所以用一张摄影作品进行尝试。
下图是一幅巴士照片，分别用JPG 60%（左上）、PNG8 256色 无仿色（右上）、PNG8 256色，扩散仿色（左下）、PNG32（右下）保存。可以看到，用JPG不仅可以达到最大压缩率，而且可以保证原图还原。而PNG8保存的文件更大，失真也较严重。只有PNG24才能保证品质，但文件比JPG要大很多。
这种结果与JPG和PNG各自的压缩算法有关。
对摄影或写实作品，由于受环境光线的影响，图像上的色彩十分丰富。比如巴士车上的红色由于反光、阴影及透视会形成明暗、深浅各异的色区。用PNG保存，需要按不同明暗度的红色存储该区域。且PNG8无法完全索引所有颜色，于是存储为PNG8丢失很多颜色出现失真。为保证图像质量，存储为PNG24，但文件大小也会增加。
而JPG的压缩算法更利于对真实世界的这些复杂色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下较好地还原图像。

示例2
JPG只在存储照片时才用到？看下面这个例子。
下图是最近较火爆的某微博页面，用户可以选择不同的风格，会自动对应相应的背景图。当保存为JPG时（“背景另存为”）文件大小仅36.3K；保存为PNG8文件大小为57.7K，且图像显示出锯齿色块；对PNG8增加了扩散仿色效果后，文件达156.3K；而保存为PNG24文件大小为231.9K。
这是因为，图像采用了很多真实素材（如白云、蚂蚁、绿叶等），这些素材有丰富的色彩层次，所以不适合用PNG保存。

由此得出：对摄影图或颜色层次丰富的图像（例如使用大量渐进色的图像），用JPG更能达到最佳压缩效果。
网页中，商品图、用人像或实物素材制作的广告Banner等更适合保存为JPG。
3、总结
可见，采用JPG还是PNG保存，取决于图像的色彩层次和颜色数量。
l 层次丰富颜色较多的适合保存为JPG
l 颜色简单且对比强烈的适合保存为PNG。
l 特例：有些图像色彩层次丰富，但图片尺寸较小，包含的颜色数量有限，可以试用PNG。而有些矢量图像由于采用了较多滤镜特效也会形成丰富的色彩层次，需要用JPG保存。
对页面结构的基本视觉元素，如容器背景、按钮、导航背景等，应尽量用PNG格式，这样才能保证设计品质。而内容元素，如广告Banner、商品图片等质量要求不很苛刻的，可以用JPG以降低文件大小。
三、思考与实践
1、什么样的设计更适合web页面？
（1）慎用较“重”的视觉设计元素
Web2.0时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。
“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的html和css知识（尤其是CSS3实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。

下面这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。

如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。
例如在下面这个例子中，第一个Banner应用了更适合PNG格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。

当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？
（2）内容和形式的分离
对于一些比较强调视觉效果的特殊产品，比如活动推广页面或Mini Site。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。
如下面一些国外比较流行的设计风格，以及前面提到的微博网站，都是通过大幅的背景图去进行意境的传达和气氛的渲染。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时又不会由于加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图）。

个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤镜，相较而言优美的布局和精巧的结构才是体现品质的关键！
（3）通过较小的视觉牺牲换取较大的性能提升
有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化。
例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。

2、还可以做些什么？
（1）Sprite图片二次优化
由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。

下图是一个优化前的Sprite图片，由于视觉元素过多PNG8无法真实保存所有的颜色信息，于是便会产生颜色的缺失和杂色的产生（如局部放大图所示）。

在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。

Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。
以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。
四、附录——Photoshop中各种参数的含义及设置技巧
1、PNG8的参数设置

（1）减低颜色深度（的算法与颜色）
确定生成颜色查找表的算法，以及要在颜色查找表中使用的颜色数。可选算法有：
l 可选择：与”可感知”颜色表类似，但更有利于保存大范围颜色区域和Web色。此颜色表通常生成具有最大颜色完整性的图像。是默认选项。
建议：一般情况下默认“可选择”项即可。
l 可感知：以人眼感知颜色优先方式创建自定颜色表。
l 随样性：从图像主要色谱中提取色样创建自定颜色表。例如，某幅只含有绿、蓝色的图像，将产生主要由绿、蓝色构成的颜色表。大多数图像颜色集中在色谱的特定区域。

l 受限 (Web)：标准的216 色颜色表。确保使用8位色显示图像时，不会出现浏览器仿色（也称Web安全调板）。用Web调板可能会产生较大的文件，因此，仅在浏览器仿色是优先考虑因素时，才使用该项。
l 自定：使用用户创建或修改的调色板。可自定颜色查找表。
黑白、灰度、Mac OS、Windows使用一组调色板。

（2）仿色方法和仿色
确定应用程序仿色的方法和数量。”仿色”是指模拟计算机显示系统中未提供颜色的方法。
较高的仿色百分比可以使图像中出现更多的颜色和细节，但同时也增大文件。要获得最佳压缩比，请用可提供所需颜色细节的最低百分比的仿色。
若图像所含颜色主要是纯色，则不应用仿色也能正常显示。含连续色调（尤其是颜色渐变）的图像，则需要仿色以防止出现颜色条带现象。
可选以下几种仿色方法：
l 扩散：使用与“图案”仿色类似的随机图案。仿色效果在相邻像素间扩散。
l 图案：使用类似半调的方形图案来模拟颜色表中没有的颜色。
l 杂色：使用与“扩散”仿色法相似的随机图案，但不在相邻像素扩散图案。使用“杂色”仿色法。不会出现接缝。
建议：仅在图片颜色过多且出现失真时，才选择仿色。建议选扩散仿色，以适当调节仿色百分比达到最佳效果。仿色度越高文件大小也会越大。

（3）透明度和杂边
确定优化图像中透明像素的方法。
l 使透明像素透明，半透明像素与某种颜色相混合，选择“透明度”，再选一种杂边颜色。
l 将全透明或部分透明像素与同一种颜色混合，请选择杂边色，并取消“透明度”
l 要选择杂边色，则在“杂边”色板，再用拾色器选择一种颜色。或从“杂边”菜单里选择以下某项：吸管（用吸管颜色）、前景色、背景色、白色、黑色或其它（用拾色器）。
建议：在保存前，建议由视觉设计师根据实际应用场景处理好透明图像的背景。

（4）交错
PNG、GIF这两种图像都具备这种功能，可以使图像更快地显示出来。
自动显示图像草图，全部下载后再填充细节。从而使用户不需干等大型图像慢慢显示。
建议：对大尺寸或大容量图片，建议勾选此项。
2、JPG的参数设置

（1）品质
在“品质级别”中选取一项，或在“品质”文本框中指定某值。值越大，算法保留的细节越多，生成的文件也越大。应确定品质和文件大小间的最佳平衡点。
（2）品质设置技巧
l 不要用100%品质的JPG格式。因为它并不表示最高品质，只是优化算法的极限值。通常95%就可以最大限度地降低失真度。

l 谨慎使用50%以下压缩率。这会因此采用额外压缩算法而导致图片更加失真，尤其高对比度图片。
（3）优化
选择“优化”可以创建出小的增强型JPEG。建议用“优化JPEG”获得最大压缩量；较旧浏览器不支持此特性。
建议：勾选此项，目前不支持该功能的浏览器已不存在。
（4）连续
选择”连续”将创建页面中可以连续显示的图像。图像显示为一系列的叠加，使用户在图像下载完毕前，可以看到图像的低分辨率版本。连续JPEG占用更多内存，某些浏览器不支持该选项。
建议：某些情况下压缩文件（大于10k时），某些情况会增大文件。IE6以前不支持，慎选。
（5）模糊
指定用于图像的模糊量。“模糊”选项有与“高斯模糊”滤镜相同的效果，并允许进一步压缩文件以获得更小的文件。建议用0.1~0.5之间的值。
（6）ICC 配置文件
选择此项后，自动将图片的ICC配置文件与图像文件保留在一起。ICC配置文件用于某些浏览器的色彩校正（参阅Photoshop中设置色彩管理）。
（7）杂边
指定原图中透明像素的填充色。在“杂边”色板，用拾色器中选择颜色。从“杂边”菜单选选项。则原稿图像中，全透明像素填充为选定颜色，部分透明像素与选定色相混合。

（注：专业文档是经验性极强的领域，无法思考和涵盖全面，素材和资料部分来自网络，供参考。可复制、编制，期待你的好评与关注）