JPG / JPEG
优点：
- 有损压缩
- 不支持透明
- 适合色彩丰富的照片
- 体积小、加载快
缺点：当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显
PNG
优点：
- 无损压缩
- 有 PNG8 和 PNG24
- 适合图标、背景、按钮
缺点：体积大
PNG 还是 JPG
- 复杂的、色彩层次丰富的图片，用 PNG 来处理的话，成本会比较高，我们一般会交给 JPG 去存储
- 考虑到 PNG 在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等
SVG
优点：
- 文件体积更小，可压缩性更强
- 矢量图，图片可无限放大而不失真
- 兼容性好
缺点：渲染成本比较高，会影响性能
Base64
Base64 并非一种图片格式，而是一种编码方式
优点：Base64 通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数
缺点：图片大小会膨胀为原文件的 4/3，因此只有在传输非常小的图片的时候，Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销，与它节省掉的 HTTP 请求开销相比，可以忽略不计，这时候才能真正体现出它在性能方面的优势
使用场景：
- 图片的实际尺寸很小
- 图片不适合以雪碧图的形式与其它小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）
- 图片的更新频率非常低，如 logo
WEBP
优点：
WebP 支持有损和无损，它可以像 JPG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片。总而言之，它集多种图片文件格式的优点于一身。
缺点：
兼容性不好
我们可以使用这样的处理方案：在浏览器环境支持 WebP 的情况下，优先使用 WebP 格式，否则就把图片降级为 JPG 格式
参考资料：
https://juejin.cn/book/6844733750048210957/section/6844733750106914830