图片优化：如何在不损失画质的情况下提速网站
图片优化可以在保持视觉质量的同时减小文件体积。学习压缩格式、响应式图片、懒加载以及对 Core Web Vitals 的影响。
2026-05-30
·
1 分钟阅读
图片优化是在不明显损失画质的前提下，以尽可能小的文件体积提供图片。这是网站能做的最高 ROI 的优化之一。
为什么图片优化很重要
图片通常占页面总权重的 50-70%。如果你什么都不做，仅优化图片就能把加载时间减半。
三个具体好处：
- Core Web Vitals： 大图片是 LCP（最大内容绘制）差的第一大原因。
- 带宽成本： 更小的图片意味着更低的 CDN 和托管费用。
- 移动端体验： 慢连接用户在页面加载超过 3 秒就会离开。
快速见效的方法
1. 使用现代格式
| 格式 | 适用场景 | 相比 JPEG 压缩 |
|---|---|---|
| JPEG | 照片（传统） | 基准 |
| WebP | 照片 + 透明 | 小 25-35% |
| AVIF | 照片 + 图形 | 小 50% |
| SVG | 图标、Logo、简单图形 | 矢量（无限缩放） |
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="产品展示横幅" loading="eager">
</picture>
2. 按显示尺寸调整
不要在 400px 的容器里放 4000px 宽的图片。在服务端或构建时调整：
<img src="/images/hero-800w.jpg"
srcset="/images/hero-400w.jpg 400w,
/images/hero-800w.jpg 800w,
/images/hero-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="白色背景上的产品组合"
width="800" height="450">
3. 首屏以下图片懒加载
<img src="/images/below-fold.jpg" alt="客户评价照片" loading="lazy">
永远不要懒加载你的 LCP 图片。 首图、主产品图或顶部横幅应该立即加载。
4. 设置明确的尺寸
始终包含 width 和 height 属性以防止布局偏移（CLS）：
<img src="/images/chart.png" alt="2025年Q4流量图表" width="600" height="400">
常见错误
上传未优化的图片
用户直接从手机上传 5MB 的照片。在上传时或构建过程中压缩它们。
忘记 LCP 图片
如果你的首图设置了 loading="lazy"，你就破坏了 LCP 分数。
用 CSS 背景图做内容图
背景图不能有 alt 文本，不能原生懒加载，也不参与 LCP 计算。内容图片用 <img>。
如何审计图片优化
- 用 SEO 审计工具 扫描过大图片、缺失尺寸和格式问题。
- 用 Chrome 扩展 在浏览时检查单个页面。
- 在 Chrome DevTools 中运行 Lighthouse 审计获取每张图片的具体建议。
回到词汇表
一句话定义：Glossary 里的 Image Optimization。