WordPress is evolving day by day. Just imagine, a CMS started with the concept of only writing and publishing blogs online! And now? WordPress website can do almost everything. That's astonishing! I have to say these things in WordPress keep happening because of the open-source community. While working for Mark's (my friend from America) website, I came up with a super annoying problem. The problem was photos were rendered in different sizes! WordPress 6.7 adds sizes="auto" for lazy-loaded images. This feature, which was recently added to the HTML specification, allows the browser to use the rendered layout width of the image when selecting a source from the srcset list since lazy-loaded images don’t load until after the layout is known.
Two functions were added in WordPress 6.7 that are responsible for these unwanted image sizes!
1. wp_img_tag_add_auto_sizes - adds auto sizes to an HTML img string.
2. wp_sizes_attribute_includes_valid_auto - tests whether auto already exists on an image to ensure it’s not added more than once.
In WordPress 6.7, the system prepends auto to the sizes attribute of content images during the wp_filter_content_tags() process and for any image markup generated by wp_get_attachment_image(). This approach ensures backward compatibility: browsers that do not support the new auto value will default to the previous sizes list. It's important to note that WordPress adds auto to the sizes attribute only if the image includes loading="lazy". For custom implementations that modify the loading behavior of images after WordPress generates the markup, developers should use the new wp_img_tag_add_auto_sizes() function to adjust the sizes attribute accordingly.
However, I found out this new feature can cause images to appear skewed or stretched, particularly in certain themes or with specific image configurations. This distortion occurs because the sizes="auto" attribute may not always align with the intended display dimensions of the image. And here's a trick to disable the automatic addition of the sizes="auto" attribute by adding the following code to their child or parent theme's functions.php file:
// Disable auto-sizes to fix potential display issues in WordPress 6.7 add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
This code prevents WordPress from adding the sizes="auto" attribute, thereby resolving the display problems.
For users seeking more control over responsive image behavior, the "Enhanced Responsive Images" plugin offers experimental enhancements. This plugin improves the accuracy of the sizes attribute by utilizing available layout information from the theme and implements the new HTML specification for adding sizes="auto" to lazy-loaded images. It's designed to work seamlessly without any configuration and integrates with the Image Prioritizer plugin for optimized performance.