WordPress 6.7 引入了一项全新功能——为延迟加载（lazy-loaded）自动设置图片尺寸。该特性基于 HTML 规范中的新增功能，使浏览器在选择 srcset 列表中的图片源时，可以使用图片的实际渲染宽度进行判断。此改进使得延迟加载的图片在布局确定后才加载时，能够更精确地调整尺寸。
背景介绍
早在 WordPress 4.4 版本，响应式图片属性 srcset 和 sizes 已被引入。根据官方开发者笔记：
为帮助浏览器从源列表中选择最合适的图片，WordPress 提供了一个默认的
sizes属性，设置为(max-width: {{image-width}}px) 100vw, {{image-width}}px。尽管这一默认值适用于大部分网站，但主题开发者可以通过wp_calculate_image_sizes过滤器来自定义sizes属性，以适应特定需求。
设置合理的 sizes 值在选择 srcset 中的合适图片时至关重要，它可以在布局加载前告知浏览器图片的预期布局。如果未设置此值，浏览器将使用 100vw 作为默认值，假定图片应填满整个视口宽度，可能会导致加载不必要的多余数据。多年来，WordPress 的默认值已优化为限制图片布局在其 width 属性范围内，从而减少数据浪费。然而，对于一些布局受到内容宽度或嵌套块限制的情况，默认值的准确性仍有待提升。
尽管主题开发者被鼓励使用 wp_calculate_image_sizes 来提供更精准的 sizes 值，但这在实际操作中可能面临一定挑战。如今，浏览器能自动为延迟加载图片应用准确的渲染布局宽度，确保 sizes 值完全匹配布局，从而显著减少不必要的流量消耗。
实施细节
根据 HTML 规范，延迟加载图片可以省略 sizes 属性，或设置 sizes="auto"，或以 "auto," 开头的字符串，后跟有效的源大小列表。作为对支持此功能的浏览器的渐进增强，WordPress 会在 wp_filter_content_tags() 函数中，或通过 wp_get_attachment_image() 生成的图片标签中，将 auto 前缀添加到内容图片的 sizes 属性。这一做法确保不支持 auto 值的浏览器会回退到原有的 sizes 列表，从而保持兼容性。
WordPress 仅在图片包含 loading="lazy" 时才会向 sizes 属性添加 auto。否则，支持 sizes=auto 的浏览器会忽略 sizes 值并使用默认 100vw，导致选取过大的图片。任何在 WordPress 生成标记后自定义图片加载的实现，应调用新的 wp_img_tag_add_auto_sizes() 函数来确保 sizes 属性的正确性。
新增功能概览
wp_img_tag_add_auto_sizes– 用于为 HTMLimg字符串添加自动尺寸。wp_sizes_attribute_includes_valid_auto– 检查图片上是否已有auto属性，以避免重复添加。
总结
WordPress 6.7 的这一更新显著提升了图片加载效率，减少了不必要的数据传输，从而改善了用户体验。随着技术的进步，WordPress 持续优化和更新，力求适应现代网络环境的需求，为开发者和用户提供更智能的体验。
不过需要注意的是 WordPress 自动实施的延迟加载是基于浏览器的，如果浏览器不支持，则图片延迟加载无效。更多详情可参考：深入解析 WordPress 的 loading=”lazy” 与 JavaScript 延迟加载技术
。