为什么图像优化很重要
体积较大或加载较晚的图片可能延迟主要内容显示，使 LCP 变差。请从页面实际请求的图片开始，测量它们的影响。减少传输量可能改善加载，但不保证搜索排名或特定的转化增长。
选择图像格式
使用有代表性的图片，在可接受的画质下比较 JPEG、PNG、WebP 和 AVIF。最小文件取决于图片、编码器和参数。请检查目标浏览器，并在需要时提供备用格式。适合的矢量图形可以使用 SVG。
| 格式 | 优点 | 注意事项 | 常见用途 |
|---|---|---|---|
| JPEG | 通常适合高效压缩照片 | 有损压缩，不支持 Alpha 透明度 | 照片 |
| PNG | 无损编码，支持透明度 | 照片文件可能较大 | 需要无损细节的图形 |
| WebP | 有损和无损编码，支持透明度 | 检查旧版目标浏览器和实际文件大小 | 照片、图形、动画 |
| AVIF | 可能在可用画质下获得较好压缩 | 检查编码成本和兼容性 | 照片和图形 |
| SVG | 可缩放矢量图形 | 不能替代栅格照片 | 图标、标志、插图 |
响应式图片：srcset 和 sizes
在 srcset 中列出候选文件，用 sizes 描述布局中的显示宽度。浏览器结合这些信息与设备条件选择图片。下例宽度仅作演示，应与实际 CSS 一致。这是屏幕外图片的示例；请更换示例替代文本，并使用真实宽高比。
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="高山湖泊"
width="1200"
height="800"
loading="lazy"
/>
延迟加载屏幕外的图片
loading="lazy" 允许浏览器将屏幕外图片的加载推迟到接近可视区域时。请求可能在图片出现之前开始，具体时机取决于浏览器和条件。
- 推迟非关键图片可减少初始传输和竞争请求。
- 不要延迟加载首屏主要图片，尤其是可能成为 LCP 元素的图片，否则可能使 LCP 变差。
- 用正确的尺寸或宽高比预留空间，减少布局偏移。
首屏以下图片的示例。尺寸仅作说明，请使用实际文件尺寸。
<img src="example.webp" alt="高山湖泊" width="1200" height="800" loading="lazy" />
用于优化的工具和服务
| 工具 | 描述 | 链接 |
|---|---|---|
| TinyPNG | 用于压缩 PNG 和 JPEG 的在线服务 | TinyPNG |
| ImageOptim | macOS 上的图像优化 | ImageOptim |
| Squoosh | 来自 Google 的强大工具 | Squoosh |
实用技巧和示例
- 在可接受画质下比较格式，必要时增加备用格式。
- 让
srcset和sizes与实际布局和设备需求一致。 - 对屏幕外图片使用
loading="lazy"，让可能的 LCP 图片正常加载。浏览器原生延迟加载通常不需要 Intersection Observer；自定义逻辑应解决具体需求。 - 在构建或交付流程中自动调整尺寸和压缩，再检查输出。
- 在可比较的条件下，对照修改前后的 PageSpeed Insights 和相关 Web Vitals，包括 LCP 与 CLS。
验证发布后的结果
检查所选图片文件、传输字节、画质和加载优先级。在有代表性的移动端与桌面端布局中重复检查，确认主要图片及时显示，布局保持稳定。
减少不必要的字节，同时保留读者需要的内容和画质。
使用速度审计调查页面，再在浏览器中验证具体图片修改。请区分实测改善与未经验证的假设。
