前端图片使用说明书
前端的图片使用一直都是前端开发中的重要组成部分，除了不同的图片格式jpeg、png、svg、gif、webp等，还有使用<img />、<image />等标签引入，以及采用url和src不同的方式引入和图片的压缩方式都是我们在前端开发中需要进行合适选择和应用的部分。
图片格式
JPEG(Joint Photographic Experts Group)
JPEG也就是我们常见的后缀为.jpg以及.jpeg的图片，这是遵循国家标准化组织(ISO)制定的便准的产物。
优点
- 支持高压缩率，压缩处理容易，条件自由，能最大化减少图片请求体积
- 支持16.8M颜色，也就是色域更广
缺点
- 压缩不能确保是无损压缩，对高清晰度的图像支持不友好
适用场景
颜色丰富的图片，对清晰度要求较低的图片
PNG(Portable Network Graphics)
相比起JPEG，PNG采用无损压缩算法的位图格式。 PNG 格式有 8 位、24 位、32 位三种形式，其中 8 位 PNG 支持两种不同的透明形式（索引透明和 alpha 透明），24 位 PNG 不支持透明，32 位 PNG 在 24 位基础上增加了 8 位透明通道，因此可展现 256 级透明程度。
PNG8 和 PNG24 后面的数字则是代表这种 PNG 格式最多可以索引和存储的颜色值。8 代表 2 的 8 次方也就是 256 色，而 24 则代表 2 的 24 次方大概有 1600 多万色。
优点
- 无损压缩
- 支持
alpha透明度 - 可以重复保存且不降低图片质量
缺点
- 体积偏大，带来的请求体积变大
适用场景
纯色、透明、线条绘图、图标、边缘清晰，有大块相同颜色区域。颜色数较少，但是需要半透明。
SVG(Scalable Vector Graphics)
SVG是一种基于XML的矢量图形，具备矢量概念的特性外，还支持部分的交互功能。它将图像的内容指定为一组绘制命令，这些命令可以创建形状、线条、应用颜色、过滤器等。
优点
SVG容易修改和读取SVG在缩放后不会对清晰度造成较大影响SVG图片一般体积更小，压缩性更强
缺点
- 内容复杂的图片
SVG渲染会耗费更多的资源
适用场景
高分辨率打印图片程序、简单动画演示、简单效果
GIF(Graphics Interchange Format)
GIF是一种位图，图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。GIF 采用的是 Lempel-Zev-Welch（LZW）压缩算法，最高支持 256 种颜色。 GIF 支持简单动画，其中在初始全尺寸帧之后，提供了一系列图像，反映图像随每一帧变化的部分。
优点
- 本身是压缩格式的文件，体积小
- 支持无损压缩和透明度
缺点
GIF支持的颜色偏少，内容过多时会丢失较多信息
适用场景
动画、简单颜色图标
WEBP(Web Picture format)
通过基于 VP8 视频编解码器的预测编码支持有损压缩，以及使用替换重复数据的无损压缩。有损 WebP 图像比视觉上相似压缩级别的 JPEG 图像平均小 25–35%。无损 WebP 图像通常比 PNG 格式的相同图像小 26%。 WebP 还支持动画：在有损 WebP 文件中，图像数据由 VP8 比特流表示，其中可能包含多个帧。无损 WebP 拥有ANIM描述动画的ANMF块和表示动画序列的帧的块。支持循环播放。 WebP 有静态与动态两种模式。动态 WebP（Animated WebP）支持有损与无损压缩、ICC 色彩配置、XMP 诠释数据、Alpha 透明通道。
优点
- 支持无损压缩和有损压缩
- 同级别下压缩后的体积更小
- 可支持透明
缺点
- 目前只支持主流的浏览器
适用场景
大量图片，对图片加载性能和体积有要求，使用主流浏览器的场景