前言
在互联网快速发展，热火朝天的当下，无论是PC端，还是移动端，图片都是必不可少的元素。好的图片能让我们的应用熠熠生辉。同时用户体验也是至关重要，我们在保证图片质量的同时，还要考虑应用的性能，正确的图片格式能为我们的应用带来好的性能，反之则不然。那么面对那么多的图片格式（JPEG，png，gif，svg，webp），我们应该如何选择呢？
一、JPEG
JEPG由联合图像专家小组（Joint Photographic Experts Group）于1992年创建，并以创建者命名。JPEG是一种有损光栅图像格式，这意味着每次压缩保存JPEG时，一些信息将发生不可逆转地丢失。
JPEG利用人眼感知的缺陷 对亮度比对颜色更敏感 使用了一种压缩算法来丢弃我们不太擅长获取的信息，因此属于有损格式。压缩率的设置将决定最终保存文件的大小和质量。
1.用途
因为JPEG适用于亮度和色彩压缩，所以在照片，以及其他写实或者带阴影的图像（如绘画和3D渲染）上使用效果良好。这就是为什么它是多年来最流行的存储图片的格式。出于同样的原因，JPEG不适宜用在矢量图片，如徽标，几何图形，截图等方面。
2.压缩
作为有损格式，JPEG文件的压缩率与最终图像质量呈反比。在像Photoshop这样的工具中保存JPEG时，你会看到一个从0到100的质量设置。Photoshop设置了一些图像质量范围：
| 图像质量 | 压缩百分比 |
|---|---|
| 低 | 10% |
| 中 | 30% |
| 高 | 60% |
| 非常高 | 80% |
| 最佳 | 100% |
Web页面上建议使用在50％到60％质量之间的JPEG，因为它能兼顾不错的图像质量和较小的文件尺寸。删除元数据也可以减少JPEG文件体积。
压缩工具：
- 在线：TinyJPEG
- Mac上 ImageOptim
- Windows上 RIOT
二、PNG
可移植网络图形（Portable Network Graphics），是一种自1995年以来就一直存在的光栅图像格式。它与JPEG不同，因为它是一种无损格式，并且是目前网络上最常见的无损格式。这意味着由于它的压缩算法，当文件被保存和压缩时，不会丢失任何信息。
1.特性
- 透明通道 - 意味着每个像素可以具有不同的透明度;
- 8位文件可以使用基于调色板的颜色模型（也称为索引颜色） - 这意味着如果减少颜色数量，文件可能更小;
- 依据libPNG的说法，PNG压缩效率比GIF高25％;
- 二维隔行扫描 - 图像会在加载过程中渐进显示，而不是只有当图像完全加载时才显示。你必须谨慎使用此选项，因为它会增加文件大小。
2.用途
PNG对于线条图，LOGO，图标和颜色较少的图像非常适合。颜色复杂的照片和图像使用PNG格式将生成巨大的文件。PNG另一个优点是支持透明背景。对于需要透明背景支持的情况，即使是复杂的图片仍然需要使用PNG，因为JPEG中无法实现图片透明。
3.压缩
因为PNG中的压缩算法是无损的，你可以选择性地减少它的颜色，从而通过外部工具减小图片尺寸。
压缩工具：
- Pngquant
- Pngyu
- ImageAlpha
- TinyPNG
三、GIF
图形交换格式（Graphics Interchange Format）也是一种位图格式。GIF与PNG具有类似的特性，但有自己的一些缺点：
- 仅支持256种颜色;
- 一维隔行交错 — 图像会渐进显示，但不够平滑;
- 与PNG相比压缩性能差;
- 二进制透明度 - 像素只能是100％透明或100％可见;
- 有歧义的发音
GIF因动画而出名并被广泛使用。但是，现在即使是动画也可以通过其它的方式完成，而且文件大小更小。例如使用SVG和Javascript，PNG序列帧或视频也可以更好的实现动画。所以，除非有非常特殊的原因必须使用GIF，否则建议大家使用大众化的PNG或SVG。
四、SVG
可伸缩矢量图形（Scalable Vector Graphics）是矢量格式。这意味着它不会基于像素存储数据，而是通过记录坐标的形式存储图形信息。SVG使用基于XML的语义化标签结构，这有点像HTML。由于是DOM结构，你可以通过ID获取SVG元素，并操纵它们。
SVG图片能不丢失任何细节地放大到任何大小。打个比方，同一个图标，可以以多种尺寸使用，并且在任何屏幕分辨率（比如Retina显示器）中都将看起来很清晰，而不需要存成多个文件。
1.用途
SVG在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。在一些情况下，SVG和PNG都能很好地达到同一个目的。对于线条艺术，SVG通常能生成较小的文件。
但是这不是必然的，实际情况会根据矢量图像究竟有多少个锚点，它甚至可能会生成比PNG更大的文件。 SVG真正出色的地方是数据可视化。由于可以使用JavaScript来操纵和创建矢量动画，诸如D3之类的库提供了无限的可能性.
2. 压缩
关于SVG的压缩，比较好的方法应该是通过清除SVG矢量图形中不必要的锚点、元素和属性来减少文件大小。锚点绘制了矢量图像，因此，你需要确保已移除的锚点不会影响矢量图形的最终形状。
元素标签是包含在SVG文件内的所有内容，包括开始和结束标签。矢量编辑软件，如Adobe Illustrator和Sketch可能会到处含有非必要元素和属性的SVG。SVG压缩器可用于删除这种多余的信息。
压缩工具：
- Compressor
- SVGOMG
- SVGO
五、WebP
WebP（发音 weppy），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。
1.WebP的优势
- PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
- 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
- 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
2.兼容性 & 可用性
根据对目前国内浏览器占比与 WebP 的兼容性分析，大约有 50% 以上的国内用户可以直接体验到 WebP，如果你的网站以图片为主，或者你的产品基于 Chromium 内核，建议体验尝试。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析库。
WebP 除了在解码时间与 PNG 有较明显差异（毫秒级别）之外，总体（流畅程度、CPU使用，内存占用）使用体验和 PNG 基本无差异。同时也需要明确，移动设备的发展迅猛，硬件升级快，上一年的表现也许在今年又有了明显的提升。所以，在 App 中使用 WebP 基本没有技术阻碍。
3.Animated WebP
Animated WebP的优势：
- 支持有损和无损压缩，并且可以合并有损和无损图片帧
- 体积更小，GIF 转成有损 Animated WebP 后可以减小 64% 的体积，转成无损可以节省 19% 的体积
- 颜色更丰富，支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明）
- 添加了关键帧、metadata 等数据
Animated WebP存在的问题：
- 消耗较多的 CPU 和解码时间（多 1.5~2.2 倍）
- 和 GIF 相比起来支持度还不够，目前仍无法通用
- 为了支持 Animated WebP，Chrome 的新内核 Blink 添加了近 1500 行的代码
总结
根据以上各种图片格式的优缺点对比，我们可以根据应用场景，选择适合我们的图片格式。对于从网络加载的图片，无论是PC，还是移动端，建议采用Webp格式。
