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_and_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="very_and_expensive_img_to_load" decoding="async" />
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
- 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
- auto: will let the browser do what it determines is best approach (not sure who it decides that)
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.