使用 srcset 和 sizes 属性创建更好的响应式图片

介绍

srcset 和 sizes 是两个可用于创建响应式图片的 HTML 属性。它们用于指定图片源和图片大小。它们一起使用，可以创建针对显示设备优化的图片。

在本文中，我不会详细介绍响应式图片的工作原理。我将专注于如何使用 srcset 和 sizes 属性。

让我们看一下基本的 img 元素：

<img src="image.jpg" alt="image" />

src 属性用于指定图片源。无论设备的屏幕大小、像素密度或视口大小如何，Web 浏览器都会下载图片并以相同的大小显示在所有设备上。

因此，如果你有一张 2000px 宽的图片，它在 4K 显示器上会显示为 2000px 宽的图片 - 这没问题，但在 320px 宽的手机屏幕上，它也会被下载并显示为 2000px 宽的图片 - 当然，它会适应屏幕，但这不必要地大，下载时间会很长。

这就是 srcset 和 sizes 属性的用武之地。我们将使用它们为不同的设备提供不同的图片源/大小，并让浏览器决定下载和显示哪张图片。

<img
  src="image.jpg"
  srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
  sizes="(max-width: 320px) 280px, (max-width: 640px) 640px, 1280px"
  alt="image"
/>

srcset 和 sizes 的值看起来有点复杂（而且容易忘记），但它们并不难理解。

srcset

srcset 属性用于指定图片源及其大小。图片源之间用逗号分隔，每个图片源后面跟着其大小（以像素为单位），包含以下部分：

image-source - 图片的 URL（例如 image-320.jpg）
一个空格
image-size - 图片的固有大小，以像素为单位（例如 320w）- 注意大小后面是 w 而不是 px，表示大小是以像素为单位。

在上面的例子中，我们有三个图片源：image-320.jpg、image-640.jpg 和 image-1280.jpg。

第一个图片源是 image-320.jpg，宽度为 320px。
第二个图片源是 image-640.jpg，宽度为 640px。
第三个图片源是 image-1280.jpg，宽度为 1280px。

现在我们有了一组不同大小的图片，但我们如何告诉浏览器使用哪张图片呢？

这就是 sizes 属性的作用。

sizes

sizes 属性定义了一组媒体条件，帮助浏览器决定在满足条件时使用哪张图片。

每个大小之间用逗号分隔，并由以下部分构成：

一个媒体条件 - 定义条件的媒体特性和值的集合（例如 (max-width: 320px)）。注意，条件用括号括起来，就像 CSS 媒体查询一样。在这种情况下，条件是视口宽度小于或等于 320px。
一个空格
一个大小 - 满足条件时使用的图片大小（例如 280px）。

以下是浏览器决定使用哪张图片的步骤：

查看设备的屏幕大小。
查看 sizes 属性，找到第一个匹配设备屏幕大小的条件。
使用条件中定义的大小，在 srcset 属性中找到具有相同大小的图片源，如果没有，它将使用比条件中定义的大小大的第一张图片。
加载图片并显示。

就是这样，我们创建了一个响应式图片。

看看上面的例子，假设我们使用的是屏幕宽度为 400px 的手机。

匹配该屏幕的第一个条件是 (max-width: 640px)。
条件中定义的大小是 640px。
srcset 属性中具有相同大小的图片源是 image-640.jpg。
浏览器将加载该图片并显示。

进阶技巧

对于 sizes 属性，你可以使用 vw 而不是 px 来定义大小。当你想使用视口宽度作为大小时，这很有用。例如，如果你想使用视口宽度作为大小，可以使用 100vw 作为大小。
将 srcset 和 sizes 与 loading="lazy" 结合使用以提高性能。当 loading 属性设置为 lazy 时，浏览器在图片在视口中可见之前不会加载它。当页面上有很多图片，你想提高页面性能时，这很有用。
最好给 img 元素添加 width 和 height 属性。当 img 元素添加了 width 和 height 属性时，浏览器会在图片加载前为其预留空间。这有助于防止布局偏移，提升访问者的体验。
别忘了用 src 属性添加一个后备图片。当浏览器不支持 srcset 和 sizes 属性时，它将使用 src 属性中定义的图片源。

最终，img 元素应该是这样的：

<img
  src="image.jpg"
  srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
  sizes="(max-width: 320px) 280px, (max-width: 640px) 640px, 1280px"
  loading="lazy"
  alt="图片替代文本"
  width="1280"
  height="720"
/>

编码愉快。