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

Next lesson: Srcset and sizes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies