图片占据网页平均 50% 以上的体积。这意味着网站慢几乎总是图片的问题。正确压缩图片，是你为网页性能、Core Web Vitals 分数 —— 进而为 SEO 排名 —— 所能采取的单项投资回报最高的行动。
Google 的 Core Web Vitals 把最大内容绘制（LCP）作为主要排名信号。LCP 衡量页面主图出现所需的时间。一张未压缩的 3 MB 主视觉图就足以让 LCP >4 秒 —— 被判定为「差」—— 拖累你的排名。
| 格式 | 最佳用途 | 浏览器支持 | 相比 JPEG 体积 |
|---|---|---|---|
| WebP | 所有网页图片（照片+图形） | 97%+ 浏览器 | 小 25–34% |
| AVIF | 照片、高保真图像 | 约 85%（无 IE/Safari 15） | 小 40–50% |
| JPEG | 照片（回退） | 通用 | 基准 |
| PNG | Logo、截图、透明 | 通用 | 常比 JPEG 大 3–5 倍 |
| SVG | 图标、Logo、插画 | 通用 | 分辨率无关 |
| GIF | 避免 —— 改用动态 WebP 或视频 | 避免 | 可达 WebP 的 10 倍大 |
<picture> 实现 AVIF → WebP → JPEG 回退。这能为每个浏览器提供它支持的最佳格式，又不牺牲兼容性。
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="...">
</picture>| 图片类型 | 最大宽度 | 目标大小（WebP） | 目标大小（JPEG） |
|---|---|---|---|
| 主视觉 / 横幅 | 1920 px | <150 KB | <200 KB |
| 博客文章特色图 | 1200 px | <80 KB | <120 KB |
| 产品图（电商） | 800 px | <60 KB | <100 KB |
| 缩略图 / 卡片图 | 400 px | <20 KB | <35 KB |
| 头像 / 个人照片 | 200 px | <10 KB | <15 KB |
| 背景（整屏） | 1440 px | <100 KB | <150 KB |
别在 800 px 的栏目里放一张 4000 px 宽的图。先缩放到最大显示宽度。如果要兼顾 retina/HiDPI，用 CSS 显示尺寸的 2 倍 —— 即 400 px 的栏目用 800 px 的图，然后大力压缩。
为获得最佳隐私和速度，使用 ImgMin —— 所有处理都在你的浏览器中进行。拖入最多 10 张图，压缩，打包成 ZIP 下载。无上传、无限制、无需账号。
对服务器端工作流（CI/CD、CMS），Sharp（Node.js）、Pillow（Python）或 cwebp（命令行）都是出色的自动化选择。
给所有首屏以下的图片加上 loading="lazy"。这会推迟加载，直到用户滚动到图片附近，节省带宽并显著改善首屏加载时间。
务必在 <img> 标签上指定 width 和 height 属性。这会在布局中预留空间，防止累积布局偏移（CLS）—— 另一项影响 SEO 的 Core Web Vitals 指标。
如果你在用 Cloudflare、Vercel 或 AWS CloudFront，开启自动图片优化。这些服务能向现代浏览器提供 WebP，并在全球边缘节点缓存优化版本 —— 显著降低延迟。
add_image_size() 调用设置为与实际显示尺寸匹配_800x.jpg 后缀来提供正确尺寸的图片WebP 是 2026 年的最佳默认 —— 同等质量下比 JPEG 小 25–34%，被 97%+ 的浏览器支持。如果你的受众用现代 Chrome 或 Firefox，可用 AVIF 获得更好的压缩。把 JPEG/PNG 留作回退。
主视觉图：小于 200 KB。内容图：小于 100 KB。缩略图：小于 30 KB。背景图：小于 150 KB。这些是 WebP/JPEG 目标 —— 你的确切阈值取决于图片复杂度。
会，而且是直接影响。Google 把 Core Web Vitals（LCP、CLS）作为排名信号。未压缩的大图是 LCP 分数慢的首要原因。压缩图片能提升页面速度、降低跳出率，并切实提升搜索排名 —— 尤其在移动端。
最后更新：2026 年 4 月。浏览器支持百分比来自 caniuse.com。