Auto Sizes for Lazy Loaded Images in WordPress 6.7

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.

Background

Responsive image attributes, srcset and sizes were added in WordPress 4.4. Quoting the dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. from that time:

To help browsers select the best image from the source set list, we also include a default sizes attribute that is equivalent to (max-width: {{image-width}}px) 100vw, {{image-width}}px. While this default will work out of the box for a majority of sites, themes should customize the default sizes attribute as needed using the wp_calculate_image_sizes filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output..

Setting a default sizes value is important when choosing the right file to fetch from srcset, because it tells the browser what the intended layout of an image will be before the layout is known. Without any value, browsers will use the default 100vw value and assume the image is meant to fill the entire width of the viewport, resulting in many wasted bytes. The default value that has shipped with WordPress for many years ensures that the image layout is constrained by its width attribute. This helps, but in many cases is still not correct, since an image is likely layout constrained by the content width, or any blocks that they are nested within. 

Even though it is encouraged for themes to supply a more accurate sizes attribute value using the wp_calculate_image_sizes filter, doing so is challenging. Now that browsers are able to automatically apply the rendered layout to sizes for lazy-loaded images, the sizes value will be 100% correct, resulting in many fewer wasted bytes.

Implementation details

The HTML specification allows for lazy loaded images to omit sizes, explicitly set sizes=”auto”, or set sizes to a string that starts with "auto," followed by a valid source size list. In order to implement this as a progressive enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. for browsers already supporting this feature, WordPress will prepend auto to the sizes attribute of content images during wp_filter_content_tags() and any image markup generated by wp_get_attachment_image(). This will cause browsers that don’t support the new auto value to fall back to the previous sizes list.

WordPress will only add auto to the sizes value if the image includes loading=”lazy”. Otherwise, browsers that support sizes=auto will fail to validate the sizes value and apply the default value of 100vw, which will cause larger than needed images to be selected from the srcset attribute. Any custom implementations that change the loading value of images after WordPress generates the markup should use the new wp_img_tag_add_auto_sizes() function to correct the sizes attribute.

Functions added

• wp_img_tag_add_auto_sizes – adds auto sizes to an HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. img string.
• wp_sizes_attribute_includes_valid_auto – tests whether auto already exists on an image to ensure it’s not added more than once.

Props to @flixos90 and  @fabiankaegy for feedback and editing.

#6-7, #core, #dev-notes, #dev-notes-6-7