前端开发中如何选用图片格式

矢量图与位图

矢量图是通过组成图形的一些基本元素，如点、线、面、边框、填充色等信息通过计算的方式来显示图形的。矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点是这些几何图形很难表现自然度高的写实图像。

我们在web页面上使用的图像都是位图，即便有些称为矢量图形也是指通过矢量工具进行绘制然后再转成位图格式在web上使用。

位图又叫像素图或栅格图，他是通过记录图像中每个点的颜色、深度透明度等信息来存储和消失图像。一张位图就好比一张大的拼图，只不过每个拼块都是一个纯色的像素点，当我们吧这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以，当我们放大一幅像素图时，能看到这些图片的像素点

位图的优点是利于显示色彩层次丰富的写实图像。缺点是文件大小较大，放大和缩小图像会失真

尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即它们都是通过记录像素点的数据来保存显示图像的，但这些不同格式的图像在记录这些数据时的方式却不一样，这就涉及到有损压缩和无损压缩的区别

有损压缩与无损压缩

有损压缩就是在存储图像的时候并不完全真是的记录图像上每个像素点的数据信息，他会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。

JPG是最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分成8

*

8相熟的栅格，然后对每个栅格的数据进行压缩处理，当我们放大一张图像的时候，就会发现这些8

*

8像素栅格中很多细节信息被删除，而通过一些特殊算法用附近的颜色进行填充。者也是为什么我们用JPG存储图形有时会产生块状模糊的原因。

无损压缩 则是真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采用一些特殊的算法。无损压缩的压缩原理是先判断图像上那些区域的颜色是相同的，哪些是不同的然后把这些相同的数据信息进行压缩记录，（例如一篇蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

PNG是我们最常见 的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上那些地方是相同的地方，那些地方是不同的地方。为此需要对图像上所有出现的颜色进行索引，我们把这些颜色成为索引色。索引色就好比绘制这幅图的“调色板”，PNG在显示图像的时候则会用“调色板”上的这些颜色去填充相应的位置。所以这就意味着只有在图像上出现的颜色数小于可以白村的颜色数时，才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引2^8 即256种颜色，所以对于颜色较多的图像不能真实还原；PNG24格式最多可以保存2^24 即1600多万中颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色）而对于有损压缩来说，不管图像上 的颜色多少，都会损失图像信息；

类型	压缩方式	色彩通道	透明度	是否支持动画	压缩算法	多图层
PNG-8	无损	索引256色	索引全透明	否	逐行扫描	无
PNG-24	无损	真彩16.7million色	Alpha半透明（IE6背景灰色）	否	逐行扫描	无
PNG-32	无损	真彩16.7million色	Alpha半透明（IE6背景灰色）	否	逐行扫描	firework中可编辑
GIF	无损	索引256色	索引全透明	支持	逐行扫描	无
JPG	有损	真彩16.7million色	无	无	8*8	无

JPG的特性

支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小

有损压缩会使图像数据质量下降，并且在编辑和从新保存JPG格式图像时，这种下降损失会累积

JPG不适用于所含颜色较少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片

PNG的特性

能在保证不失真的情况下尽可能压缩图像文件的大小

PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据

对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在web页面上

在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小

webP

WebP（发音 weppy），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

参考文献：png、jpg、gif三种图片格式的区别

前端开发中合理选用图片格式