# Surcharger la génération des balises img avec Docusaurus
> Apprenez à personnaliser le rendu des balises ![]()
dans Docusaurus pour mieux contrôler la sortie des images.
---
**TL;DR**
Cet article propose une solution simple pour activer le lazy loading des images dans Docusaurus et améliorer les performances. Il explique comment intercepter le rendu par défaut des balises `![]()
` en personnalisant le fichier `src/theme/MDXComponents.js`. Avec un simple mapping, vous pouvez forcer le chargement différé de toutes les images et même appliquer des styles personnalisés, sans avoir à créer un composant ou un plugin complexe.
En cherchant de bons trucs et astuces sur Docusaurus quand le nombre d'articles devient important, j'ai lu qu'il fallait faire attention au lazy loading des images et, en effet, par défaut toutes les images sont chargées dès le premier accès à un article de blog.
Dans cet article, nous allons voir à quel point il est facile d'intercepter la création de la balise `![]()
` lorsque le contenu Markdown est converti en HTML.
Cette conversion se produit à deux endroits : quand vous naviguez sur votre site ou quand vous générez une version statique de celui-ci.
Pour faire ça, en fait, pas besoin de créer un composant ! Il suffit d'ajouter quelques lignes de code dans le fichier `src/theme/MDXComponents.js`. *Si vous avez besoin de plus que deux ou trois attributs supplémentaires — un `div` wrapper, du CSS personnalisé, un effet de zoom — alors un vrai composant s'impose ; c'est le sujet de [Change how Docusaurus will create img tags](/blog/docusaurus-override-img).*
Si vous n'avez pas encore ce fichier, créez-le.
> **Note:**
>
> La notation `// [...]` est un marqueur pour vous montrer que vous aurez peut-être déjà quelques lignes de code à cet endroit. Ne la supprimez pas ; ajoutez simplement les lignes surlignées comme ci-dessous.
**src/theme/MDXComponents.js**
```javascript
import React from "react";
import MDXComponents from "@theme-original/MDXComponents";
// [...]
export default {
// Reusing the default mapping
...MDXComponents,
// highlight-start
img: (props) => {
const { loading, decoding, className, style, height, width, ...rest } = props;
return (
![]()
);
},
// highlight-end
// [...]
};
```
Une fois l'ajout fait dans votre fichier `MDXComponents.js`, retournez dans le navigateur ; ouvrez n'importe quel article et rafraîchissez la page. Vous verrez que les images ont maintenant l'attribut `loading="lazy"` (vous pouvez le vérifier avec le panneau des outils de développement de votre navigateur). Si, comme dans l'exemple donné ci-dessus, vous avez ajouté du style CSS, vous le verrez immédiatement.
Facile, non ?
Maintenant, comment s'assurer que ça reste vrai sur deux cents articles ? En le vérifiant automatiquement : voyez [Running some checks on your Docusaurus images](/blog/docusaurus-check-images).