懒加载与响应式图片：实用入门指南

问题：图片体积庞大

图片通常是网页上最大的文件。当用户访问您的网站时，他们的浏览器会尝试下载每一张图片，包括那些在页面下方、尚未可见的图片。这浪费了带宽，并显著减慢了初始页面加载速度，导致糟糕的用户体验和较低的核心 Web 指标分数。

解决方案有两个方面：

1. 懒加载 (Lazy-Loading)： 推迟加载屏幕外的图片，直到用户滚动到它们附近。
2. 响应式图片 (Responsive Images)： 为不同屏幕尺寸提供不同大小的图片，这样移动用户就不必下载为桌面设计的巨大图片。

幸运的是，现代 HTML 提供了强大且易于使用的功能来实现这两者。

第 1 部分：轻松实现懒加载

过去，懒加载需要复杂的 JavaScript 库。如今，它只是一个简单的属性。

loading="lazy" 属性告诉浏览器在图片即将进入视口之前不要加载它。

如何实现：

只需将 loading="lazy" 添加到您的 <img> 标签中。

<img src="my-image.jpg" alt="一段描述性的替代文本" loading="lazy" width="800" height="600">

重要提示：

• 始终包含 width 和 height 属性。 这使得浏览器可以在图片加载前为其预留正确的空间，从而防止布局偏移 (CLS - 累积布局偏移)。
• 不要对所有图片都使用懒加载。 对于“首屏”（在初始视口中可见）的图片，您应该让它们正常加载。对它们使用懒加载实际上可能会减慢感知加载时间。loading="lazy" 属性适用于页面下方的图片。

loading="lazy" 的浏览器支持现在已在所有主流浏览器中普及，使其成为一种安全有效的性能提升方法。

第 2 部分：使用 srcset 提供合适的尺寸

为什么小屏手机用户要下载一张为大桌面显示器设计的 2000 像素宽的图片？srcset 属性让您可以为浏览器提供一个包含不同尺寸版本图片的列表。然后，浏览器会根据用户的屏幕尺寸和分辨率智能地选择最合适的一个进行下载。

如何实现：

1. 创建多种图片尺寸： 首先，您需要创建几个版本的图片。一套常见的尺寸可能包括：

   • image-small.jpg (例如，480 像素宽)
   • image-medium.jpg (例如，800 像素宽)
   • image-large.jpg (例如，1200 像素宽) 您可以使用我们的图片缩放工具创建这些尺寸。

2. 使用 srcset 属性： 列出每张图片及其宽度描述符 (w)。

<img 
  srcset="image-small.jpg 480w, 
          image-medium.jpg 800w, 
          image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="image-medium.jpg" 
  alt="一段描述性的替代文本"
  loading="lazy"
  width="800" height="600">

让我们来分解一下：

• srcset: 提供可用图片及其真实宽度的列表。
• sizes: 这告诉浏览器在不同视口尺寸下图片将显示多宽。在这个例子中，它表示：“如果屏幕宽度为 600 像素或更小，图片将为 480 像素宽。否则，它将为 800 像素宽。”浏览器使用此信息从 srcset 中选择最佳图片。
• src: 这是为不支持 srcset 的旧版浏览器提供的后备选项。

第 3 部分：使用 <picture> 元素进行艺术指导

有时，您不只是想提供一个较小版本的图片；您想提供一张完全不同的图片。例如，桌面上的宽幅风景照在移动设备上应该是一张更紧凑、裁剪过的人像照。这被称为“艺术指导”。

<picture> 元素非常适合这个目的。它允许您提供多个 <source> 元素，浏览器将选择第一个匹配的。

如何实现：

<picture>
  <!-- 如果屏幕宽度为 600px 或更小，则显示此图片 -->
  <source media="(max-width: 600px)" srcset="image-portrait.jpg">
  
  <!-- 否则，显示此图片 -->
  <source media="(min-width: 601px)" srcset="image-landscape.jpg">
  
  <!-- 为旧版浏览器提供的后备选项 -->
  <img src="image-landscape.jpg" alt="一段描述性的替代文本" loading="lazy" width="1200" height="600">
</picture>

您还可以使用 <picture> 来提供像 AVIF 或 WebP 这样的现代图片格式，并以降级方式提供 JPEG：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="一段描述性的替代文本">
</picture>

您可以使用我们的图片转换器工具创建这些不同的格式。

结论

通过结合这三个现代 HTML 功能，您可以构建在任何设备上都能以惊人速度加载的网站。

• 对所有首屏以下的图片使用 loading="lazy"。
• 使用 srcset 为同一图片提供不同尺寸。
• 当您需要为不同屏幕尺寸或格式提供不同图片时，使用 <picture>。

实施这些技术是您可以为改善网站性能和核心 Web 指标所做的影响最大的改变之一。