在大多数网站上，图片都是页面里最重的东西，往往比 HTML、CSS 和 JavaScript 加起来还大。页面一卡，第一个该查的就是图片，而修起来通常很快。
三个手段几乎能搞定全部问题：把图片缩到它实际显示的尺寸、压缩它、用现代格式提供它。三招齐上，图片体积常常能砍掉 70% 以上。
缩到你实际显示的尺寸
这是最常见也最浪费的错误。相机直出的照片可能有 6000 像素宽，可你的文章只在一栏 800 像素宽的地方显示它。浏览器把这六千像素全下载下来，然后在缩小适配时把大部分都扔掉。
在 800 像素的位置塞一张 6000 像素的图，意味着可能多下载了五到十倍的数据。解决办法很简单：把文件缩到它大致会占据的宽度，再留一点余量给高像素密度的屏幕。
一个实用规则：
- 全宽头图：1600–2000 px 宽足矣。
- 文章内配图：1000–1400 px。
- 缩略图：300–500 px。
用 图片缩放 在图片进入页面之前就把它压下来。它会锁定宽高比，不会把图拉变形。
压缩，去掉浪费
尺寸对了之后，压缩会去掉肉眼看不到的细节。对照片来说，75%–85% 左右的质量是甜点区：文件大幅下降，画面看起来却一样。对存成 PNG 的平色块图形和截图，减少颜色数（量化到 256 色）能把文件压到原来的一小部分。
图片压缩 两者都能处理。它按质量重编码 JPEG 和 WebP、对 PNG 做量化，并保证绝不生成比原图更大的文件。如果有一整个图库，批量跑一遍再打包成 ZIP 下载即可。
换成现代格式
光是换格式就能让文件减半。下面是照片场景下常见选项的对比。
| 格式 | 相对 JPEG 的典型体积 | 最适合 |
|---|---|---|
| JPEG | 基准 | 通用兜底；照片 |
| WebP | 小约 25%–35% | 照片和图形；浏览器支持广 |
| AVIF | 小约 50% | 追求最小体积的照片 |
| PNG | 照片场景下大得多 | Logo、图标、平色块图形、透明 |
WebP 是 2026 年的稳妥默认——所有现代浏览器都能读，而且明显优于 JPEG。AVIF 还能更小，但编码更慢、支持面略窄。图片转换 允许你以 AVIF 为目标，并在 AVIF 不合适时悄悄回退到 WebP，让你无需靠猜就拿到当下最好的结果。
一句提醒：别用 PNG 存照片。PNG 在 Logo、图标和需要透明的场景里很出色，但存照片时它可能比同等质量的 WebP 大好几倍。
把它串起来
任何要放到网上的图片，都可以走这条可靠的流水线：
- 缩放到显示宽度（再给视网膜屏留点余量）。
- 转换为 WebP，想要极致最小就用 AVIF。
- 以 75%–85% 的质量压缩，抹掉最后一点浪费。
这么做，一张 5 MB 的相机照片能变成 120 KB 的 WebP，在文章栏里看起来一模一样。全页乘下来，加载时间的差别非常可观。
所有处理都在浏览器里用 Canvas 和 WebAssembly 完成，什么都不上传，首次访问后工具还能离线用。也就是说，你可以为网站准备一整个文件夹的图片，而不用把它们交给任何服务器。
文件之外
还有两个习惯能帮上忙，而且不花一分钱：
- 给首屏以下的图片做懒加载，加上
loading="lazy"，让浏览器只在读者快滚到时才去取。 - 设好 width 和 height 属性，图片加载时版式就不会跳动，这对 Core Web Vitals 分数也有帮助。
想确切知道是哪些图片在拖慢页面？我们的 图片 SEO 指南 讲了如何审查，页面速度检测会列出最重的资源，让你知道该先冲哪里。