浏览： 家 / 普通的API手册 / 普通的API手册 / 响应式图像

响应式图像

话题

由于WordPress 4.4，通过包括srcset和尺寸它生成的图像标记的属性。有关此功能的背景，请阅读合并建议。

一些历史

当用户将图像上传到WordPress中时，它会自动将新图像播放到较小的尺寸。例如，如果您上传1500 x 706的图像，则图像尺寸可能看起来像：

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

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

在响应式设计流行之前，许多站点试图根据设备类型（例如电话，平板电脑等）动态地提供不同的布局（包括图像）。在这些情况下，所有动态的东西都发生在服务器上的服务器上。该策略通常与该术语有关自适应设计。

响应式设计另一方面，使用媒体查询等工具允许渲染单个页面回应在浏览器中，基于视口宽度和显示密度之类的内容。

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

顶部↑

这个怎么运作

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

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

顶部↑

浏览器侧

为了帮助浏览器从源集列表中选择最佳图像，WordPress还包括一个默认图像尺寸等效于（最大宽度：{{image-width}} px）100vw，{{image-width}} px。虽然此默认值将在大多数站点的开箱即用，但主题应自定义默认值尺寸根据需要的属性wp_calculate_image_sizes筛选。

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

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

有关如何的完整概述srcset和尺寸作品，阅读在实践中响应迅速的图像， 经过埃里克·波蒂斯（Eric Portis）在列表中。

顶部↑

新功能和钩子

为了实现此功能，将以下新功能添加到WordPress：

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

顶部↑

一个新的默认图像大小

一个新的默认中间大小，中_large已添加以更好地利用响应图像支持。默认情况下，新尺寸为768px宽，没有高度限制，并且可以像WordPress中的任何其他尺寸一样使用。由于它是标准尺寸，因此只有在上传新图像或使用第三方插件再生时才会生成。雷竞技

这中_large选择要插入帖子中的图像时，大小不包括在UI中，也不包括UI（UI）从媒体设置页面上更改图像大小。但是，开发人员可以使用update_option（）功能，类似于任何其他默认图像大小。

顶部↑

自定义响应式图像标记

修改默认值srcset和尺寸属性，您应该使用wp_calculate_image_srcset和wp_calculate_image_sizes过滤器分别。

覆盖srcset或者尺寸可以使用未嵌入帖子内容中的图像的属性（例如，缩略图，画廊等）可以使用wp_get_attachment_image_attributes过滤器，类似于其他图像属性的修改方式。

此外，您可以使用wp_get_attachment_image_srcset（）直接在您的模板中。这是您如何使用此功能构建一个的示例带有自定义的元素尺寸属性：

<？php $ img_src = wp_get_attachment_image_url（$ contactment_id，'medive'）;美元？> “ srcset =” <？alt =“ foo bar”>

需要更多的开发人员详细信息吗？
了解有关在此GitHub存储库上定制响应式图像标记的更多信息。

顶部↑

来源