In 2020 and 2021 we helped the Google Rendering team with specification tests for several things, including extensive work on HTML lazy-loading. Our addition allows web developers to omit the sizes attribute when using lazy-loading images in HTML.
Adding "auto sizes" for lazy-loaded images
Continuing our work with HTML lazy-loading
Challenge
We submitted a spec PR to add sizes=”auto” to HTML, along with wpt tests. We identified that the HTML standard needed underlying terminology changes to match corresponding changes in CSS specifications, which we addressed in a separate PR.
Solution
Since the change can cause “load” and “error” events to be fired for images when layout changes, we performed static analysis in HTTP Archive to assess potential impact. Chromium engineer Yoav Weiss implemented a use counter to also measure potential impact, which has only reached Beta but so far the change seems safe. We have asked Gecko and WebKit for position statements in June but they have not responded yet.
Impact
This addition allows web developers to omit the sizes attribute when using lazy-loaded responsive images in HTML (or explicitly use the “auto” keyword), which simplifies authoring and reduces errors. In addition, it will be possible to use the auto keyword in cases where the image dimensions are not predictable with Media Conditions (used by the sizes attribute), such as with CSS Grid or multicolumn with automatic columns or with CSS Container Queries. For eager responsive images, this is still not possible and would need to be solved separately as discussed in whatwg/html issue #8007.
Contact Us
We'd love to hear from you. Get in touch!
P.O. Box 961436
Boston, MA 02196