响应式图像规范是一个出色的文档，描述了此类图像的许多用途。但是经验告诉我，大多数情况下，与他们合作时，您只需要知道如何为客户提供不同大小的同一图像的副本，并根据页面视图区域的宽度进行选择即可。我们称此为“分辨率切换”。要解决此问题，可以使用属性srcset和sizes。响应图像的输出涉及相当复杂的逻辑的使用。除其他外，这包括确定将显示哪个图像，以及确定用户是否正在使用高分辨率屏幕。幸运的是，浏览器比可以确定最适合每个特定用户的图像的人更好。我们需要做的就是给他们一些线索。该属性srcset为浏览器提供图形资源列表，从中可以选择最合适的图像。该属性sizes使您可以告知浏览器在特定情况下要显示的尺寸图像。
顺便说一下，使用自适应图像，您不必担心浏览器对该技术的支持。我们感兴趣的属性享有出色的浏览器支持。此外，我们还为备用浏览器（如IE11）设计了一种备份机制。标签如何与浏览器“通信”
标签就是这样<img>告诉浏览器要选择哪个图像的。标签和浏览器的“对话”标签在这里<img>告诉浏览器以下内容：“在此屏幕尺寸下，我将以大约以下尺寸显示（表示属性sizes）。您可以拍摄任何具有以下宽度的图像（表示属性srcset）。因此，请选择现在最适合的图像。”Srcset属性
该属性srcset为浏览器提供了一组图形资源，可以从中选择最合适的图形资源。它还包含有关每个建议图像大小的信息。Srcset属性此属性src包含不了解该属性的浏览器的后备图像srcset。该srcsetURL包含图像及其宽度信息。浏览器将从提供给他的图像集中选择最合适的图像。此外，如果用户具有高像素密度的显示器（视网膜显示器），则浏览器在选择图像时会考虑到这一点。该属性srcset包含图像URL列表，后跟图像宽度信息。每对URL-之间用逗号分隔。列表项如下所示：image.jpg 1000w。这样的记录告诉浏览器图像image.jpg为1000像素宽。以这种方式描述图像集时，我们告诉浏览器以下内容：“我给您提供图像列表，并相信您选择最合适的图像。”浏览器将在一组复杂的准则的指导下选择最佳图像，这些准则包括用户显示什么图像，查看区域的当前大小是什么以及用户是否具有高分辨率显示。浏览器足够智能，可以知道在低分辨率桌面显示器上，如果输出图像的宽度为800像素，则需要从列表中选择宽度至少为800像素的图像。另外，浏览器知道如果在高分辨率显示器上显示宽度为320像素的图像，则需要选择宽度至少为640像素的图像文件。因此，我们不必担心1x和2x图形资源。您需要做的就是为浏览器提供一组良好的图像，并使其发挥作用。如何描述适合不同屏幕的图像？尺寸属性
属性srcset是一个很棒的工具。但是，当浏览器读取页面的HTML代码时，例如，它不知道是否使用CSS样式，该样式将图像大小设置为屏幕宽度的50％。 这是该属性起作用的地方sizes。有了它，我们可以向浏览器提示在将CSS应用于图像后将显示图像的大小。尺寸属性100vw-不满足任何条件时的默认大小。在属性中列表的最后指示sizes。1023px -窗口宽度。780px -满足指定条件时的图像宽度。
浏览器将在第一个满足条件时停止。该属性sizes包含以逗号分隔的媒体条件列表。媒体条件是媒体查询的子集。在这里，您不能指定条件（print或screen）适用的环境类型，但是可以使用与查看区域的宽度有关的媒体查询。每个列表条目均包含视口窗口的宽度和相应的图像宽度。列表项的格式为(min-width: 1023px) 780px。这样的记录告诉浏览器，如果视口的宽度为1023像素（或更多），则您需要使用宽度为780像素的图像。另外，这里可以使用相对宽度单位。例如，类似50vw。这告诉浏览器图像的宽度将是视口宽度的50％。在更复杂的情况下，您甚至可以使用函数calc。例如，视图设计calc(50vw — 2rem)告诉浏览器，图像宽度将为视口宽度的50％减2rem。也许以这种方式设置宽度时要考虑到某些压痕或某些边框的宽度。列表的最后一个元素未提供媒体条件。如果将宽度添加到列表中，但未指定媒体条件，则相应的值将被视为默认值，即在不满足其他条件的情况下。浏览器将从上至下查看此列表，并在与视口宽度相对应的第一个合适元素处停止。假设属性中包含sizes以下内容：(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
这是在不同情况下会发生的情况：- 如果用户正在使用大型桌面显示器，则浏览器将认为列表的第一个元素合适，并且将知道图像应为780像素宽。
- 直立的iPad屏幕的观看区域的标准宽度为768像素。在这种情况下，浏览器将跳过列表中的第一项，但会发现当前条件与第二项匹配。它告诉浏览器图像将为620像素宽。
- ,
sizes. , , 100% .
当然，这些仅仅是示例。在现实世界中，一切都变得更加复杂。例如，大屏幕用户在狭窄的浏览器窗口中查看页面时，所收到的图像将比窗口扩展到全屏时所获得的图像小。如果使用iPad Pro的用户将设备置于横向模式，则可能会获得更大的图像。如果他以纵向模式使用平板电脑，则可能会获得中等大小的图像。并且如果他在屏幕划分为多个窗口时以该模式使用浏览器，那么他可能会得到一个小的图像。在横向模式下使用某些大屏幕手机时，它们将符合我们列表中的第二条规则。这是所描述系统的魅力：开发人员无需照顾所有这些特殊情况以及设备的不同外形尺寸。他足以告诉浏览器为特定查看区域选择图像的哪个版本。如何准备浏览器将从中选择最适合的图像列表？Src属性
您可能已经注意到，以上所有示例中仍使用该属性src。您可能想知道给定该属性是否需要此属性srcset。这里的关键是，如果我们给浏览器的属性srcset，那么如果它是一个现代的浏览器，它会替换值src对应于从选择的图像值在DOM srcset。结果，事实证明现代浏览器会忽略该属性src，而将重点放在该属性上srcset。但是，属性src本身对于不支持使用响应图像的浏览器仍然很重要。此类浏览器非常老，忽略了srcset和属性sizes。他们只是不知道他们的存在。但是属性src他们了解，因此您可以将图像的地址写入其中，这将用作此类浏览器的备份选项。我通常在此属性中写入在像素密度不高的台式机显示器上看起来不错的最小图像的地址。问题和解答
▍如何生成图像集？
可以通过多种方式生成图像：手动，使用用于创建响应图像的工具以及适当的CDN功能。为了手动创建图像，您需要在Photoshop（或您使用的其他编辑器）中打开原始图像，并以所有必要的尺寸导出它。这可能需要很多时间，因此您可能需要使用适当的工具来自动化这项工作。在这些工具中，我最喜欢响应式图像断点生成器。来自Cloudinary。使用此工具时，只需将图像传输到其中，然后它将自动创建其大小不同的变体。您可以在此处调整生成图像的数量。一旦准备好图像，就可以将其下载并在项目中使用。支持响应图像的另一种选择是使用适当的CDN来托管它们。例如-Cloudinary或imgix。使用类似的服务，可以将最高分辨率的图像下载到CDN。然后，您可以使用URL参数请求不同大小的图像版本。在这种情况下，您不必担心调整图像大小的麻烦：只需告诉CDN您将要显示相应图像的大小即可。这是服务和项目的列表，可用于创建不同大小的图像的变体。should我应该为浏览器提供什么尺寸？
好问题！如果为浏览器提供了太多的图形资源，那么您只会浪费时间和精力来创建它们。如果资源太少，这意味着您将迫使站点用户下载大于他们所需图像的图像。如果使用单个图像，并且有机会自定义该图像输出的布局，则可以使用“ 响应图像断点生成器”工具。他将自动检查图像并确定从该图像生成的最佳资源集（就文件大小及其分辨率之间的平衡而言）是什么。然后，此工具不仅会生成文件，还会自动准备srcset和属性sizes。一组标准的图像尺寸，宽度为320到2560像素。如果您在特定的CMS上工作，或者正在创建Web应用程序，并且不知道将在一个或另一个位置显示的图像尺寸，那么我建议使用该标准尺寸图片。以前，我用的尺寸如下：320w，640w，960w，1280w，1920w和2560w。这些是通过将320乘以不同的系数而获得的整数。这组资源涵盖了各种屏幕的需求-从小型移动显示器到大型台式机显示器。但是，考虑到项目的功能，使用标准资源集总是比使用您自己的资源集效率低。在这种情况下，尽管我们看到了一个相当合乎逻辑的序列，但是它显示了文件大小的逐渐增加，因为如果图像的宽度（以及相应的高度）加倍，则该图像中的像素数将增加四倍。因此，如果您必须使用一组标准的图像尺寸，则可能需要选择一个对小尺寸图像具有较少选项而对大尺寸图像具有更多选项的集合。如果您将映像托管在Cloudinary上，则可以使用另一种方法。是用Cloudinary API，使您可以在下载图像时使用响应图像断点生成器来处理图像。自动处理完图像后，您可以使用API响应动态填充srcset和属性sizes。the应该在size属性中输入什么值？
为了弄清楚应该在属性中输入什么值sizes，您需要分析CSS并了解在不同条件下显示的图像宽度。有时，这取决于图像本身的宽度：img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
在这种情况下，有两个固定的图像尺寸选项。这个事实可以直接反映在属性中sizes：<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
但是，通常会发现图像大小是灵活的。通常，图片会从其容器继承尺寸：img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
在此示例中（假设影响图像宽度的唯一元素是.container），可以将容器的宽度视为图像的宽度。在此值得注意的是，从容器的宽度减去内凹痕的宽度。您可能需要考虑这一点，也许不需要考虑。这完全取决于压痕对图像最终宽度的影响程度。<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
如您所见，设置属性sizes高度依赖于特定的布局。通常，我会进行工作，首先是在浏览器开发人员工具中研究图像，然后找出哪些选项会影响图像的大小。▍如何检查响应图像的正确设置？
不难想象，为响应图像测试正确的设置可能既困难又耗时。但是，令我们高兴的是，有一种工具可以简化此类问题的解决方案。这是一个响应式图像棉绒。这是一个书签，可以添加到浏览器并在您自己的站点上使用。调用它时，它将使用各种大小的查看区域和屏幕像素密度自动扫描页面以测试图像。然后，他显示一个报告，其中包含有关页面所有图像的信息，以及是否正确组织了图像尺寸的管理。如果在测试页面时出现问题，您将得到有关此信息的通知，甚至会得到有关解决问题的建议。摘要
正如你所看到的，属性的组合srcset，并sizes提供了一个巨大的机会。通过设置这两个属性，您可以向浏览器告知要用于特定查看区域宽度的图像的宽度，并提供图形资源列表，浏览器从中选择最适合的图形资源。如果在使用图像时需要解决更复杂的问题，请注意，有解决这些问题的工具。假设这就像使用WebP之类的现代图形格式，或者根据屏幕大小将不同的图像发送给客户端一样。如果您想研究响应式图像的工作，请查看此材料。亲爱的读者们！ 您在项目中使用响应式图像吗？