响应式图像 - 从 A 到 Z 的参考指南

第 1 章 - 什么是响应式图像？

在本指南中，我们将学习与响应式图像相关的所有内容，并附上示例代码。理解本文讨论的概念需要具备 HTML 和 CSS 的基础知识。阅读完本指南后，您将掌握正确实现响应式图像的最新工具和技术。

响应式图像是根据设备分辨率、屏幕方向、屏幕尺寸、网络连接和页面布局加载合适图像的一系列技术。浏览器不应拉伸图像以适应页面布局，并且加载图像不应浪费时间和带宽。它能够提升用户体验，因为图像加载速度快，并且在视觉上看起来清晰锐利。

HTML 中响应式图像的简单示例

理解响应式图像的最佳方式是看一个简单的例子。为了简单起见，我们将在不同设备上加载一张 2200px 宽的图像。除了视口大小之外，其他一切都保持不变。

标记将是：

<!-- The width of the orignal image is 2200px -->
<img src="image.jpg" />

对于桌面（iMac），图像是最佳的，因为视口和图像的宽度匹配。

然而，在移动设备上，我们可以看到，视口只有 375 CSS 像素宽。平板电脑也是如此，视口只有 1024 CSS 像素宽。下载这个过大的文件，我们浪费了时间和带宽。

发生什么事了？

这是响应式图像的简化版本。🙌

我们使用srcset(source set) 为浏览器提供了三种不同尺寸的图片。浏览器会根据设备的实际视口大小选择合适的选项。我们很快会详细了解srcset和其他选项。

src请注意，如果浏览器不支持该属性，我们仍会使用旧属性作为后备srcset。截至 2020 年 10 月，srcset除 Opera mini 和 IE 外，所有浏览器均支持该属性。

第 2 章 - 为什么我们需要响应式图像？

正如您在上面的示例中所见，一种尺寸并不能满足所有需求。响应式设计应该根据用户屏幕尺寸、像素密度和设备方向进行调整，以确保良好的用户体验。

以下是我们需要实现响应式图像的三个主要原因：

• 在不同设备上渲染高质量图像
• 加载正确的图像 - 艺术指导
• 网页加载速度更快

1. 在不同设备上渲染高质量图像

没有明显伪影的图像看起来清晰锐利，有助于提升用户体验。这一点在零售网站上尤为重要，因为用户希望查看产品图片的高分辨率特写，以便更好地观察纹理和细节。

为了使图像看起来美观，它必须根据视口宽度和屏幕像素密度进行自适应。让我们来理解一下：

不同视口宽度的情况

如果您的布局根据设备视口变化，则加载的图像尺寸应与容器的 CSS/HTML 宽度匹配。如果浏览器拉伸较小的图像以适应设计，渲染后的图像会显得模糊；而如果您在视口宽度较小的设备上加载较大的图像，则会导致带宽和时间的浪费。

不同像素密度情况

高分辨率显示器具有更高的像素密度。这意味着在相同的物理空间内，像素数量更多。因此，高分辨率显示器需要具有更多像素的图像。简单来说，需要更大的图像才能容纳相同的物理空间。

以 iPhone8 为例：

• CSS 视口大小：375px x 667px
• 像素密度：2
• 有效设备分辨率：750px x 1334px

这意味着如果我们想要渲染一个 100 CSS 像素宽的图像，我们将必须加载一个 200px 宽的图像才能使其看起来清晰。

对于像素密度为 3 的设备，我们必须加载 300px 宽的图像。

但请注意，这并不总是意味着我们必须加载较大的文件。在 DPR（设备像素比）为 2 的设备上，低质量（50）的 2 倍宽图像看起来会比高质量（90）的 1 倍宽图像更好。尽管文件大小相似，但 2 倍宽图像会呈现更清晰的外观。您可以了解更多关于此技术的信息。

2. 加载正确的图像 - 艺术指导

当一张大图像被调整大小以适应一小块区域时，它可能会失去其相关性、实用性和可读性。最重要的部分可能会被裁剪掉。

例如，请考虑产品登录页面上仪表板的屏幕截图。它向潜在用户突出显示了用户界面的不同元素。

在桌面上，上面的图片非常完美。然而，如果我们缩小同一张图片以适应移动端的视口，就会丢失页面的许多基本元素。

在这种情况下，完全不同的图像可能更合适，例如：

这叫做艺术指导。通过“艺术指导”，你可以根据图片在页面上的大小明确决定显示哪张图片。我们很快会更详细地介绍这项技术。

您还可以使用它根据方向在移动设备上显示不同的图像 - 横向模式与纵向模式。

3. 网页加载速度更快

根据 HTTP 存档数据，网站页面平均 64% 的重量由图片构成。随着移动流量超越桌面流量，针对不同设备尺寸优化图片变得更加重要。

理想情况下，您希望提供调整大小以匹配用户视口尺寸的图片。如果没有办法做到这一点，您将不得不向所有用户发送过大的图片。这意味着使用视口宽度较小的移动设备的用户必须下载额外的数据，从而降低页面加载速度。这浪费了时间、带宽和金钱，并降低了整体用户体验。

第 3 章 - 如何使图像具有响应性？

实现响应式图像的方法有很多。从使用基于 JavaScript 的 hack 解决方案到现代浏览器原生支持，我们已经取得了长足的进步。

在本章中，我们将介绍实现响应式图像的最新方法。

在详细讨论每种技术之前，让我们先进行快速比较：

• 源码
• 带有尺寸的 Srcset
• 图片元素
• 客户端提示
• CSS 中的响应式图像

第四章 - Srcset

标准<img>标签允许我们定义单个图像源。作为 Web 开发者，我们有责任确保定义正确的图像源。但由于我们事先无法掌握设备的所有信息，因此很难创建一个万无一失的标记，以便为所有分辨率加载最佳图像。

还记得 Web 开发人员和浏览器之间的小对话吗？

srcset允许您定义不同的图像资源列表以及尺寸信息，以便浏览器可以根据实际设备的分辨率选择最合适的图像。

每个以逗号分隔的项目srcset都有：

1. 图片 URL，例如http://ik.imagekit.io/demo/default-image.jpg或相对路径/demo/default-image.jpg
2. 一个空的空间
3. 图像的实际宽度或显示密度：
   • 或者使用显示密度描述符，例如1.5x，2x等。
   • 或者，使用宽度描述符，例如。450w这是图像的宽度（以像素为单位）。

使用显示密度描述符

显示密度描述符的语法很简单。srcset提供以逗号分隔的图像资源列表以及应使用的显示密度，例如1x，2x等等。

<img src="image.jpg" 
     srcset="image.jpg,
             image_2x.jpg 2x"
/>

如果未提供显示密度描述符，则假定为1x。

演示 - 带有密度描述符的 srcset

让我们通过现场演示来看一下它的实际效果 - https://imagekitio.github.io/responsive-images-guide/srcset-density.html。

使用Chrome 中的设备模拟器，在 DPR 1 中，图像 currentSrc 是https://ik.imagekit.io/ikmedia/paddy.jpg?tr=w-300

类似地，如果我们考虑不同的 DPR 值：

何时使用显示密度描述符

如果你的图片宽度固定，唯一变化的是显示密度，那么可以使用显示密度描述符。不过事情远没有那么简单 😉

使用显示密度描述符的挑战

根据 pixensity.com 的数据，有超过 300 种不同类型的手机、平板电脑、笔记本电脑和台式设备，屏幕尺寸和显示密度各不相同。

关键问题是，您是否想要跟踪可用的不同显示密度，例如 1x、1.5x、2x、2.5x、3x 4x 等。更多时候，您需要做的不仅仅是关注显示密度，因此这种方法是不够的。

使用宽度描述符

语法类似于显示密度描述符，但我们提供的是图像的实际宽度，而不是显示密度值。

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

这可以让浏览器选择最佳图像

srcset使用宽度描述符允许浏览器根据运行时在特定显示器上呈现该图像所需的实际宽度来选择最佳候选者。

请注意，浏览器在计算所需宽度时也会考虑显示像素密度。😎

例如，假设一张图片占据了整个视口宽度——在 DPR 为 2 的 300px 宽屏幕上，浏览器会选择它medium.jpg，因为它需要一张 300x2=600px 宽的图片。在 DPR 为 3 的 300px 宽屏幕上，浏览器会选择它，large.jpg因为它需要一张 300x3=900px 宽的图片。

演示 - 带有宽度描述符的 srcset

让我们通过现场演示来看一下这个效果 - https://imagekitio.github.io/responsive-images-guide/srcset-width.html。

使用设备模拟器，我们将屏幕大小调整为 250px，并将 DPR 设置为 1。在这种情况下加载的图像是https://ik.imagekit.io/ikmedia/paddy.jpg?tr=w-300

类似地，如果我们考虑具有不同视口宽度和 DPR 值的组合：

请注意浏览器在计算所需图像的最终宽度时如何考虑显示密度和视口宽度。

仅使用 srcset 的挑战

如果您正在加载将占据几乎整个视口宽度的固定宽度图像，则请使用srcset宽度描述符。

然而，在以下情况下srcset单独使用是不够的：

• 当您加载灵活图像时，即图像尺寸会根据视口大小而变化时。例如，移动设备上的单列布局和桌面设备上的三列布局将需要不同的尺寸图像。
• 或者当图片只占据视口宽度的一小部分时。由于浏览器无法感知布局，它会假设图片会占据整个视口宽度，从而下载比实际需要大得多的图片。

等等。什么？浏览器不知道布局！

逻辑上，浏览器会根据样式表来查找所需的图像元素大小，但请注意，这些样式表尚未解析。如果浏览器等到所有样式表都解析并执行完毕，必然会延迟图像的下载。

为了更好地理解这一点，我们首先看看浏览器如何加载页面。

浏览器如何加载网页——旧方法

网页由文本、CSS、JS 和字体组成。按下 Enter 键后，后台会发生很多事情，最终页面会呈现在你的屏幕上。

• 首先，HTML 被下载，然后浏览器开始解析。如果遇到外部样式表，浏览器就会并行下载并继续解析 HTML。
• 如果遇到内联<script>标签，它会暂停 HTML 解析并立即执行脚本。
• 如果它遇到指向外部 URL 的<script>标签（没有defer或async属性的标签），它会暂停 HTML 解析并首先下载并执行该 Javascript 资源。
• 如果遇到<img>标签，它就会开始并行下载图像资源并继续解析 HTML。
• 一旦所有阻塞的外部样式表和 Javascript 被下载、解析和执行，页面就会被呈现。

例如，如果我们有这样的 HTML：

<script src="vendor.js"></script>
<script src="app.js"></script>
<script src="zoom.js"></script>
<img src="image1.png">
<img src="image2.jpg">

– 浏览器加载如下资源：

每当遇到脚本时就暂停解析器，会导致浏览器无法充分利用其通过网络并行下载多个外部资源的能力。这种方法会延迟渲染页面所需资源的下载。

预加载器或推测解析来拯救——新方法

Internet Explorer、WebKit 和 Mozilla 都在 2008 年实现了预加载器，以改善我们刚才讨论的网络利用率低问题。

本质上，其理念是浏览器在执行脚本时无法构建 DOM，但仍然可以解析其余标记以查找其他资源，例如样式表、JavaScript 文件或链接的图像。这些文件会被添加到列表中，并在后台开始下载。希望在所有脚本执行完毕并完成 HTML 解析时，浏览器已经下载了这些资源，这样就不会再有任何延迟。

上面示例的瀑布图现在如下所示：

现在我们明白了为什么srcset单凭这一点不足以让浏览器理解图像所需的尺寸。为了解决这个问题，我们引入了sizes属性。

第五章 - 带有尺寸的 Srcset

sizes属性包含一个逗号分隔的列表。列表中的每个项目描述了图像相对于视口的大小。

使用该sizes属性可以srcset为浏览器提供足够的信息，使其在看到 HTML 中的标签时立即开始下载正确的图像，而<img>无需等待样式表完成下载和解析。

为什么我们需要尺寸？
如果你直接滚动到这里，并想知道为什么浏览器不知道图片渲染的尺寸，请查看浏览器如何加载网页。

语法：

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"
/>

每个以逗号分隔的项目sizes都有：

1. 例如，媒体条件(max-width: 300px)- 它描述了屏幕可能处于的状态。(max-width: 300px)表示视口宽度为 300 CSS 像素或更小。它类似于媒体查询，但有一些限制。您不能使用screen或print。
2. 空旷的空间。
3. 媒体条件为真时图片元素的宽度。您可以提供绝对长度 (px、em) 或相对于视口的长度 (vw)，但不能提供百分比。

演示 - 带有尺寸的 srcset

让我们通过现场演示来看一下这个效果 - https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html

布局如下：

• 如果视口宽度超过 900px，则每个图像固定占用 225px 宽度。
• 最大 900px，每张图片占据 33vw，即总视口宽度的 33%。
• 最大 700px，每张图片占据 50vw，即总视口宽度的 50%。
• 每个图像最多 400px，占用 100vw，即整个视口宽度。

单个图像元素的 HTML 标记如下所示：

<img src="https://ik.imagekit.io/ikmedia/women-dress-1.jpg" 
     srcset="https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225 225w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-300 300w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-350 350w,
             https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-640 640w"
     sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px">

让我们看看在不同的屏幕尺寸和 DPR 值下会发生什么 -

如何选择 srcset 的断点并定义大小？

在实现响应式图像时，您必须编写srcset和sizes属性的值。这很快就会变得棘手。因此，让我们重复一下这两个属性的用途，以便轻松获取值：

• srcset- 定义不同宽度的多个图像源，并让浏览器在 HTML 解析期间选择最合适的候选者。
• sizes- 定义图像元素的大小。它可以是固定大小，例如视口大小225px，也可以是相对于视口大小。您可以在此处使用 CSS 媒体条件，根据视口宽度提供不同的大小值。

在提供不同的图片源之前srcset，您需要根据布局了解所需的所有尺寸。这将与站点相关，这意味着它与您的 CSS 紧密相关。

这是解决这个问题的一个简单方法。

计算尺寸时，请考虑图像宽度相对于视口的比例。例如：“我的布局是这样的：如果屏幕尺寸大于 Y 像素，则图像大约占视口的 X%。”

让我们通过几个例子来理解这一点。

sizes="(min-width 1024px) 33vw, 95vw)"

它的意思是：“在大于 1024px 的屏幕上，图像采用三列布局。否则，它接近完整视口宽度，并在其周围留出一些空间。”

现在，让我们从演示中选择sizes- https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html

sizes="(max-width: 400px) 100vw, (max-width: 700px) 50vw, (max-width: 900px) 33vw, 225px"

这意味着 -

• 如果视口宽度达到 400px，则每个图像占用 100vw，即整个视口宽度。
• 最大 700px，每张图片占据 50vw，即总视口宽度的 50%。
• 最大 900px，每张图片占据 33vw，即总视口宽度的 33%。
• 超过 900px 时，每张图片固定占用 225px 宽度。

考虑到许多设备、相应的视口宽度和 DPR 值，相对于视口定义图像宽度并不总是能提供最佳图像。然而，这确实是一个实用的解决方案。

一旦我们知道了的值sizes，就很容易找出我们需要定义的所有不同尺寸的图像srcset-

如果您对有效尺寸进行排序，您将得到以下结果 -

225px，300px，350px，400px，450px，600px，675px，700px，800px，900px，1025px和1200px。

如果您使用 ImageKit.io 之类的图像 CDN，则可以通过添加 URL 参数轻松提供不同尺寸的图像，例如

• 225px宽图 - https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225
• 300px宽图像 - https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-300
• 600px宽图像 - https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-600

但是，您不必在 中提供所有所需尺寸的图片srcset。您可以选择几个候选图片，浏览器会自动选择最接近的一张。这样做有两个目的：

• 您不必生成和存储同一图像的多个变体。
• 如果您使用 CDN 来加快交付和缓存速度，那么拥有一些变体将会提高您的缓存命中率，因为重复请求会增加。

因此，您可以选择三到四个候选人并srcset这样写：

srcset="https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-700 700w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-900 900w"

编写 srcset 时选择断点的技巧

• 您可以查看 Google Analytics 设备报告，了解最应该关注的屏幕分辨率。据此，您将了解哪种布局最需要优化。例如，假设您网站上 60% 的用户看到三列布局，20% 的用户看到单列布局。那么，您可以考虑在多个 DPR 值下，这两种布局所需的所有尺寸变化，并写下srcset。
• 为了提高 CDN 的缓存命中率，请勿尝试提供srcset所有可能的断点和大小。CDN 无法缓存所有资源。某些资源必须被移除，以便为其他资源腾出空间。这会导致性能瓶颈，而非收益。
• 如有疑问 - 首先考虑您的布局，即 CSS ➡️，然后相应地编写sizes➡️ 最后选择断点以srcset考虑您需要的不同 DPR 值和有效图像尺寸🙌。

第六章-使用图片元素

srcset并且sizes对于定义同一图像的多个尺寸变体非常有用。但是，如果您需要艺术指导 - 即明确指示浏览器根据浏览器视口或图像格式支持加载完全不同的图像，则需要<picture>元素。

何时使用 Picture 元素

图片元素应该用来实现：

• 艺术指导
• 不同格式支持
• 颜色主题示例

语法：

<picture>
  <source srcset="/large.jpg"
          media="(min-width: 800px)">
  <source srcset="/small.jpg"
          media="(min-width: 400px)">
  <img src="/large.jpg" />
</picture>

<picture>元素由零个或多个元素source和一个img元素组成。浏览器会source根据设备显示和图像格式支持情况，考虑每个元素以选择最佳匹配。

除了众所周知的和之外，每个都source接受media和属性。typesrcsetsizes

媒体属性

media属性包含类似 CSS 媒体查询的媒体条件。如果源元素的媒体条件计算结果为false，浏览器将跳过该源。如果源元素的所有媒体条件均不计算结果为true，则浏览器将加载标签中指定的图像img。

示例 - 根据屏幕尺寸加载不同内容

<picture>
  <source srcset="/large.jpg"
          media="(min-width: 800px)">
  <source srcset="/small.jpg"
          media="(min-width: 400px)">
  <img src="/large.jpg" />
</picture>

浏览器将根据media条件选择其中一个源元素。

Srcset 属性

该srcset属性与我们之前讨论的相同。它包含以逗号分隔的不同图像资源列表。

每个以逗号分隔的项目srcset都有：

1. 图片 URL，例如http://ik.imagekit.io/demo/default-image.jpg或相对路径/demo/default-image.jpg
2. 一个空的空间
3. 图像的实际宽度：
   • 或者使用显示密度描述符1.5x例如2x等。
   • 或者，使用宽度描述符，例如450w。这是图像的宽度（以像素为单位）。

示例 - 根据设备像素比率加载不同内容

<picture>
  <source srcset="large_1x.jpg 1x, large_2x.jpg 2x, large_3x.jpg 3x"
          media="(min-width: 800px)">
  <source srcset="small_1x.jpg 1x, small_2x.jpg 2x, small_1x.jpg 3x"
          media="(min-width: 400px)">
  <img src="large_3x.jpg" />
</picture>

Type 属性

type属性指定了源文件中资源 URL 的 MIME 类型srcset。如果浏览器支持该 MIME 类型，则会加载该资源。否则，浏览器将跳过该源文件并转到下一个。如果浏览器不支持任何源文件类型，则会加载 中的图像img。

示例 - 根据浏览器支持加载不同的图像格式

<picture>
  <source srcset="/image.webp"
          type="image/webp">
  <source srcset="/image.avif"
          type="image/avif">
  <img src="/image.jpg" />
</picture>

使用图片元素的现场演示

让我们通过现场演示来看一下这一点 - https://imagekitio.github.io/responsive-images-guide/picture.html

<picture>这个演示有两个元素：

• 第一个示例包含 ImageKit 媒体库的屏幕截图，用于展示不同的用户界面元素。界面会根据屏幕尺寸而变化。因此，为了展示相同的效果，我们根据屏幕尺寸加载了不同的屏幕截图。对于大于或等于 的屏幕尺寸800px，您将看到桌面版本的用户界面，即https://ik.imagekit.io/ikmedia/dashboard.png。否则，您将看到适合移动设备的版本，即https://ik.imagekit.io/ikmedia/dashboard-mobile.png。
• 第二个示例演示了如果浏览器支持 WebP 格式的图片，则加载 WebP 格式的图片。否则，加载 JPG 格式的图片。

在暗模式和亮模式下加载不同的图像

暗黑模式可让您将应用窗口的背景颜色更改为黑色。作为 Web 开发者，您可以选择在用户开启暗黑模式时加载其他图片。

<picture>
  <source srcset="dark.jpg" media="(prefers-color-scheme: dark)">
  <img src="light.jpg">
</picture>

浏览器将评估媒体条件(prefers-color-scheme: dark)，如果符合true，它将选择该源并加载dark.jpg。

它看起来是这样的，切换暗模式设置并刷新页面以查看浏览器如何加载不同的图像。

现场演示 - https://imagekitio.github.io/responsive-images-guide/dark-vs-light-mode.html

第 7 章 - 使用客户端提示

客户端提示是什么？

顾名思义，客户端提示是客户端设备随请求本身向服务器提供的提示。这些提示允许服务器使用最优资源来满足特定请求。后者称为内容协商。

客户端提示通过 HTTP 请求标头提供此信息。例如：

如何启用客户端提示？

并非每个请求都包含这些 HTTP 标头。您必须使用meta标签明确告知浏览器包含这些客户端提示。

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width">

DPR这允许浏览器将值（设备像素比）和Viewport-Width（CSS 像素中的设备屏幕宽度）与图像请求一起发送。

srcset太棒了。但是既然我们已经有了和 ，为什么在实现响应式图像时还需要客户端提示呢picture？

为什么我们需要客户提示？

为了理解客户端提示的必要性，让我们仔细看看到目前为止所学到的知识 -

• srcset并sizes定义不同图像变体的URL和指定渲染图像的大小，以便浏览器可以根据视口的大小自行下载最合适的图像。
• 该picture元素用于指定浏览器如何加载不同裁剪或完全不同的图像，以更适合较小的显示屏。

虽然srcset并picture为我们提供了实现响应式图像用例所需的一切，但对于复杂的用例，开发和维护可能会很耗时。

以上所有方法都需要你修改标记，以便 Web 开发者能够传递浏览器在运行时下载正确图片所需的关键信息。客户端提示也能做到同样的事情，只不过省去了复杂的标记——它们在布局信息和设备兼容性方面，填补了浏览器和服务器之间缺失的环节。

让我们通过一个例子来理解

假设您有一个简单的分辨率切换用例，需要根据视口宽度加载同一张图片的不同尺寸版本。语法如下：

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 225px"
/>

但是，如果您想在支持的浏览器中加载 WebP 图像，您的语法将变为 -

<picture>
  <!-- webp format for (max-width: 300px) 100vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.webp 300w,
                  medium.webp 600w,
                  large.webp 900w"
            type="image/webp">
  <!-- jpg format for (max-width: 300px) 100vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.jpg 300w,
                  medium.jpg 600w,
                  large.jpg 900w">
  <source srcset="/image.avif"
            type="image/avif">

  <!-- webp format for (max-width: 600px) 50vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.webp 300w,
                  medium.webp 600w,
                  large.webp 900w"
            type="image/webp">
  <!-- jpg format for (max-width: 600px) 50vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.jpg 300w,
                  medium.jpg 600w,
                  large.jpg 900w">
  <source srcset="/image.avif"
            type="image/avif">

  <!-- webp format for (max-width: 900px) 33vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.webp 300w,
                  medium.webp 600w,
                  large.webp 900w"
            type="image/webp">
  <!-- jpg format for (max-width: 900px) 33vw -->
  <source media="(max-width: 300px) 100vw"
          srcset="small.jpg 300w,
                  medium.jpg 600w,
                  large.jpg 900w">

  <img src="large.jpg" />
</picture>

是的！很快就变得复杂了。

如果我们使用客户端提示，上述语法可以简化为

<meta http-equiv="Accept-CH" content="DPR, Width">
...
<img src="/image.jpg" sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 225px" />

很神奇吧！不是的srcset。但要实现这一点，服务器应该能够理解客户端的提示并做出适当的响应。

我们将详细讨论如何实现这一点，但最重要的是——如果可能的话，你应该尽量集中处理图像大小调整和处理，并尽可能实现自动化。这正是客户端提示的作用所在。ImageKit 开箱即用地支持客户端提示。

客户端对响应式图像的提示

其中，客户端提示的主要用途之一是发送当前页面布局中所需图像大小的信息。这简化了标记，并在实现响应式图像时自动将大量信息从浏览器传递到 Web 服务器。

让我们仔细看看浏览器在运行时需要哪些信息才能加载合适的图像 -

• 视口宽度。
• 图像渲染后会有多大？这取决于你的布局，布局可能会根据视口的宽度进行调整。
• 设备像素比即1x、2x、3x或4x。
• 不同尺寸的图片资源的URL。

您可以选择以下客户端提示，这些提示将作为请求标头随 HTTP 请求一起发送 -

• Width- 考虑到设备像素比，页面布局中所需图像的最终尺寸
• DPR- 设备像素比
• Viewport-Width- 视口宽度（以 CSS 像素为单位）。
• Accept- 默认情况下，此标头始终随每个请求一起发送。
• Save-Data-on或者off表明用户希望接收较少的数据。
• ECT-有效连接类型，例如 ** 4g、3g、2g和slow-2g。
• RTT-应用层的往返时间，以毫秒为单位。
• Downlink- 用户连接的近似下行速度，以兆比特每秒 (Mbps) 为单位。

Width、、DPR和Viewport-Width提示与响应式图像实现最相关，因为它们允许 Web 服务器从后端控制图像大小。

Accept服务器可以使用提示以下一代格式（例如 WebP 或 AVIF）传送图像，而无需更改图像源 URL 或使用<picture>元素。

服务器可以使用网络提示（例如Save-Data、ECT、RTT和 ）Downlink来提供图像的低质量变体，这将消耗更少的数据。

宽度

它在考虑设备像素比率后，根据页面布局提供所需图像的最终大小。提示是通过使用或标签Width触发的图像资源请求发送的。<img><source>sizes

这是关于实现响应式图像最有用的客户端提示。

例如 - 假设某个页面有一个<img>元素的sizes属性设置为 300。这意味着布局需要一个300CSS 像素宽的图像。

<!-- Allow Width header to be sent -->
<meta http-equiv="Accept-CH" content="Width">
...
<img src="/image.jpg"sizes="300px" />

现在浏览器将 300 乘以设备像素比。假设设备像素比 (DPR) 为 2，浏览器会将Width提示设置为600,300x2。这就是当前布局所需图像的实际尺寸。

Request headers
GET: /image.jpg
width: 600

这允许服务器以图像进行响应，这对于该设备和页面的当前布局来说是最佳的。

达伊沙

此提示提供设备像素比。它相当于window.devicePixelRatio。

例如 - 当选择加入时

<!-- Allow DPR header to be sent -->
<meta http-equiv="Accept-CH" content="DPR">
...
<img src="/image.jpg" />

假设设备像素比为2，浏览器会将提示设置DPR为2。

Request headers
GET: /image.jpg
dpr: 2

您可以在服务器上使用此标头来发送正确的图像变体（例如1x），2x或3x基于实际的设备像素比率。

视口宽度

此 hint 提供视口宽度（以 CSS 像素为单位）。它相当于window.innerWidth。

您可以在服务器端使用此提示，以适合特定屏幕尺寸的图像进行响应。这对于实现艺术指导用例非常有用。

例如 - 当选择加入时

<!-- Allow Viewport-Width header to be sent -->
<meta http-equiv="Accept-CH" content="Viewport-Width">
...
<img src="/image.jpg"sizes="300px" />

假设设备屏幕宽度为 300 CSS 像素宽，浏览器将设置Viewport-Width提示为 300。

Request headers
GET: /image.jpg
viewport-width: 300

接受

它提供了浏览器支持的所有内容类型，服务器可以利用这些内容类型发送最优响应。

示例用例包括，当浏览器在标头中声明支持 WebP 或 AVIF 格式时，以 WebP 或 AVIF 格式提供图片Accept。例如，AcceptChrome 中图片资源请求的标头值为image/avif,image/webp,image/apng,image/*,*/*;q=0.8。它包含image/webp该值，服务器可以使用该值以 WebP 格式进行响应。

如果您使用 ImageKit，那么它会根据 Accept 标头值自动转换图像格式。

保存数据

此提示表示客户端倾向于减少数据使用量。当值为 时，服务器应尝试在响应中发送其他较小的负载。例如，在图片请求中，如果请求标头on的值为 ，则服务器应响应较低质量的图片以减少数据使用量。Save-Dataon

Chrome Mobile 和 Opera Mobile 等移动浏览器允许用户启用流量节省模式。启用此模式后，浏览器会将Save-Data包含值的请求头随请求一起发送on。禁用此模式后，则Save-Data根本不会发送请求头。

例如，在启用“保存数据”功能的客户端访问时，右图几乎缩小了 33%。您可以通过安装此扩展程序在 Chrome 桌面上进行测试。

ImageKit支持保存数据模式，启用后，它将提供低质量的图像以减少数据传输。

ECT、RTT 和下行链路

除了Save-Data提示之外，我们还有ECT，RTT以及Downlink客户端提示 -

• ECT-有效连接类型，例如 ** 4g、3g、2g和slow-2g。
• RTT-应用层的往返时间，以毫秒为单位。
• Downlink- 用户连接的近似下行速度，以兆比特每秒 (Mbps) 为单位。

Jeremy Wagner在 Google Web Fundamentals 中写道 -

自适应性能的理念是，我们可以根据客户端提示向我们提供的信息来调整我们交付资源的方式；具体来说，是围绕用户网络连接当前状态的信息。

时间是关键——在慢速网络上长时间加载高质量图片比显示快速加载的低质量版本更让用户感到沮丧。您可以使用这些网络客户端提示来计算客户端网络连接质量的分数，并相应地调整服务器逻辑，以帮助慢速网络上的用户获得良好的体验。

客户端提示的限制

客户端提示看起来非常棒。它们可以自动化响应式图像，而无需进行重大标记更改。但是客户端提示也有一些限制：

客户端提示并非在所有浏览器中都有效

目前，它们仅支持 Chrome 和基于 Chromium 的浏览器、Edge 和 Opera。

Chrome 67 桌面版中的跨域客户端提示已删除

在客户端提示登陆 Chrome 35 之后，人们担心由于通过客户端提示传递的设备相关信息，可能会跨多个网站跟踪用户。

本质上，发送高度精细的数据（例如图片和视口宽度）可能有助于在多个请求中识别用户。更重要的是，没有机制来控制哪个来源应该接收这些数据。一旦您选择启用客户端提示，所有图片资源类型的请求都将开始与来源共享特定于设备的数据。

如果您的网站托管在 ，www.example.com并且图片也包含在 ，www.example.com/image.jpg那就没问题。但是，如果 的图片www.images.third-party-service.com/image.jpg具有相同的数据，它可能会将用户的相同信息泄露给之前可能无权访问过这些信息的其他来源。

因此，Chrome 团队在 Chrome 67 桌面版中移除了跨域客户端提示，但它们在移动版中仍然有效。功能策略制定完成后，这些限制将很快被移除。

您的服务器应该支持客户端提示

为了使客户端提示起作用，您的服务器应该理解它们并以适当的图像进行响应。

例如，服务器应该能够 -

• 根据客户端提示的值提供正确尺寸的图像Width。
• 根据客户端提示的值以 WebP 或 AVIF 格式提供图像Accept。
• 根据客户端提示的值选择正确的图像变体DPR。

幸运的是，您可以使用ImageKit.io之类的图像 CDN 自动执行所有这些操作，它支持开箱即用的客户端提示。

CDN 上的缓存可能比较棘手

您可能希望缓存静态资源（例如图片），以加速下载并减少源服务器的负载。但是，如果客户端提示混杂其中，这可能会比较棘手。

通常，CDN 会根据资源 URL 在缓存中查找对象。但是，当服务器根据其他请求 HTTP 标头（即客户端提示）更改响应时，CDN 必须知道如何响应后续请求。本质上，如果我们根据请求Accept标头值更改响应，则必须将 CDN 配置为根据请求标头的值将单独的响应存储在缓存中Accept。

您可以使用Vary响应标头来指示 CDN 和中间代理根据标头名称维护不同的缓存对象Vary。例如 -

Vary: Accept, DPR

这意味着 CDN 和中间代理在缓存中存储和查找对象时，除了资源 URL 之外，还应该考虑Accept和请求标头的值。缓存查找键应该是。DPRAccept + DPR + resource URL

需要注意的是，不要设置，Vary: User-agent因为请求标头中可能存在大量唯一值User-Agent，从而导致 CDN 上的缓存命中率较低。

像ImageKit.io这样的图像 CDN已经负责 CDN 缓存，同时确保缓存命中率较高。

第 8 章 - CSS 中的响应式图像

background-image是一个非常强大的 CSS 属性，它允许你在除 之外的元素上插入图像img。到目前为止，你所学习的关于响应式图像的知识仅限于 HTML 标记。让我们看看如何在 CSS 中实现响应式图像。

我们需要涵盖以下用例：

• 艺术指导，即根据屏幕宽度加载完全不同的图像。在 HTML 中，我们使用picture元素。在 CSS 中，我们可以使用老式的媒体查询。
• 提供高分辨率图像变体，让浏览器做出选择。在 HTMLsrcset属性中，为浏览器提供同一张图片的1x、2x和3x变体。在 CSS 中，我们可以选择使用image-set。

在 CSS 中，仅使用媒体查询就足以实现响应式图像。然而，image-set它与 srcset 类似，srcset因为它提供了选项并让浏览器选择图像。但它并不等同于 srcset。

CSS 中的艺术指导 — 根据屏幕尺寸加载完全不同的图像

在 HTML 中，我们有一个picture元素可以有条件地加载图像。

<picture>
  <source srcset="/large.jpg"
          media="(min-width: 800px)">
  <source srcset="/small.jpg"
          media="(min-width: 400px)">
  <img src="/large.jpg" />
</picture>

在 CSS 中，我们有媒体查询。

.element {
  background-image: url(small.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

.@media (min-width: 800px) {
  .element {
    background-image: url(large.jpg);
  }
}

在这个例子中，在小屏幕上background-image: url(small.jpg)应用，并且当视口宽度大于或等于 800px 时background-image: url(large.jpg)应用。

根据设备像素比加载高分辨率图像

在 HTML 中我们有srcset

<img src="image.jpg" 
     srcset="image.jpg 1x,
             image_2x.jpg 2x"
/>

在 CSS 中，我们可以使用image-set媒体查询。

1. 用于image-set提供高分辨率图像变体

.demo {
  background-image: url(image.jpg); // fallback
  background-image: -webkit-image-set(  
    url(image.jpg) 1x,  
    url(image_2x.jpg) 2x  
  );  
  background-image: image-set(  
    url(image.jpg) 1x,  
    url(image_2x.jpg) 2x
  );
}

如果image-set不支持，background-image: url(image.jpg)则将应用回退。

1. 使用媒体查询

.demo {
  background-image: url(image.jpg);

  // Standard syntax supported in Chrome, Firefox, and Opera
  @media (min-resolution: 2dppx), 
  (-webkit-min-device-pixel-ratio: 2)  /* For Safari & Android Browser */ 
  {
    .demo {
      background-image: url(image_2x.jpg);
    }
  }
}

第九章 - 延迟加载响应式图像

什么是延迟加载图像？

正如 Rahul Nanwani 在延迟加载图像指南中所写-

延迟加载图像是网页和应用开发中的一组技术，它将页面上的图像加载延迟到稍后（即实际需要这些图像时）进行，而不是提前加载。这些技术有助于提升性能、更好地利用设备资源并降低相关成本。

通常，为了在 HTML 中实现延迟加载，我们使用srcor属性，而不是or属性，这样浏览器在推测解析期间就不会加载图像。之后，当 JavaScript 执行时，如果用户滚动到图像元素附近，我们才会加载实际图像并更新or属性的值。srcsetdata-srcdata-srcsetsrcsrcset

两个非常流行的延迟加载库lazysizes和vanilla-lazyload 开箱即用地支持响应式图像。在本指南中，我们将分享一些 lazysizes 的示例。

在 srcset 和 size 中延迟加载响应式图像

<img
    sizes="(min-width: 1000px) 930px, 90vw"
    data-srcset="small.jpg 500w,
                 medium.jpg 640w,
                 big.jpg 1024w"
    data-src="medium.jpg"
    class="lazyload" />

在延迟加载中使用低质量占位符

<img
    src="low-quaity-placeholder.jpg"
    sizes="(min-width: 1000px) 930px, 90vw"
    data-srcset="small.jpg 500w,
                 medium.jpg 640w,
                 big.jpg 1024w"
    data-src="medium.jpg"
    class="lazyload" />

在图片元素中延迟加载图像

<picture>
      <source
          data-srcset="500.jpg"
          media="(max-width: 500px)" />
      <source
          data-srcset="1024.jpg"
          media="(max-width: 1024px)" />
      <source
          data-srcset="1200.jpg" />
      <img src="fallback-image.jpg"
          data-src="1024.jpg"
          class="lazyload"
          alt="image with artdirection" />
</picture>

第十章-如何验证响应式图像的实现？

实现响应式图片后，务必验证在不同设备上是否加载了正确的图片。让我们来讨论一下各种工具和浏览器的开发者控制台如何帮助我们。

使用 ImageKit 网站分析器

ImageKit 网站分析器是一款专门用于查找网页上与图片相关的问题的工具。它会在无头浏览器中加载网页。所有图片请求都会被监控，并与从 ImageKit 获取的优化版本进行比较。

您将收到如下所示的报告。查看“正确调整图像大小”下的“图像大小是否正确”。

该工具还为网页上的所有图像提供逐张图像的解释，如下所示：

此工具提供桌面和移动设备的图像分析报告。但是，目前它尚未考虑设备像素比，因此您必须考虑这一点，尤其是在查看移动报告时。

使用 Lighthouse

您可以使用Lighthouse来验证响应式图像是否正确实现。运行 Lighthouse 移动版和桌面版性能审核，并查看“图像尺寸合适”的审核结果。

这将显示所有未根据页面布局适当调整大小的图像。

手动验证响应式图像

您可以使用 Chrome 设备模拟器在不同设备上加载网页，并在“网络”标签页中查看图片请求。开始之前，请注意以下几点：

• 应该禁用浏览器缓存 - 以便后续重新加载时，我们可以看到正在请求哪些图像资源。
• 确保添加了设备像素比，如下面的屏幕截图所示。

现在打开网页，将鼠标悬停在图像元素上，查看其所需的 CSS 像素宽度。将其与 DPR 值相乘，即可获得图像资源所需的宽度。

例如这里，

• DPR 值 - 2.6
• CSS 像素宽度 - 206
• 所需图像尺寸 - 206 × 2.6 = 535.6

可用选项基于srcset

srcset="https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-225 225w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-300 300w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-350 350w,
        https://ik.imagekit.io/ikmedia/women-dress-1.jpg?tr=w-640 640w"

因此，最接近的候选图像是一张 640px 宽的图像，浏览器会下载这张图片。您可以使用相同的技术来检查是否加载了正确尺寸的图像。

常见问题解答

为什么我们不能使用 CSS 或 JavaScript 来做到这一点？

合乎逻辑的想法是，我们掌握了所有关于浏览器、设备和布局的信息，并且可以使用 JavaScript 加载正确大小的图像。然而，这会延迟图像资源的加载，并违背快速渲染图像的初衷。现代浏览器不会等待 JavaScript 和 CSS 解析并执行后才触发图像请求。浏览器会扫描整个 HTML 并查找图像资源，而无需等待 JavaScript 执行。这就是为什么我们需要使用srcset、sizes和picture元素来实现响应式图像。了解浏览器如何加载网页以理解这一点。

我可以在 srcset 中同时使用密度和宽度描述符吗？

不可以。根据解析规范srcset，如果某个元素的图像候选字符串指定了宽度描述符，则该元素的所有其他图像候选字符串也必须指定宽度描述符。此外，如果某个元素具有 size 属性，则该元素的所有图像候选字符串都必须指定宽度描述符。

为什么我们需要 srcset 的 sizes 属性？

这样浏览器就可以在预加载过程中触发图片加载，而无需等待 CSS 下载和解析。了解浏览器如何加载网页可以理解这一点。

为什么我们在 srcset 中使用宽度而不是高度？

我们一直仅指定图像宽度srcset而不是高度，因为绝大多数响应式设计都受宽度限制而不是高度限制，因此为了简单起见，规范仅处理宽度。

我应该声明哪些尺寸值？

该属性的值sizes应指定渲染图像的尺寸（以 CSS 像素为单位）。它可以是绝对值，例如250px，也可以是相对于视口大小的相对值，例如，33vw表示视口宽度的 33%。您可以在属性中使用逗号分隔的媒体条件sizes来指示渲染图像宽度如何根据视口大小变化。例如：

sizes="(max-width: 300px) 100vw, (max-width: 600px) 50vw, (max-width: 900px) 33vw, 900px"

我应该在 srcset 中提供什么图像尺寸？

首先，思考你的布局，也就是 CSS。然后相应地编写sizes。最后，srcset根据不同的 DPR 值和所需的有效图像尺寸来选择断点 🙌。

我应该如何生成不同尺寸的图像资产？

您需要提供不同尺寸的图片变体来实现响应式图片。在典型的电商或新闻网站上，这可能是一个巨大的问题，因为我们要处理成千上万张照片。解决方案是使用图片 CDN。ImageKit.io是一个图片 CDN，提供实时图片大小调整、自动图片格式转换和优化服务。它提供永久免费方案，并拥有充足的带宽限制。

如何让 HTML 中的图像具有响应性？

如果你想知道：

• 如何根据屏幕尺寸加载不同的图像？
• 如何更改移动设备的图像尺寸？
• 如何在移动设备和桌面设备上显示不同的图像？

然后，了解所有这些用例都是相关的，并且可以使用我们在本指南中讨论过的最新响应式图像技术来解决。

通常你只需要srcset属性。少数情况下，你可能需要使用picture标签。

Srcset 不工作

使用响应式图片时，你可能会遇到一个问题srcset：浏览器总是使用可用的最大图片。可能存在以下两种情况：

• 如果您调整窗口大小来测试响应式图像的实现，并且浏览器已经加载了一张高分辨率的较大图像，那么它就不会再次加载较小的图像，因为它可以使用缓存中最大的图像。这节省了时间和带宽。这就是关键所在。它只适用于 Chrome。
• 您需要考虑 DPR 值。在视网膜显示屏上，浏览器会根据 中的选项选择更宽的图像srcset。如果需要 300px 宽的图像，并且 DPR 为 2，则浏览器至少需要 600px 宽的图像。这可能会造成混淆，因为您原本期望它从 中选择 300px 宽的选项srcset。

客户端提示不起作用

在 Chrome 35 中引入客户端提示功能后，由于客户端提示会传递与设备相关的信息，因此有人担心跨网站跟踪用户的行为。因此，Chrome 团队在 Chrome 67 桌面版中移除了跨域客户端提示功能，但它们在移动版中仍然有效。功能策略制定完成后，这些限制将很快被移除。

如何使背景图像具有响应性？

在使用背景图片时，仅仅设置宽度和高度是不够的。您可以利用最新的技术，例如众所周知的媒体查询，在 CSS 中实现响应式图片。image-set

响应式图像 srcset 与图片？

通常情况下，在实现响应式图片时，你只需要使用带有尺寸的 srcset即可。这是因为响应式图片的主要用途是在不同设备（例如移动设备或桌面设备）上加载正确尺寸的图片。但是，如果你需要实现艺术指导，即根据可用的屏幕宽度或设备方向加载完全不同的图片，那么 picture 标签就派上用场了。

图片标签不起作用

如果 picture 元素无法正常工作，请确保该img元素位于 picture 元素内部。当浏览器不支持 picture 元素时，这可以作为后备方案。您也可以为 picture元素使用 polyfill。

如何让 WordPress 中的图像具有响应性？

响应式图片已于 WordPress 4.4 中推出，让主题开发者能够更轻松地在主题中实现响应式图片。图片上传至媒体库后，WordPress 会创建多个不同尺寸的变体并存储它们。当您将图片嵌入到文章中时，img元素会具有srcset和sizes。

默认尺寸属性

默认情况下，该属性的值size相当于 -

(max-width: {{image-width}}px) 100vw, {{image-width}}px

但是，作为主题开发人员，您最了解理想的图像大小，并且您应该覆盖此默认值，如下所述。

为您的主题配置响应式图像

主题开发人员应该使用wp_calculate_image_sizes辅助函数来创建sizes图像的属性。

例如，下面的钩子将应用于所有内容和精选/缩略图。感谢Tim Evko提供的代码片段。

function adjust_image_sizes_attr( $sizes, $size ) {
    $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

您还可以连接到wp_calculate_image_srcset计算要包含在属性中的图像源srcset。

WordPress 4.4 之前版本中的响应式图像

在 4.4 版本之前，您必须使用RICG 响应式图片插件。此插件的工作原理是为每张上传的图片添加所有可用的图片尺寸。每当 WordPress 通过媒体上传器输出图片，或生成特色图片时，这些尺寸都会通过属性添加到图片标签中srcset。不过，此插件本身并没有添加sizes属性。

问题

我们希望本指南能帮助您理解 HTML 和 CSS 中的响应式图像。如有任何疑问，欢迎评论或发送电子邮件至support@imagekit.io。