搜索
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特性支持摄影或写实图像的压缩，并且可利用压缩比来控制文件大小。有损压缩会降低图像数据质量，并且在编辑和再保存JPG格式时，累积这种损失。JPG不适合颜色很少、且具有大块颜色相近或亮度差异明显的简单图片。（2）PNG特性能在保真效果下，尽可能地压缩图像文件的大小。储灰度图时，深度可达16位，存储彩图时，深度达48位，并且还可存储16位的alpha通道数据。对需要保真的复杂图像，PNG能无损压缩，但文件较大，不适合用于网页上。（3）PNG8与PNG24PNG8和PNG24的叫法并非官方定义，但已经被大家广泛接受。PNG8和PNG24后的数字表示对应PNG可以索引和存储的颜色值。“8”为2的8次方即256色，“24”则表示2的24次方约1600多万色。此外，PNG8还支持1位布尔透明通道，即或者透明或者不透明；PNG24则支持8位（256阶）的alpha通道，即从透明到不透明分为256级（即可以设置半透明）。格式最高支持色彩通道索引色编辑支持透明支持PNG8256色支持支持布尔透明PNG24约1600万色不支持支持8位（256阶）alpha透明二、实际应用1、什么时候用PNG示例1下图是淘宝网最常见的一个图片——“立刻购买”按钮，这里用JPG和PNG8格式分别保存后，可以看到：JPG保存的文件大小是PNG保存的文件大小的2倍JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）什么原因导致的这种差异？首先，“立刻购买”按钮是用矢量工具绘制的，其渐变填充是规则的线性渐变，字色和描边都采用纯色，所以这类图像的色彩数有限。依据无损压缩特性，用PNG存储此图只需保存很少色彩信息就可以真实还原。而对JPG来说，存放方式取决于图像的颜色层次，所以虽然颜色少但对比强烈，反而无法很好地对文件进行压缩。此外，按有损压缩算法，JPG自动通过渐变或其他方式填充被删除的信息来实现压缩，该图的红、白色位置色差较大，JPG将自动填充额外的杂色，反而影响了图像质量。因此，JPG不适合存储大块颜色相近且亮度差异明显的图像。示例2再看另一个应用，下图是淘宝彩票页面的一个Banner。用PNG8和JPG保存后可以看到，用PNG8保存不仅可以保证图像质量而且文件大小仅8.3K，而用JPG100%保存，文件增至44.2K，而且和前面一样，也会出现不必要的噪点。如果要达到PNG8的压缩率改用JPG45%保存，则图像出现严重的失真。由此得出，具备以下条件的图像更适合用PNG8格式进行存储：图像颜色少，并且主要以纯色或平滑渐变色进行填充。具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。2、什么时候用JPG示例1JPG适合存储摄影或写实图像，所以用一张摄影作品进行尝试。下图是一幅巴士照片，分别用JPG60%（左上）、PNG8256色无仿色（右上）、PNG8256色，扩散仿色（左下）、PNG32（右下）保存。可以看到，用JPG不仅可以达到最大压缩率，而且可以保证原图还原。而PNG8保存的文件更大，失真也较严重。只有PNG24才能保证品质，但文件比JPG要大很多。这种结果与JPG和PNG各自的压缩算法有关。对摄影或写实作品，由于受环境光线的影响，图像上的色彩十分丰富。比如巴士车上的红色由于反光、阴影及透视会形成明暗、深浅各异的色区。用PNG保存，需要按不同明暗度的红色存储该区域。且PNG8无法完全索引所有颜色，于是存储为PNG8丢失很多颜色出现失真。为保证图像质量，存储为PNG24，但文件大小也会增加。而JPG的压缩算法更利于对真实世界的这些复杂色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下较好地还原图像。示例2JPG只在存储照片时才用到？看下面这个例子。下图是最近较火爆的某微博页面，用户可以选择不同的风格，会自动对应相应的背景图。当保存为JPG时（“背景另存为”）文件大小仅36.3K；保存为PNG8文件大小为57.7K，且图像显示出锯齿色块；对PNG8增加了扩散仿色效果后，文件达156.3K；而保存为PNG24文件大小为231.9K。这是因为，图像采用了很多真实素材（如白云、蚂蚁、绿叶等），这些素材有丰富的色彩层次，所以不适合用PNG保存。由此得出：对摄影图或颜色层次丰富的图像（例如使用大量渐进色的图像），用JPG更能达到最佳压缩效果。网页中，商品图、用人像或实物素材制作的广告Banner等更适合保存为JPG。3、总结可见，采用JPG还是PNG保存，取决于图像的色彩层次和颜色数量。层次丰富颜色较多的适合保存为JPG颜色简单且对比强烈的适合保存为PNG。特例：有些图像色彩层次丰富，但图片尺寸较小，包含的颜色数量有限，可以试用PNG。而有些矢量图像由于采用了较多滤镜特效也会形成丰富的色彩层次，需要用JPG保存。对页面结构的基本视觉元素，如容器背景、按钮、导航背景等，应尽量用PNG格式，这样才能保证设计品质。而内容元素，如广告Banner、商品图片等质量要求不很苛刻的，可以用JPG以降低文件大小。三、思考与实践1、什么样的设计更适合web页面？（1）慎用较“重”的视觉设计元素Web2.0时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳之外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较“重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。“轻量“设计一个比较典型的例子就是国内某知名网站，几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈的建议视觉设计师也掌握一定的html和css知识（尤其是CSS3实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的去考虑产品效果。下面这个电子商务网站则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。如果由于产品需要在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。例如在下面这个例子中，第一个Banner应用了更适合PNG格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？（2）内容和形式的分离对于一些比较强调视觉效果的特殊产品，比如活动推广页面或MiniSite。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。如下面一些国外比较流行的设计风格，以及前面提到的微博网站，都是通过大幅的背景图去进行意境的传达和气氛的渲染。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化，同时又不会由于加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图）。个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤镜，相较而言优美的布局和精巧的结构才是体现品质的关键！（3）通过较小的视觉牺牲换取较大的性能提升有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识掌握就可以更有目的性的去进行优化。例如下图是淘宝“双十一”大促活动的一个页头设计，由于页面访问量非常大并且要使用较多的商品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大降低文件大小。2、还可以做些什么？（1）Sprite图片二次优化由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普