面试官：前端该如何选择图片的格式

原文地址，转载请注明出处。

想当初，这个问题在面试实习的时候被问到。问题看着简单，可是想要回答好还须要下一番功夫来了解的。

若是不想看文章的话直接翻到文末去看结论便可。

so，在开始以前咱们先补充一下图片的一些基本知识。

图片的类型

首先，咱们须要来了解图片的类型。

图片的类型目前就分为两种：

1. 位图
2. 矢量图

位图

所谓位图就是用像素点拼起来的图也叫点阵图，平时咱们用到的png、jpg等图片就是位图。

如上图，将一张图片放大之后能够看到一个一个小点点，这一个一个小点点就是图片的一个像素。

矢量图

矢量图，也叫作向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

不管显示画面是大仍是小，画面上的对象对应的算法是不变的，因此，即便对画面进行倍数至关大的缩放，它也不会像位图那样会失真。

常见的就是svg格式的。

图片的压缩类型

1. 无压缩
2. 有损压缩
3. 无损压缩

无压缩

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。例如BMP格式的图片。

有损压缩

指在压缩文件大小的过程当中，损失了一部分图片的信息，也即下降了图片的质量（即图片被压糊了），而且这种损失是不可逆的。

常见的有损压缩手段是按照必定的算法将临近的像素点进行合并。压缩算法不会对图片全部的数据进行编码压缩，而是在压缩的时候，去除了人眼没法识别的图片细节。所以有损压缩能够在同等图片质量的状况下大幅下降图片的体积。例如jpg格式的图片使用的就是有损压缩。

无损压缩

在压缩图片的过程当中，图片的质量没有任何损耗。咱们任什么时候候均可以从无损压缩过的图片中恢复出原来的信息。

压缩算法对图片的全部的数据进行编码压缩，能在保证图片的质量的同时下降图片的体积。例如png、gif使用的就是无损压缩。

图片位数

图片位数一般分为八、1六、2四、32

至于什么是图片位数咱们这里就不展开说了，由于展开说又要占很多篇幅，有兴趣的童鞋能够看：

1. 图片位数(bites)的区别
2. 图片颜色模式8位，16位和32位的区别是什么
3. 位深度

懒得看的童鞋能够直接看结论：

1. 图片位数越大，能表示的颜色越多，同时占用的体积也约大。例如8位图片支持256种颜色，即2的8次方。
2. 图片位数越大，颜色过渡也就越细腻，携带的色彩信息能够更加丰富。
3. 32位跟24位的区别就是多了一个Alpha通道，用来支持半透明，其余的跟24位基本同样。

常见的图片的格式

GIF

GIF的全称是Graphics Interchange Format，可译为图形交换格式，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。

GIF采用的是Lempel-Zev-Welch（LZW）压缩算法，最高支持256种颜色。因为这种特性，GIF比较适用于色彩较少的图片，好比卡通造型、公司标志等等。若是碰到须要用24位真彩色的场合，那么GIF的表现力就有限了。

GIF格式图片最大的特性是帧动画，相比古老的bmp格式，尺寸较小，并且支持透明(不支持半透明，由于不支持 Alpha 透明通道 )和动画。

优势

1. 体积小
2. 支持动画

缺点

因为采用了8位压缩，最多只能处理256种颜色

JPEG/JPG

JPEG是Joint Photographic Experts Group(联合图像专家组)的缩写，文件后辍名为"．jpg"或"．jpeg"，是经常使用的图像文件格式，由一个软件开发联合会组织制定，是一种有损压缩格式，可以将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，所以容易形成图像数据的损伤。尤为是使用太高的压缩比例，将使最终解压缩后恢复的图像质量明显下降，若是追求高品质图像，不宜采用太高压缩比例。

优势

1. 采用有损压缩，压缩后体积更小
2. 支持24位真彩色
3. 支持渐进式加载

缺点

1. 有损压缩会损坏图片的质量
2. 不支持透明/半透明

渐进式jpeg(progressive jpeg)图片及其相关

渐进式jpeg是什么鬼？

先上两张图压压惊：

普通jpg：

渐进式jpg：

从上面两张图能够看到，普通的jpg是从上往下加载图片的，在网络慢的时候尤其明显。

渐进式jpg文件包含屡次扫描，这些扫描顺寻的存储在jpg文件中。打开文件过程当中，会先显示整个图片的模糊轮廓，随着扫描次数的增长，图片变得愈来愈清晰。

至于怎么生成渐进式图片能够看这里，本文就不展开说了。

PNG

png即使携式网络图形是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增长一些GIF文件格式所不具有的特性。PNG使用从LZ77派生的无损数据压缩算法，通常应用于JAVA程序、网页或S60程序中，缘由是它压缩比高，生成文件体积小。

png支持8位、24位、32位3种，咱们一般叫它们png八、png2四、png32。

png8

8位的png最多支持256(2的8次方)种颜色，png8有1位的布尔透明通道（要么彻底透明，要么彻底不透明）。

PNG-8格式与GIF图像相似，一样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的再也不是各个像素的彩色信息，而是从图像中挑选出来的具备表明性的颜色编号，每一编号对应一种颜色，图像的数据量也所以减小，这对彩色图像的传播很是有利。

更多关于索引色模式看这里

PNG24

支持2的24次方种颜色，即rgb分别用8位，不支持透明。

注意： png24是不透明的，是不透明的，是不透明的。

这有人就会说了，我用PS导出的png明明是png24的，并且也选了透明了，出来的图就是透明的啊？为何png24就不透明的了咧？

这个时候能够看图片详情，看看你导出的图片深位度是否是24的？

若是是透明的话就是32，不然就是24，只是在你导出的时候PS偷偷帮你转了一下。

PNG32

它是在png在24位的png基础上增长了8位的透明信息，支持不一样程度的半透效果，例如咱们css设置rgba(0,0,0,0.5)。

优势

1. 无损压缩
2. 支持透明、半透明
3. 最高支持24位真彩色图像以及8位灰度图像，从而完全地消除锯齿边缘。

缺点

1. 与jpg的有损耗压缩相比，png提供的压缩量较少
2. 不支持动画，如需支持动画还得使用apng

APNG

APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式。实际上就是多张png组成的动图。MAC电脑打开能够看到组成apng的每一张图。

优势

1. 支持png的全部优势
2. 支持动画

缺点

1. 浏览器支持状况较差

WEBP

WebP是由Google最初在2010年发布，目标是减小文件大小。它能同时支持无损压缩和有损压缩。

它几乎集成了以上全部图片的优势，而且可以拥有更高的压缩率，咱们能够看如下两张图的体积，一张是压缩后的jpg、一张是webp

jpg

webp

能够看到，webp的体积要比jpg的还要小差很少50%！

悲剧的是，webp支持率有点感人

SVG

SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（例如：由直线和曲线组成的路径）、图象、文本。图形对象还可进行分组、添加样式、变换、组合等操做，特征集包括嵌套变换、剪切路径、alpha蒙板、滤镜效果、模板对象和其它扩展。 SVG图形是可交互的和动态的，能够在SVG文件中嵌入动画元素或经过脚原本定义动画。

SVG与上面图片不一样的是它是矢量图，不管你怎么放大，它都不会失真；同时，SVG文件一般要比比JPEG和PNG格式的文件要小不少。

优势

1. SVG 可被很是多的工具读取和修改（好比记事本）
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不降低的状况下被放大
6. SVG 能够与 JavaScript 技术一块儿运行
7. SVG 文件是纯粹的 XML

缺点

1. 渲染成本相对于其余格式图片比较高，对于性能有影响。
2. 须要学习成本，由于SVG是一种用XML定义的语言。

SVGA

SVGA其实就是一个动画播放引擎，在这里说到它其实有点脱离了主题，因此就简单提下。

svga的用法可见官方文档

若是你是vue的用户，可使用我封装的vue-svga组件，是基于svga.lite封装的，svga.lite是SVGAPlayer的阉割版。

当设计须要输出复杂动画的时候能够考虑输出svga格式的文件。相比bodymovin输出的json文件要小不少。

优势

1. 能够控制动画的播放与暂停，还能够监听动画的播放状态
2. 体积相对于apng更小
3. 能够随意地放大缩小而不失真
4. 浏览器兼容性良好

缺点

1. 须要js解析，同一页面不宜使用过多svga动画，不然会消耗过多的性能。

如何选择图片的格式

经过分析以上常见图片的优缺点咱们能够像下图同样选择图片的格式

参考连接

每一个前端工程师都应该了解的图片知识 背景透明图片格式png八、png2四、png32区别 关于 PNG8/PNG24/PNG32 之间的区别