[wp-trac] [WordPress Trac] #61847: Auto Sizes for Lazy-loaded Images

[WordPress Trac]

#61847: Auto Sizes for Lazy-loaded Images
-------------------------+----------------------------
 Reporter:  mukesh27     |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Future Release
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  needs-patch
  Focuses:  performance  |
-------------------------+----------------------------
 The purpose of this ticket is to automatically add `auto` to the beginning
 of the sizes attribute for any image that is being lazy loaded.

 The feature has been implemented in the [https://wordpress.org/plugins
 /auto-sizes/ Enhanced Responsive Images] plugin as part of
 [https://github.com/WordPress/performance/tree/trunk/plugins/auto-sizes
 Performance Lab], and it’s currently installed on more than 20k sites.


 The feature is [https://html.spec.whatwg.org/#sizes-attributes
 standardized in the HTML spec] and therefore in a good place to be adopted
 by WordPress core. It is currently implemented in Chromium (Chrome and
 Edge) and it is not yet supported in Firefox (see bug
 [https://bugzilla.mozilla.org/show_bug.cgi?id=1819581 #1819581]) or Safari
 (see bug [https://bugs.webkit.org/show_bug.cgi?id=253143 #253143]).
 Because it is a progressive enhancement, there are no adverse effects for
 browsers that do not support it.


 The [https://html.spec.whatwg.org/#sizes-attributes HTML spec] was updated
 to [https://github.com/whatwg/html/pull/8008 support sizes="auto" for
 lazy-loaded images], allowing developers to omit the sizes attribute and
 have the browser use the image's layout width for resource selection.


 @joemcgill put together [https://codepen.io/joemcgill-the-
 sasster/full/ExrzLRJ a quick demo] that can be used for observing how the
 feature is working in supporting and unsupporting browsers.


 = Implementation: =
 Currently, it looks like we can apply auto sizes with a fallback (e.g.,
 auto, (max-width: 960px) 100vw, 960px) only when an image has
 loading="lazy" applied in order to ensure we're not causing a regression
 for either supporting or non-supporting browsers
 ([https://github.com/WordPress/performance/issues/791#issuecomment-1856330050
 see examples]). This is expected, but it's nice to see this confirmed by
 the test cases. An initial implementation will need to be able to account
 for whether an image has lazy loading applied prior to prepending auto to
 the sizes value.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61847>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform