前言
在大多数的 web 页面中，图片占到了页面大小的 60%-70%。因此在 web 开发中，不同的场景使用合适的图片格式对 web 页面的性能和体验是很重要的
图片格式种类非常多，本文仅针对几种 web 应用中常用的图片格式：gif、png、jpg、webp 进行一个基本的总结
图片格式分类
- 无压缩。无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一
- 无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png 是其中的代表
- 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg
具体格式
gif
采用 LZW 压缩算法进行编码，是一种无损的基于索引色的图片格式。由于采用了无损压缩，相比古老的 bmp 格式，尺寸较小，而且支持透明和动画
缺点是由于 gif 只存储 8 位索引（也就是最多能表达 2^8=256 种颜色），色彩复杂、细节丰富的图片不适合保存为 gif 格式。色彩简单的 logo、icon、线框图适合采用 gif 格式
jpg
jpg 是一种有损的基于直接色的图片格式
由于采用直接色，jpg 可使用的颜色有 1600w 之多（2^24），而人眼识别的颜色数量大约只有 1w 多种，因此 jpg 非常适合色彩丰富图片、渐变色
jpg 有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。
但是 jpg 不适合 icon、logo，因为相比 gif/png-8，它在文件大小上丝毫没有优势
png-8
png-8 采用无损压缩，是基于 8 位索引色的位图格式
png-8 相比 gif 对透明的支持更好，同等质量下，尺寸也更小。非常适合作为 gif 的替代品
png-8 也一个明显的不足就是不支持动画。这也是 png-8 没办法完全替代 gif 的重要原因。如果没有动画需求推荐使用 png-8 来替代 gif
png-24
png-24 采用无损压缩，是基于直接色的位图格式
png-24 的图片质量堪比 bmp，但是却有 bmp 不具备的尺寸优势。当然相比于 jpg，gif，png-8，尺寸上还是要大。正是因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存
png-24 与 jpg 一样能表达丰富的图片细节，但并不能替代 jpg。图片存储为 png-24 比存储为 jpg，文件大小至少是 jpg 的 5 倍，但在图片品质上的提升却微乎其微。所以除非对品质的要求极高，否则色彩丰富的网络图片还是推荐使用 jpg
png-24 与 png-8 一样也支持透明
base64
定义：Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法
优点
——内嵌在 HTML 或 CSS 中，减少请求数量
缺点
——文件大小为原来的 1.3 倍
——对 Base64 描述很长，可见性下降
——资源不会被浏览器缓存，每次访问都要重新获取，网页显示变慢
为什么使用 base64 编码图片
1、提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64 可以随着 HTML 的下载同时下载到本地.减少 https 请求。
2、加密: 让用户一眼看不出图片内容 , 只能看到编码。
3、方便引用: 在多个文件同时使用某些图片时, 可以把图片转为 base64 格式的文件, 把样式放在全局中, 比如 common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率。
webp
WebP 图片是一种新的图像格式，由 Google 开发
与 png、jpg 相比，相同的视觉体验下，WebP 图像的尺寸缩小了大约 30％。另外，WebP 图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代 png、jpg、gif 等图片格式，当然目前 webp 的还没有得到全面的支持
看一下 png 图片与 webp 图片的对比：
webp 的兼容性：
可以看到 webp 格式的支持度还不是很好，但是移动端的支持整体还可以
总结
选择方式
转载
聊一聊几种常用web图片格式：gif、jpg、png、webp
贡献者
jiechen