一个博客变慢，八成是因为图片。文字内容通常只有几十 KB，而一张手机直出的照片随随便便就是 4 MB。这篇文章讲清楚压缩该按什么顺序做。

第一步永远是改尺寸，不是改质量

很多人的第一反应是“把画质调到 80%”，但真正浪费的是尺寸。一张 4000 像素宽的图，显示在网页上最多也就 800 像素宽，多出来的像素全部是白传的。

先把宽度缩到实际显示尺寸的 1.5 到 2 倍（兼顾高分屏），这一步通常能减掉 90% 的体积，而且肉眼几乎看不出差别。

第二步：换格式

JPEG 适合照片，PNG 适合图标和需要透明的地方，但两者都比不过 WebP：

• 同样的视觉质量，WebP 通常比 JPEG 小 25% 到 35%；
• 支持透明，可以替代大部分 PNG；
• 主流浏览器全部支持，基本不用考虑兼容性。

如果再进一步，AVIF 压缩率更高，但编码慢、老设备支持一般，目前适合做渐进增强。

命令行怎么做

装了 ImageMagick 的话，一行就够：

magick input.jpg -resize 1200x -quality 82 output.webp

只要 WebP：

cwebp -q 80 input.jpg -o output.webp

批量处理配合 for 循环，整个目录几秒钟跑完。

别忘了加载方式

图压小了，但一次性全部加载，首屏照样卡。给 img 加上延迟加载，只加载视口内的图；首屏第一张图可以不加，避免出现空白闪烁。

另外记得写 width 和 height，浏览器能提前占位，页面不会在图片加载时跳动。

顺序记住：先缩尺寸，再换格式，最后才调质量。