HTMLImageElement : propriété decoding

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

La propriété decoding de l'interface HTMLImageElement fournit une indication au navigateur sur la façon dont il doit décoder l'image. Plus précisément, s'il doit attendre que l'image soit décodée avant de présenter d'autres mises à jour de contenu ou non. Elle reflète l'attribut de contenu decoding de l'élément HTML <img>.

Dans cet article

Valeur

Une chaîne de caractères dont la valeur est sync, async, ou auto. Pour leur signification, voir la référence HTML <img>.

Exemples

Dans l'exemple ci-dessous, vous obtiendrez probablement une image vide affichée sur la page pendant le téléchargement de l'image. Définir decoding ne l'empêchera pas.

js
const img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
document.body.appendChild(img);

Insérer une image après le téléchargement peut rendre la propriété decoding plus pertinente :

js
async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

const img = new Image();
await loadImage("img/logo.png", img);
// L'utilisation de `sync` permet de s'assurer que les autres contenus ne sont mis à jour qu'avec l'image
img.decoding = "sync";
document.body.appendChild(img);
const p = document.createElement("p");
p.textContent = "L'image est complètement chargée !";
document.body.appendChild(p);

Une meilleure solution consiste cependant à utiliser la méthode HTMLImageElement.decode() pour résoudre ce problème. Elle permet de décoder une image de façon asynchrone, en retardant son insertion dans le DOM jusqu'à ce qu'elle soit entièrement téléchargée et décodée, évitant ainsi le problème d'image vide mentionné ci-dessus. Ceci est particulièrement utile si vous remplacez dynamiquement une image existante par une nouvelle, et cela évite également que des rendus non liés à ce code soient bloqués pendant le décodage de l'image.

L'utilisation de img.decoding = "async" peut éviter de bloquer l'affichage d'autres contenus si le décodage prend du temps :

js
const img = new Image();
img.decoding = "async";
img.src = "img/logo.png";
document.body.appendChild(img);

La méthode HTMLImageElement.decode()
L'attribut decoding de l'élément HTML <img>
Que fait réellement l'attribut de décodage d'image ? (angl.) sur tunetheweb.com (2023)

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLImageElement
Constructeur
1. Image()
Propriétés d'instance
Méthodes d'instance
1. decode()
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLImageElement : propriété decoding

Dans cet article

Valeur

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN