This article is participating in the "Golden Stone Project"
foreword
The main content of this article is - how to choose the appropriate format for pictures in different scenes in the project to optimize loading and take into account the display effect . Rather than just any format, only care about the effect of the picture display. We still need to consider many issues:
- Does it load fast? Can you balance the network and machine performance of different clients? A strategy to achieve some compatibility?
- There are so many image formats, how to choose the appropriate format for different scenarios?
- How to make a choice between performance and effect?
- etc......
Learning Image Optimization from Taobao Tmall
In the construction of some websites with pictures as the main content, the optimization of the use of pictures is very particular, and performance optimization must be considered. Because the performance improvement brought about by image optimization is far greater than the improvement you can bring about by optimizing the code logic . Take Tmall as an example, almost all of them are pictures. Let’s learn together the picture optimization strategies of e-commerce giants. After all, they are big companies and started early, so it’s worth learning!
background imagepng
It is used in some places png, and it is used in other places jpg, but the pngobvious volume is much larger thanjpg
logo
pngformat, only 8.5 kB
Carousel
There are two formats found in the carousel:
-
jpgFormat -
jpg_.webp(This should be the prioritywebp,jpgthe bottom line)
Product first image
The first picture of the product is almost all jpg_.webp
It is not difficult to draw conclusions from this:
- logo——png format
- Background ——jpg/png
- Carousel - jpg / webp
- The first picture of the product - jpg / webp
So why did Tmall design it this way? This requires us to summarize the characteristics and applicable scenarios of pictures in various formats, and then look at them together. The author has sorted it out, and then look down.
除了以上几点，还能发现一个点，看下图中圈出的地方： 请求图片时，请求指定宽高的图片，这有啥用？其实这也是一个优化点，因为如果你的容器宽高 和 图片宽高不一致，浏览器会自动拉伸 / 压缩 / 裁剪图片，一个图可能无所谓，那很多图的话显然也是会影响性能的。看一个被浏览器拉伸 / 压缩 / 裁剪的例子：
好了，接着我们给出常见图片格式及适用场景总结，各位掘友可以对比天猫的实现，是否跟总结的那样契合。
常见图片格式及适用场景总结
| 图片格式 | 体积 | 压缩(有损/无损) | 支持透明 | 缺点 | 适用场景 |
|---|---|---|---|---|---|
| jpg/jpeg | 小 | 有损 | ❌ | 不支持透明；用于其他场景效果不好，比如 Logo | 适用于色彩丰富的图片，比如大的背景图、轮播图或 Banner 图 |
| png | 大 | 无损 | ✅ | 体积太大 | 小的 Logo、颜色简单且对比强烈的图片或背景等 |
| svg | 很小 | 无损 | ✅ | 是可编程的文本文件，有着学习成本；可以是DOM的一部分，渲染成本高，对性能不利 | 矢量图形 |
| base64 | 根据情况 | 无损 | ✅ | 只适用于很小的图标，因为图片转为base64编码之后体积会膨胀为图片体积的4/3倍。因此，图片越大，转base64编码之后会变的更大，会得不偿失。 | 小图标，为了减少加载网页图片时对服务器的请求次数，可直接将图片变为base64编码写入html/css，所以严格来讲，base64是一种编码方式，而并非一种图片格式 |
| webp | 小 | 有损 | ✅ | 需要考虑浏览器兼容性。如下图是淘宝网的一件衣服的链接，注意到图片的后缀 .jpg_.webp，在浏览器环境支持 WebP 优先使用 WebP 格式，否则就使用 JPG 格式。 |
WebP集多种图片文件格式的优点于一身，适用于大多数场景。 |
参考
掘金小册——前端性能优化原理与实践
This article belongs to my column Front-end performance optimization , the previous article: 2023, let your webpack roll up!
thanks for watching! If it is helpful to you, don't forget to like ➕ comment + bookmark!