尺寸为什么拖慢网页
图片常占网页重量的一大半。尺寸越大，下载越久，用户等得越烦，谷歌也越不爱推。改对尺寸是最划算的提速手段。
- 图片常占页面重量 50% 以上
- 多 100KB，慢人 3G 下多约 0.3 秒
- 谷歌把加载速度算进排名
各位置该用的尺寸
按显示位置定尺寸，别一股脑传原图。下面是常验证过的数。
- 全宽横幅：1920px 宽，150–200KB
- 博客配图：1200px 宽，80–120KB
- 产品图：800px 宽，60–100KB
- 缩略图：400px 宽，20–40KB
怎么算该多大
看它实际显示多宽，再乘屏幕密度（一般 1–2 倍）。显示 600px，Retina 屏就按 1200px 出图。
- 显示宽 × 密度 = 出图宽
- 密度通常取 2
- 别超过显示宽的两倍
实测对比
同一张照，原图 3.2MB，改到 1200px 压 WebP 80% 仅 110KB，加载快近 30 倍，肉眼几乎一样。
- 原图：4000×3000，3.2MB
- 优化：1200px WebP，110KB
- 加载快约 30 倍