图片优化：响应式图片、WebP、AVIF 与 LCP

从读者实际看到的图片入手

检查图片的显示尺寸、被选中的资源、传输的字节数，以及图片在页面中的作用。带有小字标签的示意图，与照片需要不同的处理方式。一个很大的源文件，并不需要原封不动地发给每位访客。

在跟踪中找出实际的 Largest Contentful Paint 元素。它可能是文字而不是图片。优化首屏以下的缩略图，并不能解决一个与之无关、阻塞渲染的样式表。

为每个文件单独选择格式和质量

在用户实际使用的尺寸下，把 AVIF 和 WebP 与现有的 JPEG 或 PNG 进行比较。检查边缘、渐变、肤色、透明度和文字。体积节省取决于内容和编码器设置；一个通用的百分比并不是有用的质量目标。

对合适的示意图和图标使用 SVG，让标签和线条保持清晰；需要时，为分享平台保留一个位图版本。关键说明也应该出现在 HTML 中。不要因为有损图片的感知相似度得分很高，就称它为“无损”。

编写与布局匹配的响应式标记

下面的示例假设图片占满一个 48rem 宽的内容栏，并在小屏幕上两侧各留 1rem 的边距。请根据实际布局调整 sizes。浏览器会根据候选宽度、显示区域大小和设备条件来选择资源。

<picture>
  <source type="image/avif"
    srcset="/media/diagram-480.avif 480w,
            /media/diagram-960.avif 960w,
            /media/diagram-1440.avif 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
  <img src="/media/diagram-960.webp"
    srcset="/media/diagram-480.webp 480w,
            /media/diagram-960.webp 960w,
            /media/diagram-1440.webp 1440w"
    sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
    width="1440" height="900"
    loading="eager" fetchpriority="high" decoding="async"
    alt="Public requests pass through a cache before the origin">
</picture>

对于屏幕外的辅助图片，请改用懒加载和普通的获取优先级。宽度和高度用于预留宽高比；CSS 仍然可以让图片自适应宽度。除非有意进行艺术指导（art direction），否则各个版本应保持相同的宽高比。

尽量使用 WordPress 的图片处理流程

对于媒体库中的图片，请使用 WordPress 的附件图片函数，让可用尺寸和响应式属性根据附件元数据自动生成。请检查输出结果：自定义标记或缺失的尺寸版本，可能会让这些优势失效。主题中的插图可以使用一组明确且带版本号的尺寸。

替代文本应该传达图片所增加的信息。只是装饰性地重复相邻标题的图片，可以使用空的 alt 属性。不要把替代文本变成一串目标关键词。

验证交付和缓存行为

• 在窄屏和宽屏上检查被选中的图片 URL，包括高像素密度的屏幕。
• 确保无需等待 JavaScript 就能发现主图。
• 按实际显示尺寸检查画质，而不只是在小预览图中查看。
• 确认屏幕外的媒体不会占据初始传输的大部分。
• 如果 CDN 会协商图片格式，请确认缓存键能正确区分不同的响应。
• 为修改过的文件加上版本号，或清除相关缓存，让读者获取到更新。

参考资料与延伸阅读

• MDN：响应式图片
• WordPress：wp_get_attachment_image
• Google：优化 LCP

继续阅读

接着阅读 Core Web Vitals 诊断或完整的性能检查清单。