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

JPG、PNG、GIF图片格式 一、基本概念 要了解图片格式的特性，先一些基本概念。这部分比较枯燥，但如果你完，获益匪浅。 矢量图与位图 矢量图-完美的几何图形 矢量图是通过一些基本图形元素，如点、线、面，边框，填充色等通过计算方式来显示的图形。描述一个圆通过圆心位置和半径，通过边框粗细、颜色及填充色等描述样式。电脑显示时通过这些绘制出定义的图像。 矢量图的，且不失真。缺点是表现。 web页图像都是位图，即便有些矢量图形也是矢量工具绘制后转成位图格式。 位图-神奇的拼图 又叫像素图或栅格图，是通过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像。一张位图好比一幅拼图，每个块是一个像素点，把这些不同颜色的像素点按一定规律在一起，就形成图像。一幅像素图时，能看这些像素点（下图）。 位图的点是显示色彩丰富的图像。缺点是文件较大，会失真。 尽管web页中的JPG、PNG、GIF格式都是位图，但的方式，这就是有损和无损压缩的区别。 有损压缩与无损压缩 有损压缩你看到的不一定是真的 有损压缩就是在存储图像时不完全记录图像每个像素点信息，它根据人眼观察现实的特性（人眼对光线敏感度比对颜色的敏感度高生物实验证明当颜色缺失时人脑会利用附近最接近颜色自动填补缺失颜色）图像数据，被人眼忽略的细节，用渐变或其他填充。这样既大大降低图像的数据量，影响图像的还原效果。 JPG是最常见的用有损压缩图像信息的格式。在存储图像时把图像分解成8*8像素的栅格（如上图），然后对每个栅格进行压缩，放大一幅图像时，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近颜色进行填充（为看得更清楚将图像压缩比调很低）。这也是为什么JPG图像时产生块状模糊的原因。 无损压缩-最精确的拼图 无损压缩真实记录图像每个像素点的数据信息，但为了压缩图像文件的大小采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。 PNG是最常见的无损压缩图片格式。在存储图像前无损压缩判断相同不同，对图像颜色进行索引（如上图），这些颜色称为索引色。索引色好比绘制图像的“调色版”，在显示图像时用“调色版”上颜色填充相应位置。 既然PNG用无损压缩为什么PNG图片还失真？这是因为无损压缩只是压缩方式还原图像，但压缩是通过索引图像上相同区域颜色进行压缩和还原，图像上的颜色数量小于可以保存的颜色数量时，记录和还原图像，否则就会丢失一些信息（PNG8只能索引256种颜色，所以对颜色多不能真实还原；PNG24可以保存1600多万种颜色，真实还原人眼可以的所有颜色PNG格式最多可以保存48位颜色。有损压缩，颜色多少，都损失图像信息。 JPG和PNG 这里不GIF，因为PNG取代GIF，而且PNG的压缩算法优于GIF，所以不需要动画建议都采用PNG格式。 这里我们不妨把JPG和PNG的一些特性进行一个简单对比： 格式 压缩模式 交错支持 透明支持 动画支持 JPG 有损压缩 支持 不支持 不支持 PNG 无损压缩 支持 支持 不支持 JPG特性 支持摄影或写实图像的压缩，并且可利用压缩比控制文件大小。 有损压缩会图像数据质量，在编辑和保存JPG格式时，这种损失。 JPG不颜色很少、大块颜色相近或亮度差异明显的简单图片。 PNG特性 能尽可能压缩图像文件的大小。 储灰度图时，深度可16位，存储彩图时，深度48位，并且还可存储16位通道数据。 对保真的复杂图像，PNG能无损压缩，但文件较大，不适合用上。 PNG8与PNG24 PNG8和PNG24叫法并非官方定义，已经被大家广泛接受。PNG8和PNG24后的数字PNG可以索引和存储的颜色值。的8次方256色，24”则表示2的24次方1600多万色。 PNG8还支持1位布尔透明通道，透明不透明PNG24则支持8位（256阶）alpha通道，从透明到不透明256级（即半透明）。 格式 最高支持色彩通道 索引色编辑支持 透明支持 PNG8 256色 支持 支持布尔透明 PNG24 约1600万色 不支持 支持8位（256阶）alpha透明 、实际应用 什么时候用PNG 示例1 下图是淘宝网最常见的一个图片“立刻购买”按钮，这里用JPG和PNG8格式分别保存，可以看到： JPG保存的文件大小是PNG保存的文件大小的2倍 JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的） 什么原因？ 首先“立刻购买”按钮用矢量工具绘制的，其渐变填充是规则的线性渐变，字色和描边都采用纯色，所以图像的色彩。无损压缩特性，用PNG存储只需很少色彩信息就可以真实还原。而