[wp-trac] [WordPress Trac] #53232: Add async decoding attribute as default to the HTML image tags generated by WordPress

[WordPress Trac]

#53232: Add async decoding attribute as default to the HTML image tags generated by
WordPress
-----------------------------+-----------------------------
 Reporter:  isaumya          |      Owner:  (none)
     Type:  feature request  |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Media            |    Version:
 Severity:  normal           |   Keywords:
  Focuses:  performance      |
-----------------------------+-----------------------------
 Hi,
 WordPress has taken advantage of many amazing features to the image tags
 like `srcset`, `sizes` and recently `loading` attributes. Thanks to the
 `loading="lazy"` attribute all images generated by WordPress system have
 that attribute in it by default. This is insanely helpful to make page
 load faster and more responsive.

 Recently I have been playing around with another special attribute to the
 `img` tag which is basically `decoding="async"`. After implementing async
 decoding to the images in a page, the page load became, even more, faster
 and images are decoded asynchronously by the browser, loading the contents
 almost instantly and also reducing page render time. This is a huge
 performance booster to any webpages which has a lot of images (so
 basically most sites).

 This `decoding` attribute also has great browser support
 [https://developer.mozilla.org/en-
 US/docs/Web/API/HTMLImageElement/decoding according to MDN docs].

 While trying to implement the feature on a WordPress site, with the help
 of the following code snippet I was able to make it work across all the
 images on the website except for the images added via Gutenberg.

 {{{#!php
 <?php
 add_filter( 'wp_get_attachment_image_attributes', function($attr) {
   $attr['decoding'] = 'async';

   return $attr;
 } );
 }}}


 As Gutenberg doesn't support either `image_send_to_editor` filter or
 `wp_get_attachment_image_attributes` filter. Adding it to Gutenberg
 generated images are more complicated and includes overwriting many core
 blocks like images, gallery etc.

 But I was wondering if the WP Core team consider adding this
 `decoding="async"` attribute to the images like `loading="lazy"` as it
 will help a lot of people, making their webpage render faster by browsers.

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