一个典型网页上，图片约占传输字节的 60%。它是你能掌控的最大加载时间杠杆，也是 Google 排名所依据的 Core Web Vitals 的关键。本文说明图片压缩究竟如何转化为更快的网站，以及如何叠加各项收益。
字节如何变成秒
在 10 Mbps 链路上，一张 2 MB 的头图仅下载就要约 1.6 秒——浏览器还没开始绘制。把它压到 150 KB，下载降到约 0.12 秒。压缩不是微优化，它决定了 1 秒与 4 秒加载之分。
三个杠杆
- 压缩。把 JPEG 换成 AVIF/WebP（视觉质量相同），字节降 30–50%。传统格式用 MozJPEG/OxiPNG。见不损画质减小体积。
- 缩放。投放正确尺寸。手机不需要 4000 像素宽的照片。用
srcset让每种设备各取所需。 - 格式。现代格式（AVIF、WebP）在质量相同时比 JPEG/PNG 小 25–50%。
顺序很重要：先缩放（要编码的像素更少），再选现代格式，再调质量。对一张巨图最后压缩仍会得到一张巨图。
你能推动的 Core Web Vitals
- LCP（最大内容渲染）。通常是头图。最狠地压缩——150 KB 以下、优先 AVIF、预加载。
- CLS（累积布局偏移）。给图片设
width/height，防止加载时布局跳动。 - INP（交互到下次渲染）。主线程繁重的图片解码会阻塞点击。用
decoding="async"与离线解码。
用 srcset 做响应式
生成几个尺寸（如 480、800、1200、1600 像素），用 srcset 声明。浏览器按视口和 DPR 选合适的。手机拿小文件、桌面拿清晰文件。这常是压缩之外移动端最大的提速收益。
别忘了缓存
图片一旦压缩好就激进缓存：Cache-Control: public, max-age=31536000, immutable。回访用户零下载。配合 CDN，让每个地区的首位访客也快。
懒加载
给首屏外图片加 loading="lazy"，浏览器延迟拉取。绝不要懒加载 LCP 图片——改用预加载。
综合实例
一个产品页：头图 2.2 MB + 六张 800 KB 缩略图，共约 7 MB。压缩后（头图 140 KB AVIF，缩略图各 60 KB WebP）+ 懒加载：首屏约 500 KB，LCP 从 3.8s 降到 1.1s。这不是微调，是另一个页面。
小结
压缩、缩放、现代格式，再合理缓存与懒加载。Kix图片工具 在浏览器中负责前三项——其余在你的 HTML。结果：更快的页面、更好的 Core Web Vitals、更高的搜索排名。