介绍

图片占典型网页总重量的一半以上。随着 Web 应用程序变得更加可视化，优化图像交付对于性能、用户体验和 Core Web Vitals 分数变得至关重要。本文探讨了现代图像优化策略，从下一代格式到响应式交付技术。

2024 年的图像格式

图像格式格局发生了巨大变化。三种现代格式现在与传统 JPEG 和 PNG 争夺主导地位。

WebP 已经实现了近乎通用的浏览器支持，并且在同等质量下比 JPEG 尺寸减小了 25-34%。它是用于生产用途的最安全的现代格式。 AVIF 提供令人印象深刻的压缩率（比 JPEG 小大约 50%），但编码速度仍然是实时应用程序关注的一个问题。 JPEG XL 提供最佳的压缩和功能（无损重新压缩、HDR 支持），但其浏览器支持仍然有限。

带有 srcset 的响应式图像

srcset 和 sizes 属性允许浏览器根据用户的视口和设备像素比选择最佳图像大小：

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero image"
  loading="lazy"
  width="800"
  height="450"
>

使用 w 描述符根据视口宽度进行响应式大小调整，并使用 x 描述符来针对特定的设备像素比率。浏览器会根据当前视口和 DPR 自动选择最合适的源。

使用 <picture> 格式化选择

<picture> 元素启用格式后备链，确保浏览器接收它们支持的最有效的格式：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="800" height="450">
</picture>

此模式为 AVIF 提供支持的浏览器，然后回退到 WebP，最后以 JPEG 作为通用回退。 <picture> 元素还支持艺术指导 - 为移动设备和桌面视口提供不同的裁剪图像。

CDN图像转换

Cloudflare Images、Imgix、Cloudinary 和 Akamai 等 CDN 可以使用 URL 参数动态转换图像：

https://cdn.example.com/image.jpg?w=800&h=600&fit=cover&f=webp&q=80

现代 CDN 还通过检查 Accept 标头并自动提供 AVIF 或 WebP 来支持自动格式协商。这种方法允许源端存储单个主映像，而 CDN 缓存并根据客户端功能提供多个变体。

延迟加载和核心 Web Vitals

使用 loading="lazy" 的本机延迟加载会推迟屏幕外图像加载，直到用户滚动到它们附近。对于影响 LCP（最大内容绘制）的首屏图像，请使用 fetchpriority="high"：

<!-- LCP image - load immediately -->
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero">

<!-- Below-fold images - lazy load -->
<img src="gallery-1.jpg" loading="lazy" width="400" height="300" alt="Gallery">

为了防止 CLS（累积布局偏移），请始终在图像上设置显式 width 和 height 属性。这允许浏览器在加载图像之前保留正确的空间。

结论

2024 年有效的图像优化策略结合了多种技术：通过 <picture> 为 AVIF 提供 WebP 和 JPEG 后备，使用 srcset 实现响应式大小调整，利用 CDN 转换进行动态调整大小和格式协商，在预加载 LCP 候选时延迟加载首屏图像，并始终设置显式尺寸以防止布局变化。持续实施此堆栈可以将图像重量减少 50-80%，同时提高 Core Web Vitals 分数。