《JPG、PNG、GIF压缩原理与成像方式》由会员分享，可在线阅读，更多相关《JPG、PNG、GIF压缩原理与成像方式（18页珍藏版）》请在金锄头文库上搜索。
1、JPG、PNG、GIF 图片格式压缩原理与成像方式一、基本概念要了解图片格式的特性，先要学习一些基本概念。这部分比较枯燥，但如果你耐心学完，一定获益匪浅。1、矢量图与位图（1）矢量图-完美的几何图形矢量图是通过一些基本图形元素，如点、线、面，边框，填充色等通过计算方式来显示的图形。例如，描述一个圆通过其圆心位置和半径，通过边框粗细、颜色及填充色等描述其样式。电脑在显示时通过这些数据绘制出定义的图像。矢量图的特点是：文件容量较小，且缩放不失真。缺点是无法表现自然界真实场景。web 页中的图像都是位图，即便有些矢量图形，也是用矢量工具绘制后转成的位图格式。（2）位图-神奇的拼图又叫像素图或栅格图，
2、是通过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像的。一张位图好比一幅拼图，其中的每个小拼块就是一个像素点，把这些不同颜色的像素点按一定规律拼接在一起，就形成了图像。放大一幅像素图时，能看出这些像素点（下图）。位图的特点是：可以显示出色彩丰富的真实图像。缺点是文件较大，缩放会出现失真。尽管 web 页中常用的 JPG、PNG、GIF 格式都是位图，但他们的编码方式不同，这就是有损和无损压缩的区别。2、有损压缩与无损压缩（1）有损压缩你看到的不一定是真的有损压缩就是在存储图像时不完全记录图像的每个像素点信息，它根据人眼观察现实的特性（人眼对光线敏感度比对颜色的敏感度高。生物实验证明
3、，当颜色缺失时，人脑会利用附近的最接近颜色自动填补缺失颜色）处理图像数据，去除被人眼忽略的细节，用邻近色以渐变或其他方式重新填充。这样既大大降低图像的数据量，又不会影响图像的还原效果。JPG 是最常见的用有损压缩方式处理图像信息的格式。在存储图像时，JPG 把图像分解成 8*8 像素的栅格（如上图），然后对每个栅格信息进行压缩，放大一幅图像时，就会发现这些 8*8 像素栅格中的很多细节信息被去除，而通过一些特殊算法用附近颜色进行填充（为看得更清楚，这里将图像压缩比调得很低）。这也是为什么看 JPG 图像时又是产生块状模糊的原因。（2）无损压缩-最精确的拼图无损压缩真实地记录了图像上每个像素点的
4、数据信息，但为了压缩图像文件的大小，常采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。PNG 是最常见的无损压缩图片格式。在存储图像前，无损压缩将自动判断图像中哪些相同和不同的部分，因此要对图像颜色进行索引（如上图），这些颜色称为索引色。索引色好比绘制该图像的“调色版”，在显示图像时将自动用“调色版”上颜色填充相应的位置。既然 PNG 用无损压缩，为什么 PNG 图片还会失真？这是因为无损压缩只是说明其
5、压缩方式可以尽可能地还原图像，但因其压缩是通过索引图像上相同区域颜色进行的压缩和还原，所以只有图像上的颜色数量小于可以保存的颜色数量时，才能记录和还原图像，否则就会丢失一些信息（PNG8 只能索引 256 种颜色，所以对颜色多于 256 色图就不能真实还原；PNG24 可以保存 1600 多万种颜色，可以真实还原人眼可以分辨的所有颜色）。PNG 格式最多可以保存 48 位颜色。而有损压缩，则是无论原图颜色多少种，都将损失掉图像信息。3、JPG 和 PNG这里不再讨论 GIF，因为 PNG 取代了 GIF，而且 PNG 的压缩算法优于 GIF，所以如果不需要动画。建议都采用 PNG 格式。这里我
6、们不妨把 JPG 和 PNG 的一些特性进行一个简单对比：格式 压缩模式 交错支持 透明支持 动画支持JPG 有损压缩 支持 不支持 不支持PNG 无损压缩 支持 支持 不支持（1）JPG 特性 支持摄影或写实图像的压缩，并且可利用压缩比来控制文件大小。 有损压缩会降低图像数据质量，并且在编辑和再保存 JPG 格式时，累积这种损失。 JPG 不适合颜色很少、且具有大块颜色相近或亮度差异明显的简单图片。（2）PNG 特性 能在保真效果下，尽可能地压缩图像文件的大小。 储灰度图时，深度可达 16 位，存储彩图时，深度达 48 位，并且还可存储 16 位的alpha 通道数据。 对需要保真的复杂图像
7、，PNG 能无损压缩，但文件较大，不适合用于网页上。（3）PNG8 与 PNG24PNG8 和 PNG24 的叫法并非官方定义，但已经被大家广泛接受。PNG8 和 PNG24 后的数字表示对应 PNG 可以索引和存储的颜色值。“8”为 2 的 8 次方即 256 色，“24”则表示 2的 24 次方约 1600 多万色。此外，PNG8 还支持 1 位布尔透明通道，即或者透明或者不透明；PNG24 则支持 8 位（256 阶）的 alpha 通道，即从透明到不透明分为 256 级（即可以设置半透明）。格式 最高支持色彩通道 索引色编辑支持 透明支持PNG8 256 色 支持 支持布尔透明PNG2
8、4 约 1600 万色 不支持 支持 8 位（256 阶）alpha 透明二、实际应用1、什么时候用 PNG示例 1下图是淘宝网最常见的一个图片“立刻购买”按钮，这里用 JPG 和 PNG8 格式分别保存后，可以看到： JPG 保存的文件大小是 PNG 保存的文件大小的 2 倍 JPG 不仅文件更大并且还出现了噪点（如图中红色方框标注的）什么原因导致的这种差异？首先，“立刻购买”按钮是用矢量工具绘制的，其渐变填充是规则的线性渐变，字色和描边都采用纯色，所以这类图像的色彩数有限。依据无损压缩特性，用 PNG 存储此图只需保存很少色彩信息就可以真实还原。而对 JPG 来说，存放方式取决于图像的颜色
9、层次，所以虽然颜色少但对比强烈，反而无法很好地对文件进行压缩。此外，按有损压缩算法，JPG 自动通过渐变或其他方式填充被删除的信息来实现压缩，该图的红、白色位置色差较大，JPG 将自动填充额外的杂色，反而影响了图像质量。因此，JPG 不适合存储大块颜色相近且亮度差异明显的图像。示例 2再看另一个应用，下图是淘宝彩票页面的一个 Banner。用 PNG8 和 JPG 保存后可以看到，用 PNG8 保存不仅可以保证图像质量而且文件大小仅 8.3K，而用 JPG 100%保存，文件增至 44.2K，而且和前面一样，也会出现不必要的噪点。如果要达到 PNG8 的压缩率改用JPG 45%保存，则图像出现
10、严重的失真。由此得出，具备以下条件的图像更适合用 PNG8 格式进行存储： 图像颜色少，并且主要以纯色或平滑渐变色进行填充。 具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。2、什么时候用 JPG示例 1JPG 适合存储摄影或写实图像，所以用一张摄影作品进行尝试。下图是一幅巴士照片，分别用 JPG 60%（左上）、PNG8 256 色 无仿色（右上）、PNG8 256 色，扩散仿色（左下）、PNG32（右下）保存。可以看到，用 JPG 不仅可以达到最大压缩率，而且可以保证原图还原。而 PNG8 保存的文件更大，失真也较严重。只有PNG24 才能保证品质，但文件比 J
11、PG 要大很多。这种结果与 JPG 和 PNG 各自的压缩算法有关。对摄影或写实作品，由于受环境光线的影响，图像上的色彩十分丰富。比如巴士车上的红色由于反光、阴影及透视会形成明暗、深浅各异的色区。用 PNG 保存，需要按不同明暗度的红色存储该区域。且 PNG8 无法完全索引所有颜色，于是存储为 PNG8 丢失很多颜色出现失真。为保证图像质量，存储为 PNG24，但文件大小也会增加。而 JPG 的压缩算法更利于对真实世界的这些复杂色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下较好地还原图像。示例 2JPG 只在存储照片时才用到？看下面这个例子。下图是最近较火爆的某微博页面，用户可以选择不同
12、的风格，会自动对应相应的背景图。当保存为 JPG 时（“背景另存为”）文件大小仅 36.3K；保存为 PNG8 文件大小为57.7K，且图像显示出锯齿色块；对 PNG8 增加了扩散仿色效果后，文件达 156.3K；而保存为 PNG24 文件大小为 231.9K。这是因为，图像采用了很多真实素材（如白云、蚂蚁、绿叶等），这些素材有丰富的色彩层次，所以不适合用 PNG 保存。由此得出：对摄影图或颜色层次丰富的图像（例如使用大量渐进色的图像），用 JPG更能达到最佳压缩效果。网页中，商品图、用人像或实物素材制作的广告 Banner 等更适合保存为 JPG。3、总结可见，采用 JPG 还是 PNG 保
13、存，取决于图像的色彩层次和颜色数量。 层次丰富颜色较多的适合保存为 JPG 颜色简单且对比强烈的适合保存为 PNG。 特例：有些图像色彩层次丰富，但图片尺寸较小，包含的颜色数量有限，可以试用PNG。而有些矢量图像由于采用了较多滤镜特效也会形成丰富的色彩层次，需要用 JPG保存。对页面结构的基本视觉元素，如容器背景、按钮、导航背景等，应尽量用 PNG 格式，这样才能保证设计品质。而内容元素，如广告 Banner、商品图片等质量要求不很苛刻的，可以用 JPG 以降低文件大小。三、思考与实践1、什么样的设计更适合 web 页面？（1）慎用较“重”的视觉设计元素Web2.0 时代网页设计的一大趋势就是
14、越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的 CSS 样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的 html 和 css 知识（尤其是CSS3 实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。下面
15、这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。例如在下面这个例子中，第一个 Banner 应用了更适合 PNG 格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个 Banner 由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用 PNG 还是 JPG 格式保存都无法实现
16、图像质量和文件大小的最优化。当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？ （2）内容和形式的分离对于一些比较强调视觉效果的特殊产品，比如活动推广页面或 Mini Site。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。如下面一些国外比较流行的设计风格，以及前面提到的微博网站，都是通过大幅的背景图去进行意境的传达和气氛的渲染。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时又不会由于加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图）。个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤
