自WordPress 4.4以来,支持本地响应图像,包括src设置
和尺寸
属性设置为它生成的图像标记。有关此功能的背景信息,请阅读合并建议.
当用户在WordPress中上传图像时,它会自动将新图像裁剪为较小的尺寸。例如,如果您上传的图像是1500 x 706,图像大小可能如下所示:
- 全尺寸–1500 x 706
- 大–500 x 235
- 中等–300 x 141
- 缩略图–150 x 150
因此WordPress会自动为上传到媒体库的每个图像创建多个大小的图像。根据主题创建其他尺寸。如果将全尺寸图像附加到帖子上,桌面和移动设备上的用户将看到全尺寸图像。然而,由于其显示和文件大小,在移动设备上使用全尺寸图像是没有意义的。
在响应式设计流行之前,许多网站试图根据设备类型(例如手机、平板电脑等)为浏览器动态提供不同的布局(包括图像)。在这些情况下,所有的动态内容都发生在服务器上,即页面呈现之前。此策略通常与术语关联适应性设计.
响应式设计另一方面,使用诸如媒体查询之类的工具来呈现单个页面回应在浏览器中基于视口宽度和显示密度等内容。
响应式图像遵循第二种策略,并将所有信息提前发送到浏览器,并让浏览器负责加载适当的图像,而不是在加载页面之前在服务器上做出这些决定。
通过将图像的可用大小包含到src设置
属性,它允许软件根据设备的屏幕大小自动使用和显示正确的图像。如果你在WordPress中的帖子上附加一个1500 x 706的全尺寸图像,移动设备将看到大或中尺寸的图像,而不是在这个过程中潜在地节省带宽并加快页面加载时间。
注意,为了与现有标记兼容src设置
也不是尺寸
如果内容HTML中已经存在,则添加或修改。当魔术在幕后发生时,响应式图像没有任何可配置的设置。
为了帮助浏览器从源集列表中选择最佳图像,WordPress还包括一个默认的尺寸
等效于的属性(最大宽度:{{image-width}}像素)100vw,{{imager-width}}px
。虽然此默认设置对大多数网站都是开箱即用的,但主题应自定义默认设置尺寸
属性,使用wp_计算图像大小
过滤器。
正常的浏览器请求发送到服务器,服务器返回响应。此响应包括指向其他资源的链接–字体、css、JS和图像。浏览器会注意到这些资源,并向服务器发送其他请求并获取这些资源。
这种响应式图像方法所做的是为图像标记提供附加属性,以提醒浏览器该特定图像标记可用的不同图像文件,以便浏览器可以智能地请求适用于浏览器支持的任何窗口/视口大小甚至分辨率的正确图像文件(源)。这意味着浏览器可以为图像请求合适的“大小”图像文件,而不是提供过大的图像,然后缩小大小以适应实际情况后的空间。
完整概述如何src设置
和尺寸
作品,阅读实践中的响应图像,签署人埃里克·波蒂斯在一张单子上。
为了实现此功能,WordPress中添加了以下新功能:
作为防止将超大图像添加到src设置
属性,a最大图像宽度
添加了过滤器,允许主题为源代码集列表中包含的图像设置最大图像宽度。默认值为2048像素.
新的默认中间大小中型_大型
已添加以更好地利用响应图像支持。新的尺寸默认为768px宽,没有高度限制,可以像WordPress中可用的任何其他尺寸一样使用。由于它是一个标准大小,只有在上传新图像或使用第三方插件重新生成大小时才会生成。
The 中型_大型
在选择要插入帖子的图像时,UI中不包括大小,也不包括从媒体设置页面更改图像大小的UI。但是,开发人员可以使用更新选项()
函数,类似于任何其他默认图像大小。
修改默认值src设置
和尺寸
属性,您应该使用wp_计算图像集
和wp_计算图像大小
过滤器。
覆盖src设置
或尺寸
可以使用wp_get_attachment_image_attributes(获取附件图像属性)
过滤器,类似于修改其他图像属性的方式。
此外,您可以使用wp_get_attachment_image_srcset()
直接在模板中。下面是如何使用此函数构建<图像>
具有自定义的元素尺寸
属性:
<?php(电话)$img_src=wp_get_attachment_image_url($attachment_id,'medium');$img_srcset=wp_get_attachment_image_srcset($attachment_id,'中等');?><img src=“<?php echo esc_url($img_src);?>”srcset=“<?php echo esc_attr($img_srcset);?>”sizes=“(最大宽度:50em)87vw,680px”alt=“Foo Bar”>
需要更多开发人员详细信息吗?
了解有关在此GitHub存储库上自定义响应图像标记的更多信息.