移动web性能优化篇-图片的大小
控制图片大小
图片高宽越大，意味着需要越多的网络开销。常见图片格式都经过了高度压缩，尺寸越大的图片还意味着浏览器在解码过程中需要耗费更多 CPU，解码之后的位图需要占用更多内存。在移动端，我们更应该关注图片大小。
- 根据 DPR（window.devicePixelRatio，设备像素比）选择合适的图片尺寸。 现在的手机基本上都是高清屏，如果一味追求让图片更小而使用单倍图也不现实。这一点上，最佳实践是根据产品特性，结合用户 DPR 分布情况来选择合适的尺寸。例如在我们某个产品中：图片加载速度比图片质量更重要；用户 DPR 分布前三是：2、3、1.5。我们最终使用了 1.5 倍图，并且在图床缩放图片时，加了一点点锐化效果。最终图片体积很小，质量也尚可接受。
- 处理好响应式图片（Responsive Image）。 移动上很多图片宽度不是固定像素值，例如通栏 Banner 图片的宽度是跟着设备走的。对于这种场景，使用 JS 获取设备宽度，拼出最适合当前设备的图片尺寸，交给图床进行缩放，无疑能在图片体积和质量上找到最佳平衡点。但这种做法并不可取，移动设备宽度各式各样，如果裁图规格太多，容易降低 CDN 缓存命中率。图床实时处理完图片再分发到 CDN 更耗时，在移动端让图片命中 CDN 缓存也很重要。处理响应式图片的最佳实践是根据用户屏幕尺寸分布，制定出几档裁图规则，页面根据用户设备宽度使用最合适的档位，并对重要的图片（例如头部焦点图）提前预热 CDN。
- 使用 WEBP 格式。 有一种减少图片体积的灵丹妙药 —— 使用压缩比例更高的 WEBP 格式。《移动端图片格式调研》这篇文章详细地对比了各种移动端图片格式及各自适用场景。对于 WEBP 的最佳实践是只要浏览器支持就用，虽然 WEBP 解码慢于 JPG，但在同等图片质量下，WEBP 体积通常比 JPG 小很多。
要判断浏览器是否支持 WEBP，可以检查 HTTP 请求头部字段 Accept 的值是否包含 webp。例如这是 Chrome 给图片请求加的 Accept：
Accept: image/webp,image/,/*;q=0.8