Delayed Load Image Auto Resize in WordPress 6.7

WordPress 6.7 Addedsizes="auto"Delayed loading of images. This featureRecently added to the HTML specificationIt allows the browser to use the rendering layout width of the image when selecting the source from the listsrcset, because delayed loaded images are not loaded until after the layout is known.

contexts

responsive image properties.srcsetYes, it is.WordPress 4.4sizesAdded in. Quoting the developer notes from that time:

To help the browser select the best image from the list of source sets, we also provide asizesis equivalent to the default property of(max-width: {{image-width}}px) 100vw, {{image-width}}px. While this default setting works out-of-the-box for most sites, the theme should besizesUse as neededwp_calculate_image_sizes (machine) filterCustomize the default properties.

sizesIt is important to set default values when selecting the correct file to take from itsrcset, because it will tell the browser the expected layout of the image before the browser knows the layout of the image. If there is no value, the browser will use the default100vwvalues and assume that the image will fill the entire width of the viewport, resulting in a lot of wasted bytes.The default values that WordPress has been providing for years ensure that the layout of an image is governed by itswidthattribute constraints. This helps, but is still incorrect in many cases because the layout of the image may be constrained by the width of the content or any blocks it is nested within. 

While encouraging the themesizesutilizationwp_calculate_image_sizesFilters provide more accurate property values, but it's challenging to do so. Browsers are now able to automatically apply the rendered layout to thesizesDelayed loading of images thatsizesThe value will 100% correct, thus reducing the number of wasted bytes.

Realization details

HTML specificationAllow delayed loading of image omissionsizes, explicitly setsizes="auto"or setsizesis a string that begins with"auto,"followed by a list of valid source sizes. In order to use this as theBrowsers that already support this featureFor the progressive enhancement implementation, WordPress will add and any image tags generated during the period to the properties of the content image. This will cause browsers that do not support the new values to fall back to the previous list.autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

If the image contains , WordPress will only add theautoto the value. Otherwise, supported browsers will fail to validate the value and apply the default value, which will result in images larger than the desired size being selected from the property. Any custom implementations that change the value of the image loaded after WordPress generates the markup should use the new feature to correct the attribute.sizesloading="lazy"sizes=autosizes100vwsrcsetwp_img_tag_add_auto_sizes()sizes

new feature

• wp_img_tag_add_auto_sizes- For HTML imgString add auto-size.
• wp_sizes_attribute_includes_valid_auto- Test to see if the auto feature already exists on the image to make sure you don't add it multiple times.