响应式图像初学者指南：如何正确使用它们

这个响应式图像教程将介绍 CSS 技术、HTML 功能和一些您需要考虑的工具。 所有这些都应该让您很好地了解如何开始在您的项目中使用响应式图像。

目录：

• 带有纯 CSS 的响应式图像
• sizes srcset和 size 属性的响应式图像
• 将srcset与像素密度描述符一起使用
• 使用<picture>元素
• 帮助响应式图像的工具和服务

带有纯 CSS 的响应式图像

使网页上的任何图像具有响应性的最简单方法不需要媒体查询或额外的 HTML。 您可以使用几行 HTML 和 CSS 使任何图像根据窗口的大小放大和缩小。

首先，我的 HTML 将包含width和height属性：

在 HTML 中包含width和height值是最佳实践。 这可确保浏览器为图像保留必要的空间，并且在加载图像时没有后续的页面重排。

除此之外，我将使用以下 CSS：

 img { max-width : 100% ; height : auto; }
 代码语言： CSS （ css ）

这些值将覆盖我的 HTML。 max-width属性设置为100%以确保它填充所需的任何空间，最大为 1000px（来自 HTML 的值）。 height值auto确保图像的高度保持图像尺寸与其自然宽度和高度成比例。 如果我删除height: auto行，图像将保持在 HTML 中定义的高度，而不管宽度如何——这通常不是我想要的。

您可以使用以下 CodePen 试用这个简单的示例。 如果您想测试响应能力，最好在新窗口中打开演示。

请注意，在我的示例中，图像的自然尺寸为 2000 像素 x 1333 像素，但我选择将其显示为最大 1000 像素。

从理论上讲，我可以对页面上的每张图片执行上述操作，这是将响应式图片合并到我的项目中的一种基本且可接受的方式。 但理想情况下，我想将其提升到一个新的水平，并控制图像的分辨率和其他因素，以提高性能并帮助 SEO，我将在以下部分讨论。

sizes srcset和 size 属性的响应式图像

在上面的简单 CSS 示例中，我正在加载一个大小约为 1.44MB 的图像——即使在我使用无损压缩来减小大小之后也是如此。 在桌面上查看时，这本身并不可怕，但它肯定不是我想要在智能手机等小型设备上加载的大小。 这就是srcset和sizes属性派上用场的地方。

srcset属性允许您在单个值中指定多个图像大小。 这些将是浏览器或设备在定义的情况下可以访问的图像。 srcset sizes告诉浏览器选择哪个图像。

这是一个使用上一个示例中的 leopard.png 图像的多个版本的示例：

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 代码语言： HTML、XML （ xml ）

如果您以前从未见过srcset和sizes属性，乍一看可能会让人感到困惑。 我会把它全部分解，所以它相对容易掌握。

分解srcset属性

srcset属性接受一个或多个字符串的逗号分隔列表。 每个字符串包含：

• 指向图像的 URL
• 以下可选描述符之一（以空格分隔）：
  • 宽度描述符
  • 像素密度描述符

在我的示例中，我包含了一个宽度描述符，这是您最常看到的。 我已经包含了三个不同版本的图像：大的高分辨率版本，一个是 800 像素宽，另一个是 480 像素宽。

请注意，当我在上面的示例中使用宽度描述符时，语法是宽度值紧跟“w”（不要使用“px”单位值！）。 对于表示图像的每个宽度描述符，我使用的是图像的固有宽度（以像素为单位）。 您可以通过多种不同方式中的任何一种来获取任何图像的真实大小——通过在文件系统、照片编辑器、甚至在浏览器或浏览器的开发工具中引用其属性。

分解sizes属性

srcset sizes一起使用。 您可以单独使用srcset （请参阅下一节），但使用srcset最常见的方式是与sizes一起使用。

sizes属性接受一个或多个字符串的逗号分隔列表。 每个字符串包含：

• 媒体条件（类似于 CSS 中使用的媒体查询）
• 定义图像将占用的“槽”大小的值

槽值可以是绝对长度，如em或px或视口相对单位（例如vw ）。 请注意，在我的示例中， sizes属性中的插槽值与三个宽度描述符不完全匹配。 这是代码：

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 代码语言： HTML、XML （ xml ）

插槽值与宽度描述符不完全匹配的事实很好。 就我而言，我可以将sizes值分解为：

• 一个 600px 宽的视口将从srcset值加载 480w 图像到一个 480px 宽的插槽内。
• 1000px 宽的视口将在 800px 插槽中加载 800w 图像。
• 如果不满足之前的媒体条件，默认的全尺寸图片 (2000w) 将填充 1000 像素的插槽。

最后一个字符串是一个单独的槽值，没有媒体条件。 如前所述，这可确保在不满足任何媒体条件时浏览器将显示一些内容，这是默认设置。

您可以使用下面的 CodePen 演示查看示例代码。 请注意，在这种情况下，您必须在模仿不同设备的东西上进行测试（例如 Chrome 中的 DevTools）。 您还可以使用各种真实设备打开页面进行真实测试。 为方便起见，我在每个图像上都包含了一个文本覆盖，以便您在查看页面时可以看到哪些加载。

请注意，在原始图像加载后，当您更改视口的大小时，图像不会改变大小。 srcset和sizes属性对于在首次加载时根据媒体条件加载图像很有用，但对于根据屏幕大小调整来切换图像没有帮助。 稍后我将向您展示一个不同的响应式图像功能，可以解决这个问题。

将srcset与像素密度描述符一起使用

之前，我已经提到srcset属性可以与像素密度描述符一起使用。 该描述符允许浏览器根据设备的分辨率能力决定使用哪个图像。 看起来是这样的：

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 代码语言： HTML、XML （ xml ）

请注意这里的几件事。 首先，对于常规的src属性，我使用最小的图像，确保移动优先的方法。 接下来， srcset属性包括图像的其他几个版本，分辨率由 1.5x 和 2x 描述符指示。 480 图像不包含描述符，因为隐含了 1x。 最后，请注意不存在sizes属性，在这种情况下我不需要。 MDN 解释了浏览器如何选择图像：

要了解描述符的工作原理，请记住一个设备像素代表每个 CSS 像素。 所以 1x 是 1:1 的比例，1.5x 是 1.5:1 的比例，以此类推。 您可以在下面的 CodePen 中尝试一下，但您必须使用不同的设备（或使用模仿它们的工具）才能看到差异。

使用<picture>元素

到目前为止，我讨论的用于合并响应式图像的功能是假设我总是显示相同的图像，但尺寸和分辨率不同。 尽管我在所有示例中都使用 CSS 来在用户调整浏览器大小时更改图像的宽度，但一旦加载页面，图像本身实际上从未改变。

<picture>元素是一个 HTML 功能，它允许您根据特定媒体功能的存在提供图像的替代版本。 这还允许在用户调整视口大小时切换图像，并且本质上允许您对图像进行艺术指导，显示同一场景的各种不同，但根据设备尺寸进行不同的裁剪或缩放。

例如，中间有一个小物体的广角镜头适用于台式机或平板电脑上的较大设备，但智能手机等较小的设备可以加载相同的裁剪或放大图像。

这是一些示例代码，可让我对图像进行一些艺术指导：

请注意以下有关代码的内容：

• <picture>元素接受多个嵌套的<picture>元素作为子元素
• <picture>中的每个<source>元素都使用media属性来定义触发使用该源图像的媒体条件
• <picture>元素接受常规的<img> 子元素，如果不支持<picture> ，浏览器会将其识别为后备元素
• <picture>元素上没有直接属性（ <picture>只接受 HTML 的全局属性，没有任何自己的属性）

下面的 CodePen 演示了这一点：

如果您在新窗口中打开演示，您可以调整窗口大小以查看图像变化。 请注意，随着浏览器窗口变小，图像的主题是如何放大的。 这是一种制作响应式艺术指导图像的简单方法，在使用的任何设备上看起来都合适。 当然，这需要更多的工作，但如果您希望您的图像在任何使用的设备上都有意义，这是值得的。

帮助响应式图像的工具和服务

有无数可用的工具，包括免费的和商业的，可以帮助实现响应式图像。 其中一些甚至可以帮助您避免编写我讨论过的大部分代码。 以下是一些您可能会觉得有用的内容：

重要且方便的是，许多不同的服务可以自动生成响应式图像，提供不同图像大小、动态图像生成 API 等功能。

甚至 WordPress 本身也内置了对响应式图像的支持（从 4.4 版开始）。

另一个值得研究的工具/服务是 Optimole。 它是由 Themeisle 背后的团队构建的高级图像优化和交付工具。 这不仅会减少图像的磁盘大小而不会影响视觉质量，而且还会通过图像 CDN 将图像传递给您的网站访问者。 此图像传输功能的一个方面是您的图像也将针对在不同设备上的查看进行优化。

有一个免费版本的 Optimole 可用。 它每月最多允许 5,000 次网站访问，并为您提供所有自动缩放功能、CDN 等。

您对网站上的响应式图像有何体验？ 请在下面的评论中告诉我们。

Chris Fitzgerald 和 Karol K. 的布局和演示。