[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           |  Resolution:
 Keywords:                   |     Focuses:  performance
-----------------------------+------------------------------

Comment (by westonruter):

 Thanks for filing this. I was actually asking if anyone has raised this
 yet and I was going to file it, but then you beat me to it.

 The use of `decoding=async` is deemed a best practice to according to
 [https://www.industrialempathy.com/posts/image-optimizations
 /#asynchronous-decoding Malte Ubl]:

 > Adding `decoding="async"` to the `img` gives the browser permission to
 decode the image off the main thread avoiding user impact of the CPU-time
 used to decode the image. This should have no discernible downside except
 that it cannot always be the default for legacy reasons.

 I'm not clear on the specifics of the legacy reasons. I think it may have
 to do with if you try to load an image with JavaScript and then try to
 access its pixels. With async decoding, you then have to use the
 [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
 decode] method to get a promise for when it is decoded.

 It's also a best practice according to
 [https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-
 vitals/#image-decoding Addy Osmani].

 In AMP all images also get `decoding=async` for the performance benefit.

 In Next.js, the [https://nextjs.org/docs/api-reference/next/image Image]
 component uses `decoding=async`.

 I don't see any downsides to adding `decoding=async` to all images, even
 those that we don't currently add `loading=lazy`. Basically, anywhere that
 a `srcset` can be supplied we can also inject `decoding=async`.

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