使用 srcset 和 sizes 属性实现更好的响应式图片

介绍

srcset 和 sizes 是两个用于创建响应式图片的 HTML 属性。它们用于指定图片的源文件和尺寸。通过组合使用这两个属性，我们可以创建针对不同设备进行优化的图片。

在本文中，我不会深入讲解响应式图片的工作原理。我将重点介绍如何使用 srcset 和 sizes 这两个属性。

让我们先来看看基本的 img 元素：

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

src 属性用于指定图片的源文件。浏览器会下载图片并在所有设备上以相同的尺寸显示，不管设备的屏幕大小、像素密度或视口大小是多少。

所以如果你有一张 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 - the image's URL (e.g. image-320.jpg)
A space
image-size - the image's intrinsic size in pixels (e.g. 320w) - notice the w at the end of the size instead of px to indicate that the size is in pixels.

在上面的例子中，我们有三个图片源文件：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="image alt text"
  width="1280"
  height="720"
/>

Happy coding .