优化图像：WebP 与 AVIF 以及响应式尺寸

介绍

优化图像资源是提高 Lighthouse 分数和 LCP（最大内容绘制）等 Web 性能指标的最有效方法之一。

在许多 Web 应用程序中，图像占总负载大小的一半以上。缓慢的图像加载时间直接降低了用户体验。

用 WebP 和 AVIF 等下一代格式替换 JPEG 和 PNG 等传统格式已成为现代 Web 开发的标准做法。本文比较了这两种格式，并解释了如何配置响应式、优化的图像传输。

1. 比较下一代格式：WebP 与 AVIF

与 JPEG 和 PNG 相比，下一代格式可以更有效地压缩文件，同时保持视觉质量。

① 网页版

WebP 由 Google 开发，是一种多功能图像格式。

特点： 同时支持有损压缩（替代JPEG）和无损压缩（替代PNG）。它还支持 Alpha 通道透明度和动画。
**压缩：**与同等质量的 JPEG 相比，文件大小减少 25% 到 30%。
支持： 几乎所有现代网络浏览器都支持，使其成为网络图像的事实上的标准。

② AVIF

AVIF 是一种基于 AV1 视频编解码器的开放、免版税的图像格式。

特点： 提供比 WebP 更高的压缩比，并支持广色域和 HDR。它在处理渐变和详细的摄影图像时表现良好，最大限度地减少了压缩伪影。
**压缩：**与同等 JPEG 相比，文件大小减少 50% 或更多。
支持： 支持Chrome、Firefox、Safari等主流浏览器，为生产环境做好准备。

2. 使用 HTML 元素进行后备交付

由于并非所有浏览器都支持 AVIF，因此建议的方法是提供后备链：如果支持，则提供 AVIF，回退到 WebP，并使用标准 JPEG 或 PNG 作为最终后备。

您可以使用 <picture> 元素 在 HTML 中直接配置此交付。

<picture>
  <!-- 1. Preferred: High-compression AVIF (served if the browser supports it) -->
  <source srcset="image.avif" type="image/avif">

  <!-- 2. Secondary: Widely supported WebP format -->
  <source srcset="image.webp" type="image/webp">

  <!-- 3. Final Fallback: Traditional JPEG for older browsers -->
  <img src="image.jpg" alt="Optimized showcase image" width="800" height="600" loading="lazy">
</picture>

这种方法的优点

不需要 JavaScript： 浏览器评估 type 属性，选择它支持的最有效的格式，然后仅下载该文件。
防止布局移动： 在后备 <img> 元素上设置显式 width、height 和 loading="lazy" 属性会保留页面上的布局空间，从而防止累积布局移动 (CLS)。