设计师必须道的图片优化技巧.docx

设计师必须道的图片优化技巧

设计师必须道的图片优化技巧

前言：该文收集了前辈们的一些关于图片优化的技巧，在此收拢到一起，对于各个方法的优化原理做了一些研究，希望能给大家对于图片优化这一块起到抛砖引玉的作用。

腾讯财付通设计中心Jia：提到图片，我们不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。

常见的格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下手，具体如何进行优化呢？

下面来给大家介绍一下图片的一些基本原理和优化的方法：

JPG原理与优化

JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准．这个标准是由ISO/IECJTC1/SC29WG10 所订定。

压缩算法为正、反离散余弦转换，如下图：

反离散余弦转换即把整个流程反转。

这里的8X8像素区块是我们JPG优化方法的重点，在之后会涉及到取样、区块量化、扫描的步骤，然而取样、区块量化这两个步骤将是导致图像失真的过程，也是我们优化工作所涉及到核心部分。

取样：

这里所提到的可以很好的解释到下面JPG优化方法中的色彩优化；

JPG将不同的色彩当作独立的成份，因此各个成份可以被视为一个灰阶影像来处理，如果各个颜色成份间没有关联性时．便可以将压缩的效果处理得最好，因此把红(R)、绿(G)、蓝(B)的成份转换成：亮度(Luminance)(Y)、色度(Chrominance)(Cb和Cr)，使得各项没有关联的成份：

Y=0.299R+0.587G+0.144BCb=-0.169R-0.331G+0.500BCr=0.500R-0.419G –0.081B

由于人的视力系统对色度的敏锐度不高，因此以YCbCr色度的方式来表示可以再做一次作取样(Subsampling)来减低信息量：

4:4:4格式代表YC

4:4:4格式代表YCbCr原来完整的信息，可以再次取样以4:2:2或4:2:0格式来表达;4:2:2

格式将原本的信息量减少为三分之二，而4:2:0格式则可以将信息三减少为一半。虽然

色度的信息量减少了．但对人的视觉神经而言却仅仅感受到微小的差别而已。

区块量化：

为了说明执行离散余弦转换(DCT)的影响，我们将以自一张图去下的8×8区块的亮度资

料转换成符合DCT运算范围内的系数表：

低频部分包含了区块的大部分能量，而对视觉较不敏感的高频部分，则通常只含有较低

的能量。

接下来对亮度系数做量化处理的矩阵系数表：

接下来对亮度系数做量化处理的矩阵系数表：

在亮度系数的量化方面每个DCT系数除以相对的量化矩阵的值，在四舍五入后得到如

下的量化后DCT系数（例如-80/16=-5）：

注意量化后区块高频部份出现许多零值，代表人类视觉系统对高频部份并不敏感。由于四舍五入的部份并不能在解码时重现，因此这个步骤将是个失真的过程。

注意量化后区块高频部份出现许多零值，代表人类视觉系统对高频部份并不敏感。由于

四舍五入的部份并不能在解码时重现，因此这个步骤将是个失真的过程。

扫描：

区块在量化之后，只有低频的部分有非零值，为了进一步地减少储存空间的大小，尽可

能地将零值放在一起，使得处理时能以几个零来表示而非个别的处理每个零，因此运用

了如下图的方式做斜向扫描：

这种斜向扫描的扫描线乃是沿着空间频率大小增加的方向作扫描的，使得许多的零可以

这种斜向扫描的扫描线乃是沿着空间频率大小增加的方向作扫描的，使得许多的零可以

被串接在一起，以达到更好的效果。

了解上述3个流程后，后续我们做JPG优化的时候会更得心应手了，如何处理颜色，

如何减少颜色数值而却又最少的减少图片失真的比率。

接下来为大家介绍下JPG常用的几种优化方法：

8像素栅格

如下2副图片所示，图片为32X32，白色方块宽高为8X8：

正如大家看到的，左上角的小方块正好对齐在“8像素栅格”，这样就确保小方块保持是锐利。当保存的时候，图片会被分成许多的8×8px的区块，而软件是对每一个区块

正如大家看到的，左上角的小方块正好对齐在“8像素栅格”，这样就确保小方块保持

是锐利。当保存的时候，图片会被分成许多的8×8px的区块，而软件是对每一个区块

进行独立优化的。由于右下方的方块并不匹配这些区块（也就是这个方块跨越了几个区

块，正好落于区块的交接线上），优化器在寻找索引的时候就会在黑色和白色之间寻

找平衡，即添加了杂色。