JPEG

JPEG 是由 Joint Photographic Experts Group 所开发出的一种图片。

它最大的特点是 有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。

另一方面，即使被称为“有损”压缩，JPG 的压缩方式仍然是一种高质量的压缩方式：

当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。

此外，JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求，

这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉。

优点

• JPEG 格式的图片可以呈现数百万种颜色。所以每当网站需要呈现色彩丰富的图片，JPEG 总是最佳选择。

• 有损压缩，你可以通过压缩大大的减少图片的体积，一般图片用 60%级别比较合适，如果选择大于 75%的压缩等级，则会使图片有明显的质量下降。

• 无兼容性问题，所以开发者可以放心随意使用。

使用场景

• JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPEG 图片经常作为大的背景图、轮播图或 Banner 图出现。

• 但是有损压缩后的图片确实很难露出马脚，当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩的图片模糊会相当明显。

• JPEG 图像不支持透明度处理，透明图片可选择使用 PNG。

PNG

PNG（可移植网络图形格式）是由 W3C 开发的图片格式，是一种无损压缩的高保真的图片格式。

它同时支持 8 位和 24 位，这里都是二进制数的位数。

按照我们前置知识里提到的对应关系，8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。

PNG 图片具有比 JPEG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它弥补了上文我们提到的 JPEG 的局限性，唯一的缺点就是　体积太大。

应用场景

• PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。

• 支持透明度处理，透明图片可选择使用 PNG

GIF

GIF 是一种最多支持 256 种颜色的 8 位无损图片格式。这个限制让 GIF 格式对于多颜色或者摄影图片的展示无能为力。

优点

• 支持 256 中颜色，文件体积通常都很小

• 支持透明

应用场景

• 支持动画，适合去展示一些无限循环的动画，比如图标、表情、广告栏等。

• 对于一些只有简单色彩的图片非常合适。

WebP

WebP 是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式 VP8。

它像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片，集多种图片文件格式的优点于一身。

WebP 最初在 2010 年发布，目标是减少文件大小，但达到和 JPEG 格式相同的图片质量，希望能够减少图片档在网络上的发送时间。

根据 Google 较早的测试，WebP 的无损压缩比网络上找到的 PNG 档少了 45％的文件大小，

即使这些 PNG 档在使用 pngcrush 和 PNGOUT 处理过，WebP 还是可以减少 28％的文件大小。

虽然 webP 有诸多优点，但是它不能完全替代 JPEG 和 PNG，因为浏览器对 WebP 支持并不普遍。

特别是移动端 IOS 系统基本不支持。