WordPress 6.7 为延迟加载的图片添加了 sizes=“auto”。此功能最近添加到 HTML 规范中，它允许浏览器在从 srcset 列表中选择源时使用图像的渲染布局宽度，因为延迟加载的图像在知道布局之前不会加载。
Background 背景
响应式图像属性、srcset 和 sizes 已在 WordPress 4.4 中添加。引用当时的开发说明：
为了帮助浏览器从源集列表中选择最佳图像，我们还包含一个等效
于(max-width: {{image-width}}px) 100vw, {{image-width}}px.虽然此默认值对于大多数网站都是开箱即用的，但主题应根据需要使用wp_calculate_image_sizes过滤器自定义 defaultsizes属性。
在选择要从 srcset 获取的正确文件时，设置默认 sizes 值很重要，因为它在知道布局之前告诉浏览器图像的预期布局是什么。如果没有任何值，浏览器将使用默认的 100vw 值，并假设图像旨在填充视口的整个宽度，从而导致许多字节浪费。WordPress 多年来一直附带的默认值可确保图像布局受其 width 属性的约束。这有帮助，但在许多情况下仍然不正确，因为图像的布局可能受内容宽度或它们嵌套的任何块的限制。
尽管鼓励主题使用 wp_calculate_image_sizes 过滤器提供更准确的 sizes 属性值，但这样做具有挑战性。现在，浏览器能够自动将渲染的布局应用于延迟加载图像的大小，sizes 值将 100% 正确，从而减少浪费的字节。
Implementation details 实现细节
HTML 规范允许延迟加载的图像省略大小、显式设置 sizes=“auto” 或将大小设置为以“auto”开头的字符串，后跟有效的源大小列表。为了将其作为已经支持此功能的浏览器的渐进增强功能，WordPress 将在 wp_filter_content_tags（） 期间将 auto 添加到内容图像的 sizes 属性以及 wp_get_attachment_image（） 生成的任何图像标记之前。这将导致不支持新 auto 值的浏览器回退到以前的大小列表。
如果图片包含 loading=“lazy”，WordPress 只会将 auto 添加到 sizes 值中。否则，支持 sizes=auto 的浏览器将无法验证 sizes 值并应用默认值 100vw，这将导致从 srcset 属性中选择大于需要的图像。在 WordPress 生成标记后更改图像加载值的任何自定义实现都应使用新的 wp_img_tag_add_auto_sizes（） 函数来更正 sizes 属性。
Functions added 添加的功能
wp_img_tag_add_auto_sizes– 向 HTMLimg字符串添加自动大小。wp_sizes_attribute_includes_valid_auto– 测试图像上是否已存在 auto，以确保它不会被多次添加。
禁用图片大小自动添加
在更新WordPress 6.7后发现，站内多数图片都显示不正常，主要是宽高混乱了，禁用它。
禁用wp_img_tag_add_loading_attr
在function.php中添加
// 去除图片自动添加sizes，导致图片变形 add_filter('wp_img_tag_add_loading_attr', function($value, $tag, $context) { return false; }, 10, 3); |
补充：移动端图片自适应
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 自适应图片大小原创来自 function uedbox_remove_width_height_attribute($content) { preg_match_all("/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|\"].*?[\/]?>/", $content, $images); if (!empty($images)) { foreach ($images[0] as $index => $value) { $new_img = preg_replace('/(width|height|sizes)="\d*"\s/', "", $images[0][$index]); $content = str_replace($images[0][$index], $new_img, $content); } } return $content; } // 判断是否是移动设备浏览 if (wp_is_mobile()) { // 删除文章内容中img的width/height/sizes属性 add_filter('the_content', 'uedbox_remove_width_height_attribute', 99); } |
如有侵权请联系:admin#unsafe.sh