前置知识：二进制位数与色彩的关系
内容出自前端性能优化原理与实践，我作为笔记简单记录下。
一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。
JPEG/JPG
关键字：有损压缩、体积小、加载快、不支持透明
把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。此外，JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求
使用场景
JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。
PNG-8 与 PNG-24
关键字：无损压缩、质量高、体积大、支持透明
PNG 的优点
PNG 图片对透明度有良好的支持。它弥补了上文我们提到的 JPG 的局限性，唯一的 BUG 就是体积太大。
应用场景
用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。
SVG
关键字：文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
SVG 的特性
SVG 与 PNG 和 JPG 相比，文件体积更小，可压缩性更强。
它最显著的优势还是在于图片可无限放大而不失真这一点上。
SVG 的局限性主要有两个方面，一方面是它的渲染成本比较高，另一方面，SVG 存在着其它图片格式所没有的学习成本（它是可编程的）。
SVG 的使用方式与应用场景
SVG 是文本文件，可以编辑，也可以把对图形的描述写入以 .svg 为后缀的独立文件
将 SVG 写入 HTML：
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
将 SVG 写入独立文件后引入 HTML:
<img src="文件名.svg" alt="">
Base64
关键字：文本文件、依赖编码、小图标解决方案
Base64 并非一种图片格式，而是一种编码方式。Base64 和雪碧图一样，是作为小图标解决方案
WebP
它于 2010 年被提出， 是 Google 专为 Web 开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩。
WebP 的优点
WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。
WebP 的局限性
任何新生事物，都逃不开兼容性的大坑
网友评论