响应图像

srcset 从 WordPress 4.4 开始，原生响应图像通过包含和 sizes 属性到它生成的图像标记来支持 。有关此功能的背景，请阅读 合并提案。

一些历史

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

  • 全尺寸 – 1500 x 706
  • 大 – 500 x 235
  • 中 – 300 x 141
  • 缩略图 – 150 x 150

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

在响应式设计流行之前，许多站点试图根据设备类型（例如手机、平板电脑等）向浏览器动态提供不同的布局（包括图像）。在这些情况下，所有动态内容都发生在服务器上，在页面呈现之前。这种策略通常与适应性设计一词相关联。

另一方面，响应式设计使用媒体查询等工具来呈现单个页面，该页面将根据视口宽度和显示密度等因素在浏览器中_做出响应。_

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

怎么运行的

通过将图像的可用尺寸包含到 srcset 属性中，它允许软件根据设备的屏幕尺寸自动使用和显示正确的图像。如果您在 WordPress 中将全尺寸 1500 x 706 图像附加到帖子，移动设备将看到大或中尺寸的图像，而不是在这个过程中节省带宽并加快页面加载时间。

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

浏览器端

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

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

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

如需全面了解其工作原理 srcset 和 sizes 工作原理，请阅读 Eric Portis_在 A List Apart 上撰写的《响应式图像实践》 。_

新功能和钩子

为实现此功能，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() – 添加 srcset 和 sizes 属性到现有 img 元素。

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

新的默认图像尺寸

添加了一个新的默认中间尺寸， medium_large以更好地利用响应式图像支持。新尺寸默认为 768 像素宽，没有高度限制，可以像 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() 此外，您可以直接在模板中使用来创建自己的自定义标记模式 。下面是一个示例，说明如何使用此函数构建 <img> 具有自定义 sizes 属性的元素：

<?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 存储库中了解有关自定义响应式图像标记的更多信息。

来源

  • https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
  • https://wptavern.com/joe-mcgill-explains-how-responsive-images-work-in-wordpress-4-4