Decoding async
Control image decoding with decoding="async".
What does decoding="async" do?
Decoding a large image takes time. If it blocks the main thread the page responds slowly. Add decoding="async" to an <img> tag and the browser does the decoding in the background.
The image appears once ready; the page stays smooth meanwhile. decoding="sync" decodes at once, decoding="auto" leaves the choice to the browser.
When should you use it?
decoding="async" helps most with large images and galleries. Long decoding would otherwise freeze the page; the user can keep scrolling meanwhile.
For tiny icons it does not matter; leave auto there. decoding and loading can be combined: one controls when to fetch, the other when to decode.
Exercise Update the gallery with decoding async
Body holds two <figure> blocks; each has an <img> and a <figcaption> inside. Add the decoding="async" attribute to both <img> tags.
Show example solution
<body>
<figure>
<img src="/images/cat.jpg" alt="Street cat" decoding="async">
<figcaption>Street cat</figcaption>
</figure>
<figure>
<img src="/images/dog.jpg" alt="Park dog" decoding="async">
<figcaption>Park dog</figcaption>
</figure>
</body>Test yourself
-
Which decoding value decodes in the background?
- decoding="now"
- decoding="background"
- decoding="async"
- decoding="later"
Show answer
decoding="async" — Correct. async decodes in the background.
-
Add decoding to the img
<img src="/images/mountain.jpg" alt="Mountain" ____>Show answer
<img src="/images/mountain.jpg" alt="Mountain" decoding="async"> -
Match each decoding value to its meaning
- decoding="async"
- Decodes in background
- decoding="sync"
- Decodes at once
- decoding="auto"
- Lets browser choose