前置知识：二进制位数与色彩的关系
在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的，
一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越清晰，文件体积相应也会越大
JPG / JPEG
优点
①：体积小
②：加载快
③：支持颜色种类多
缺点
①：有损压缩
②：不支持透明
使用场景
JPG 适用于呈现色彩丰富的图片，在日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现
注：JPEG和JPG指代同一种图片格式，前者是后者的全称，后者是简称
PNG-8 / PNG-24
优点
①：支持透明，弥补了JPG的不足
②：无损压缩，图片质量更高
缺点
①：什么都好，就是体积太大
使用场景
主要用它来呈现小的 Logo 和需要透明效果的图片（比如透明背景图，透明Logo图）
注：PNG-8和PNG-24区别在于支持色彩多少的不同。前者最多支持256种颜色，后者支持1600万种颜色
GIF
优点
①：体积小
②：支持透明
③：支持动图
缺点
①：最多只支持256种颜色，成像效果较差
使用场景
主要用于需要有动画效果的图片
SVG（矢量图形）
优点
①：即使无限放大，图片依然不失真
②：相对于JPG和PNG，体积更小
缺点
①：对性能有一定影响
使用场景
SVG 是文本文件，我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，
也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="50" cy="50" r="50" /> </svg> </body> </html>
将 SVG 写入独立文件后引入 HTML
<img src="文件名.svg" alt="">
补充——Base64
前置知识：
雪碧图（又被称为CSS Sprites、CSS 精灵、图像精灵）
是一种将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示其中每一部分的技术，从而减少http请求
Base64严格意义上来说并不是一种图片格式，而是作为小图标解决方案而存在的，可以理解为是雪碧图的一种补充
Base64 通过对图片进行编码，可以直接将编码结果写入 HTML 或者 CSS，从而减少 HTTP 请求的次数
比如现在有一个放大镜图标
图片路径是：https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680
按照一贯思路，我们加载图片需要把图片链接写入 img 标签，然后向服务器发送请求
<img src="https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680">
但如果我们对这个图片进行 Base64 编码，会得到一个下图所示的字符串：
原来浏览器是可以理解这个字符串的，它自动将这个字符串解码为一张图片，而不需再去发送 HTTP 请求