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

前言

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

1. 加载快不快？针对不同客户端的网络、机器性能，能否均衡一下？实现一些兼容性的策略？
2. 图片格式那么多，如何针对不同的场景 选择合适的格式?
3. 如何在 性能 和 效果 做抉择？
4. 等等......

从淘宝天猫学习图片的优化

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

背景图 png

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

logo

png 格式, 才 8.5 kB

轮播图

轮播图发现两种格式：

• jpg 格式

• jpg_.webp（这应该是 优先 webp, jpg兜底）

商品首图

商品首图几乎都是 jpg_.webp

由此不难得出结论：

1. logo —— png格式
2. 背景 —— jpg / png
3. 轮播图 —— jpg / webp
4. 商品首图 —— 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集多种图片文件格式的优点于一身，适用于大多数场景。

参考

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