图片通常是页面上最重的资源，也是最容易优化的部分。四个动作就能把体积压掉一半以上而肉眼几乎看不出差别：按实际显示尺寸导出、转成 WebP、压缩质量控制在 75 到 82、在标签里写死宽高。
一、按显示尺寸导出
最常见的浪费：把 2000 像素宽的相机原图放进 600 像素宽的容器。浏览器会缩小显示，但用户仍要下载完整的 400KB。
先量容器宽度，再按两倍图导出（视网膜屏需要），超过这个尺寸就是浪费。
二、转 WebP
同等清晰度下，WebP 通常比 JPEG 小 25% 到 35%，比 PNG 小更多。现代浏览器全部支持，旧浏览器的回退方案可以用 picture 标签。
实体产品图、场景图用 WebP 的收益最明显。
三、压缩质量 75–82
质量 100 和 82 的区别，肉眼几乎看不出来，体积差一倍以上。质量低于 70 时，渐变和天空这类大面积平滑色块会出现色带。
图标和线条图用 SVG，别用 PNG——SVG 只有几 KB，还能随缩放保持锐利。
四、写死宽高防抖动
图片没有 width 和 height，加载完成后会把下面的内容往下推，这就是布局偏移（CLS）。在标签里写死宽高，或者用 aspect-ratio 占位，都能解决。
这一项不减少体积，但对体验和 Core Web Vitals 的影响同样大。
懒加载怎么加
首屏之外的图片加 loading="lazy"，首屏内的第一张大图不要加——它需要尽早开始下载。
注意：懒加载图在整页截图工具里可能显示为空白，这是工具的问题，不是页面坏了。
效果参考
一个典型的十图页面，按上面四条改完，图片总重量从 3MB 降到 800KB 很常见。首屏时间通常能改善 0.5 到 1.5 秒。更多首屏优化见首屏加载。
一次图片瘦身的实际数字
一个十图的产品页，改前改后：
| 项目 | 改前 | 改后 |
|---|---|---|
| 图片总量 | 3.4 MB | 780 KB |
| 最大单图 | 1.2 MB（4000px 原图） | 96 KB（1200px WebP） |
| 移动端首屏 | 4.6 秒 | 2.1 秒 |
| 布局偏移 | 0.24 | 0.03 |
三个动作贡献了九成的收益：按显示尺寸重导出、转 WebP、写死宽高。
剩下的 780 KB 里，还能再压的地方不多了——继续压会看到明显色带。此时该优化的是「图片数量」，而不是「单图体积」：十张图里有两张是重复角度，删掉比压缩更有效。