响应式图片-WordPress通用API手册-果果开发

自 WordPress 4.4 起，通过在生成的图像标记中包含srcset和sizes属性，原生支持响应式图像。有关此功能的背景信息，请阅读合并提案。

一些历史

当用户在 WordPress 中上传图像时，它会自动将新图像裁剪为较小的尺寸。例如，如果您上传一张 1500 x 706 的图像，图像尺寸可能如下所示：

原始大小 – 1500 x 706
大尺寸 – 500 x 235
中等尺寸 – 300 x 141
缩略图 – 150 x 150

因此，WordPress 会自动为上传到媒体库的每一张图像创建多个尺寸。附加尺寸会根据主题而创建。如果原始大小的图像已附加到帖子，桌面和移动设备用户将看到原始大小的图像。然而，由于显示和文件大小原因，在移动设备上使用原始大小的图像是没有意义的。

在响应式设计流行之前，许多网站尝试根据设备类型（例如手机、平板等）动态地向浏览器提供不同的布局（包括图像）。在这些情况下，所有动态操作都在页面渲染之前在服务器端完成。这种策略通常与自适应设计一词相关联。

另一方面，响应式设计使用媒体查询等工具，允许单个页面在浏览器中呈现，并根据视口宽度和显示密度等因素进行响应。

响应式图像遵循第二种策略，将所有信息 upfront 发送给浏览器，让浏览器负责加载适当的图像，而不是在页面加载之前在服务器端做出这些决定。

工作原理

通过将图像的可用尺寸包含在srcset属性中，它允许软件根据设备的屏幕大小自动使用和显示正确的图像。如果您在 WordPress 中将原始大小为 1500 x 706 的图像附加到帖子，移动设备将看到大尺寸或中等尺寸的图像——这可能会节省带宽并在此过程中加快页面加载速度。

请注意，为了与现有标记保持兼容，如果内容 HTML 中已经存在srcset或sizes，则不会添加或修改它们。响应式图像没有任何设置需要配置，因为魔法是在幕后发生的。

浏览器端

为了帮助浏览器从源集列表中选择最佳图像，WordPress 还包含一个默认的sizes属性，其等效于(max-width: {{image-width}}px) 100vw, {{image-width}}px。虽然这个默认值对于大多数站点开箱即用即可工作，但主题应使用wp_calculate_image_sizes过滤器根据需要自定义默认的sizes属性。

正常的浏览器请求发送到服务器，服务器发送回响应。该响应包含指向其他资源的链接——字体、CSS、JS 和图像。浏览器注意到这些资源，并向服务器发送额外的请求以获取这些资源。

这种响应式图像方法的作用是为图像标签提供额外的属性，提醒浏览器该特定图像标签可用的不同图像文件，以便浏览器可以智能地请求适合其窗口/视口大小甚至分辨率支持的适当图像文件（源）。这意味着浏览器可以请求适当“尺寸”的图像文件，而不是被提供过大的图像并在事后调整大小以适应空间。

要了解srcset和sizes如何工作的完整概述，请阅读 A List Apart 的 Eric Portis 撰写的实践中的响应式图像。

新的函数和钩子

为了实现此功能，以下新函数已添加到 WordPress 中：

wp_get_attachment_image_srcset() – 检索图像附件的srcset属性的值。
wp_calculate_image_srcset() – 用于计算包含在srcset属性中的图像源的辅助函数。
wp_get_attachment_image_sizes() – 为图像创建sizes属性值。
wp_calculate_image_sizes() – 用于为图像创建sizes属性的辅助函数。
wp_image_add_srcset_and_sizes() – 向现有的img元素添加srcset和sizes属性。

为了防止将非常大的图像添加到srcset属性中，已添加一个max_srcset_image_width过滤器，允许主题为源集列表中包含的图像设置最大图像宽度。默认值为2048px。

一个新的默认图像尺寸

为了更好地利用响应式图像支持，已添加一个新的默认中间尺寸medium_large。新尺寸的默认宽度为 768px，没有高度限制，并且可以像 WordPress 中的任何其他尺寸一样使用。由于它是标准尺寸，它仅在新图像上传或使用第三方插件重新生成尺寸时才会生成。

medium_large尺寸不包含在选择要插入帖子的图像的 UI 中，我们也不会在媒体设置页面中包含更改图像尺寸的 UI。但是，开发人员可以使用update_option()函数修改此新尺寸的宽度，类似于任何其他默认图像尺寸。

自定义响应式图像标记

要修改默认的srcset和sizes属性，您应分别使用wp_calculate_image_srcset和wp_calculate_image_sizes过滤器。

对于未嵌入帖子内容的图像（例如文章缩略图、画廊等），覆盖其srcset或sizes属性可以使用wp_get_attachment_image_attributes过滤器来完成，类似于修改其他图像属性的方式。

此外，您可以在模板中直接使用wp_get_attachment_image_srcset()创建自己的自定义标记模式。以下是如何使用此函数构建带有自定义sizes属性的<img>元素的示例：

<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="Foo Bar">

需要更多开发者详细信息？
在此 GitHub 存储库上了解更多关于自定义响应式图像标记的信息.

响应式图片