Overview

• Image Auto-sizes
• Proposed module slug: image-auto-sizes
• Proposed module owner GitHub username(s): @joemcgill (others welcome!)

About the module

Recently, the HTML spec was updated to support sizes="auto" for lazy-loaded images. The purpose of this module would be to automatically add auto to the beginning of the sizes attribute for any image that is being lazy loaded.

Purpose

While implementation is still ongoing, this could be a pretty big performance improvement for WordPress sites, since many rely on the default sizes attribute rather than filtering the value to a more accurate one based on the intended layout of the site's theme.

Scope

This would only implement auto sizes for lazy-loaded images as an experiment until browser adoption for this feature is far enough along to propose for core, and should be a base implementation that a future core proposal would be based on.

This does not take the place of #760, which would still be useful to pursue, but could make that effort less important by getting the same performance benefits for all lazy-loaded images.

At minimum, the implementation should filter wp_calculate_image_sizes to prepend "auto, " to the beginning of the string. Given that this is a progressive enhancement, any browser that doesn't recognize the "auto" value in the sizes string, will ignore it and process the rest of the string like normal.

It is currently unclear if this syntax is used on an image that is not being lazy loaded, if the original sizes value will be respected or if the default 100vw fallback for the parser will be used instead, so experimentation against a real implementation will be important. If the default is used, then the filter would need to also check to see if lazy loading is enabled and likely post-filter images to remove auto sizing for any images not being lazy loaded, since srcset and sizes is calculated prior to lazy loading in wp_filter_content_tags.

Rationale

See above.

Other

Additional info:

• Current implementation considerations
• Test suite for the auto sizes syntax