WordPress 6.7 中延迟加载图像自动调整大小

WordPress 6.7 添加了sizes=”auto”延迟加载图像的功能。此功能最近添加到 HTML 规范中，它允许浏览器在从列表中选择源时使用图像的渲染布局宽度srcset，因为延迟加载的图像直到布局已知后才会加载。

背景

响应式图像属性，srcset是在WordPress 4.4sizes中添加的。引用当时的开发人员说明：

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

sizes在选择要从中获取的正确文件时，设置默认值非常重要srcset，因为它会在浏览器知道图像布局之前告诉浏览器图像的预期布局。如果没有任何值，浏览器将使用默认100vw值并假定图像将填充视口的整个宽度，从而导致大量字节浪费。WordPress 多年来一直提供的默认值可确保图像布局受其width属性约束。这有帮助，但在很多情况下仍然不正确，因为图像的布局可能受内容宽度或其嵌套的任何块的约束。 

尽管鼓励主题sizes使用wp_calculate_image_sizes过滤器提供更准确的属性值，但这样做很有挑战性。现在浏览器能够自动将渲染的布局应用于sizes延迟加载的图像，该sizes值将 100% 正确，从而减少浪费的字节数。

实现细节

HTML 规范允许延迟加载图像省略sizes、明确设置sizes=”auto”或设置sizes为以 开头的字符串，"auto,"后跟有效的源大小列表。为了将其作为已支持此功能的浏览器的渐进式增强功能实现，WordPress 将在 期间将和 生成的任何图像标记添加到内容图像的属性中。这将导致不支持新值的浏览器回退到上一个列表。autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

如果图像包含 ，WordPress 只会将 添加auto到值中。否则，支持的浏览器将无法验证该值并应用 的默认值，这将导致从属性中选择大于所需大小的图像。在 WordPress 生成标记后更改图像加载值的任何自定义实现都应使用新功能来更正属性。sizesloading=”lazy”sizes=autosizes100vwsrcsetwp_img_tag_add_auto_sizes()sizes

新增功能

• wp_img_tag_add_auto_sizes– 为HTML img字符串添加自动大小。
• wp_sizes_attribute_includes_valid_auto– 测试图像上是否已经存在自动功能，以确保不会多次添加它。