Qu'est-ce que Generateur de balisage d'image responsive ?
Le balisage d'image responsive permet au navigateur de choisir un fichier image adapte a l'ecran et a la mise en page du visiteur. Un bon balisage inclut aussi les attributs width, height, loading, decoding et un texte alt utile. Les sites statiques beneficient de cela car les images ont souvent des noms de fichier exportes fixes et necessitent des chemins clairs dans la sortie de construction finale.
Réponse rapide
Generez un balisage img ou picture responsive avec srcset, sizes, width, height et texte alt. Aide a eviter le decalage de mise en page, les candidats d'image manquants et les attributs alt inaccessibles sur les sites statiques.
Last updated: 2026-06-11
Limites
- Les candidats srcset doivent exister aux chemins specifies dans la sortie publiee. Le balisage genere reference des chemins de fichiers ; vous devez vous assurer que chaque fichier image est copie au bon emplacement.
- L'attribut sizes affecte le candidat srcset que le navigateur selectionne. Une valeur sizes incorrecte peut amener le navigateur a telecharger une image plus grande ou plus petite que necessaire.
- La source WebP dans un element picture necessite une image img de fallback pour les navigateurs plus anciens qui ne supportent pas WebP. Sans fallback, les navigateurs non compatibles n'afficheront aucune image.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Saisissez l'URL de l'image par defaut, le texte alt, la largeur et la hauteur.
- Ajoutez les candidats srcset sous forme de paires URL-image largeur.
- Choisissez de generer une balise img simple ou un element picture avec une source WebP.
- Copiez le balisage et confirmez que chaque fichier image existe dans la sortie publiee.
A quoi il sert
- Preparer des images responsives pour des pages HTML statiques.
- Eviter les attributs width et height manquants qui provoquent un decalage de mise en page.
- Creer un balisage picture avec des chemins d'image WebP et de fallback.