简介
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- 图片的 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="image alt text"
width="1280"
height="720"
/>编码愉快 。