图片格式	体积	压缩(有损/无损)	支持透明	缺点	适用场景
jpg/jpeg	小	有损	❌	不支持透明；用于其他场景效果不好，比如 Logo	适用于色彩丰富的图片，比如大的背景图、轮播图或 Banner 图
png	大	无损	✅	体积太大	小的 Logo、颜色简单且对比强烈的图片或背景等
svg	很小	无损	✅	是可编程的文本文件，有着学习成本；可以是 DOM 的一部分，渲染成本高，对性能不利	矢量图形
base64	根据情况	无损	✅	只适用于很小的图标，因为图片转为 base64 编码之后体积会膨胀为图片体积的 4/3 倍。因此，图片越大，转 base64 编码之后会变的更大，会得不偿失。	小图标，为了减少加载网页图片时对服务器的请求次数，可直接将图片变为 base64 编码写入 html/css，所以严格来讲，base64 是一种编码方式，而并非一种图片格式
webp	小	有损	✅	需要考虑浏览器兼容性。如下图是淘宝网的一件衣服的链接，注意到图片的后缀 .jpg_.webp也可以让后端同事处理一下，让服务器根据 HTTP 请求头部的 Accept 字段来决定返回什么格式的图片。	WebP 集多种图片文件格式的优点于一身，适用于大多数场景。