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.srcset
Yes, it is.WordPress 4.4sizes
Added 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 a
sizes
is 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 besizes
Use as neededwp_calculate_image_sizes
(machine) filterCustomize the default properties.
sizes
It 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 default100vw
values 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 itswidth
attribute 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 themesizes
utilizationwp_calculate_image_sizes
Filters provide more accurate property values, but it's challenging to do so. Browsers are now able to automatically apply the rendered layout to thesizes
Delayed loading of images thatsizes
The value will 100% correct, thus reducing the number of wasted bytes.
Realization details
HTML specificationpermissibleDelayed image loadingan omissionsizes
, explicitly setsizes="auto"
or setsizes
is 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 theauto
to 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.sizes
loading="lazy"
sizes=auto
sizes
100vw
srcset
wp_img_tag_add_auto_sizes()
sizes
new feature
wp_img_tag_add_auto_sizes
- For HTMLimg
String 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.