几种图片格式之间的区别

光栅图片：png\jpg(jpeg)\gif

svg：可缩放的矢量图片

png：无损压缩

PNG

特点：

1. 由W3C开发的图片格式

2. 采用了一种无损的压缩算法并且同时支持8位和24位

3. 具有多层级透明度的网络图片

4. 支持复杂的照片和图形

5. 24位的PNG图片透明度支持使用RGB

6. 尽管GIF和8位的PNG图片变成了完全不透明或完全透明，它的每个像素提供了高达256层级的透明度

JPEG

特点：

1. 不可缩放的矢量图片
2. 目前人们见的最多的有损图片类型
3. 格式的图片可以呈现数百万种颜色
4. 不适合用透明的效果

引用场景：

每当需要在网站上展示摄影作品时，JPEG 总是最佳选择。

gif

特点：

1. 不可缩放的矢量图片
2. 无所压缩
3. 最多支持256种颜色的8位无损图片格式
4. 体积通常小（因为只支持256种颜色）
5. 支持动画
6. 适应于彩色简单的图片，不适应与照片

引用场景：

非常适合去展示一些无限循环的动画，比如图标、表情、广告栏

svg

特点：

1. 可缩放的矢量图片
2. 可以把 SVG 的代码丢到 HTML 中以减少请求数量
3. 可以用 CSS 来 DIY 任何 SVG
4. SVG 格式的图片通常要比光栅格式的图片小很多，特别是当你作了特别的优化并且启用 gzip 压缩的时候
5. 可以用 JavaScript 或者 CSS 让SVG 变成动画

引用场景：

1. 地图、图标、小的图片logo；
2. 摄影作品之类的图片，SVG并不是一个好的选择
3. SVG 适合于插画和简单图像的展示

WebP

1. WebP 是由 Google 开发的一种开源图片格式
2. WebP 是一种现代的网络图片格式，它对于网页上的图片提供了性能出色的压缩水平。
3. WebP 无损压缩比 PNG 的体积小 26%，webP 的有损压缩比同质量的 JPEG 格式体积小 25-34%。
4. 无损压缩的 webP 支持透明度，但却只有 22% 的字节增加。
5. 在同样支持有损压缩 RGB 的情况下，有损的 webP 也支持透明度，并且文件体积是 PNG 的三分之一。
6. WebP 的美妙之处在于它以更小的体积糅合了 JPEG 和 PNG 的优点；

引用场景：

webP 则在所有用到了 JPEG 和 PNG 的场景下成为了更好的选择