优化图片加载
yaofly2012 opened this issue · comments
常见手段：
- 压缩手段：
- webp
- 网络：
- CDN
- 缓存（一般采用强制缓存+hash方式命名图片）
- 用户体验：
- 图片懒加载
- 技术手段：
- 响应式图片加载
众神归位：
各类图片优化技术总体可分为三类：
- 更小
- 更少
- 更快
| 分类 | 技术 |
|---|---|
| 更小(load lighter) | 1. 图片压缩； 2. webp; 3. 响应式图片 |
| 更少(load fewer) | 1. 图片懒加载 |
| 更快(load faster) | 1. CDN; 2. 缓存; 3. 让用户感觉更快（如占位图(Image placeholder)） |
更小(load lighter)
1. 图片压缩
图片压缩估计是最简单优化技术，甚至简单到被忽略。使用合适大小的图片真的是一种智慧。个人一般采用tinypng在线工具压缩图片。如果实在压缩不了了，就找UED小姑娘帮忙压缩。
2. 选择合适的尺寸
- 服务端动态切图？
- 响应式图片
3. webp
选择合适的图片格式和质量。
案例分析 TODO
medium图片加载效果：先加载质量差的，再加载质量好的。如这里
怎么做到的？
ethereum.org图片加载效果：先模糊后高清
<img
sizes="(max-width: 1440px) 100vw, 1440px"
srcset="https://d33wubrfki0l68.cloudfront.net/9303cea40ed372c462be555485742c304872f05a/79632/static/28214bb68eb5445dcb063a72535bc90c/f4094/hero.png 360w, https://d33wubrfki0l68.cloudfront.net/63564979cb7a5a9d7590e8a6afc5cf05d0354903/b40c2/static/28214bb68eb5445dcb063a72535bc90c/3c17d/hero.png 720w,
https://d33wubrfki0l68.cloudfront.net/d0c191007cb249049b9a06c970cf19829fd9af38/ced0d/static/28214bb68eb5445dcb063a72535bc90c/3bf79/hero.png 1440w,
https://d33wubrfki0l68.cloudfront.net/d010f5d524a5e96b8ac03f2d9507f341002a860a/802f5/static/28214bb68eb5445dcb063a72535bc90c/c3328/hero.png 2160w,
https://d33wubrfki0l68.cloudfront.net/b13f01d8d1425ac59d0ddc99be91a9280acfe341/c2854/static/28214bb68eb5445dcb063a72535bc90c/96d01/hero.png 2880w,
https://d33wubrfki0l68.cloudfront.net/08c447fe218b31f8448a0efb79ba72df299cb918/8d85b/static/28214bb68eb5445dcb063a72535bc90c/92c43/hero.png 4200w"
src="https://d33wubrfki0l68.cloudfront.net/d0c191007cb249049b9a06c970cf19829fd9af38/ced0d/static/28214bb68eb5445dcb063a72535bc90c/3bf79/hero.png"
alt="An illustration of a futuristic city, representing the Ethereum ecosystem."
loading="eager"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"
>本质就是占位图，采用的是Gatsby生成的网站。