Vue d'ensemble
Cet outil lit le HTML et isole les éléments d’image dans un résultat clair que vous pouvez vérifier ou copier. Chaque entrée peut inclure la source de l’image, le texte alternatif, la largeur, la hauteur et d’autres attributs présents dans la balise, ce qui facilite une vérification précise du balisage. Il est particulièrement utile lorsque les données d’image sont cachées dans des exports de CMS, des modèles d’e-mail ou de longs extraits mêlant plusieurs types de contenu. Comme l’analyse se fait localement dans le navigateur, vous pouvez travailler sur du balisage confidentiel sans l’envoyer ailleurs.
Cas d'usage
- Vérifier les alt manquantsPassez un export de page en revue pour repérer les balises img sans valeur alt utile avant la mise en ligne.
- Rassembler les URLs d’imagesExtrayez toutes les sources d’image d’un modèle d’e-mail ou d’un fragment CMS dans une liste simple.
- Contrôler les dimensions déclaréesInspectez width et height pour repérer les images étirées, inversées ou mal dimensionnées.
- Analyser le lazy loadingTrouvez les chemins d’image stockés dans data-src ou d’autres attributs de modèle similaires.
- Extraire les images d’un HTML mixteSéparez les données d’image d’extraits longs contenant aussi des liens, du texte et de la mise en page.
Comment ca marche
- 1
Collez votre HTML dans le champ de saisie.
- 2
Le parser recherche les éléments img dans le balisage.
- 3
Il extrait src, alt, width, height et les attributs associés lorsqu’ils existent.
- 4
Relisez la liste et copiez les données d’image extraites si besoin.
Exemples
Une balise img simple
Entree: <img src="/assets/hero.jpg" alt="Silhouette urbaine au crépuscule" width="1440" height="900">
Sortie: 1) src: /assets/hero.jpg | alt: Silhouette urbaine au crépuscule | width: 1440 | height: 900
Un élément img standard est transformé en champs séparés.
Image sans largeur explicite
Entree: <figure><img src="product.png" alt="Vue de face du produit"></figure>
Sortie: 1) src: product.png | alt: Vue de face du produit
Seuls les attributs réellement présents dans la balise sont renvoyés.
Image de modèle avec attribut data
Entree: <img data-src="/img/gallery-03.jpg" alt="Élément de galerie 3" loading="lazy">
Sortie: 1) data-src: /img/gallery-03.jpg | alt: Élément de galerie 3 | loading: lazy
Pratique pour les modèles qui stockent le vrai chemin dans un attribut data.
FAQ
L’outil lit-il uniquement les balises img ?
Oui. Il se concentre sur les éléments img du HTML et n’inspecte ni les images de fond CSS ni les images chargées par script.
Que se passe-t-il si une balise image est incomplète ?
L’outil renvoie les attributs qu’il trouve, donc une balise avec seulement src et alt donnera un résultat plus court qu’une balise complète.
Puis-je l’utiliser sur un fragment avec beaucoup d’images répétées ?
Oui. Chaque élément img correspondant est extrait séparément, même si plusieurs balises utilisent la même source.
Pourquoi vois-je parfois data-src au lieu de src ?
Certains modèles stockent le vrai chemin dans data-src, data-original ou un attribut similaire. L’extracteur peut afficher ces valeurs lorsqu’elles figurent dans le balisage.
L’outil modifie-t-il le HTML ?
Non. Il lit seulement le balisage et affiche les attributs liés aux images. Il ne réécrit pas les balises et ne devine pas les valeurs manquantes.