What does the HTML image decoding async attribute do and how can it help us to improve performance

DanielMay 10, 2021December 19, 2023

By default, browsers are loading text and images at the same time. Synchronous. This looks nice as it provides the user with the full experience when that loading is done.

But what if you we have a case with something like:

<p>some intro text</p>
<img src="big_expensive_img_to_load" />
<p>text with very imporant info for the user</p>

This means that the user will need to wait until the big image will load in order to see the important paragraph that comes after it.

To prevent this, we can use:

<img src="big_expensive_img_to_load" decoding="async" />

The decoding="async" attribute will tell the browser that it is OK for image decoding to be done at a later moment so that the browser can continue displaying content even if the images are not fully loaded.

There are 3 accepted values for the decoding attribute:

• sync: the rendering will continue only after the image is ready; preferred for a "complete experience"
• async: continue the rendering and as soon as image decoding is complete, the browser will update the presentation; preferred
  for performance
• auto: will let the browser do what it determines is best approach (not sure who it decides that)

The decoding attribute can be used in any major browser, of course, except for IE.

PS: we can also use lazy loading to improve image perfomance.