各种图片格式的适用场景总结

前言

本文的主要内容是 —— 在项目中针对不同场景的图片如何选择恰当的格式，以优化加载，又兼顾显示的效果。而不是随便什么格式，只在乎图片显示的效果。我们还需要去考虑很多问题：

在一些以图片为主要内容的网站建设中，对图片使用的优化是非常讲究的，性能优化必须考虑的一点。因为图片的优化带来的性能提升远远大于你去优化代码逻辑带来的提升。就以天猫为例，几乎全是图片，我们一起学习下电商大佬的图片优化策略，毕竟人家大厂，起步又早，还是非常值得学习的！

有些地方使用 png, 有地方使用 jpg，但是明显 png 的体积远大于 jpg

png 格式, 才 8.5 kB

轮播图发现两种格式：

商品首图几乎都是 jpg_.webp

由此不难得出结论：

那为啥天猫要这么设计呢？这就需要我们去总结各种格式图片的特点和适用场景，再结合起来看。笔者已经整理好了，接着往下看。

除了以上几点，还能发现一个点，看下图中圈出的地方：请求图片时，请求指定宽高的图片，这有啥用？其实这也是一个优化点，因为如果你的容器宽高和图片宽高不一致，浏览器会自动拉伸 / 压缩 / 裁剪图片，一个图可能无所谓，那很多图的话显然也是会影响性能的。看一个被浏览器拉伸 / 压缩 / 裁剪的例子：

好了，接着我们给出常见图片格式及适用场景总结，各位掘友可以对比天猫的实现，是否跟总结的那样契合。

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

掘金小册——前端性能优化原理与实践

感谢观看！如果对你有帮助，别忘了点赞 ➕ 评论 + 收藏哦！