Ueberblick
Dieses Tool liest HTML und zieht Bildelemente in ein klares Ergebnis, das du direkt prüfen oder kopieren kannst. Jeder Eintrag kann die Bildquelle, den Alternativtext, die Breite, die Höhe und weitere im Tag vorhandene Attribute enthalten, was eine genaue Prüfung des Markups erleichtert. Besonders nützlich ist es, wenn Bilddaten in CMS-Exporten, E-Mail-Vorlagen oder langen Snippets mit gemischtem Inhalt versteckt sind. Da die Analyse lokal im Browser erfolgt, kannst du auch mit vertraulichem Markup arbeiten, ohne es irgendwohin zu senden.
Anwendungsfaelle
- Fehlende Alt-Texte prüfenKontrolliere einen Seitenexport auf img-Tags ohne sinnvollen alt-Wert, bevor Inhalte live gehen.
- Bild-URLs aus Vorlagen sammelnZiehe alle Bildquellen aus einem Newsletter oder CMS-Ausschnitt in eine einfache Liste.
- Deklarierte Maße kontrollierenUntersuche width und height, um gestreckte, vertauschte oder falsch dimensionierte Bilder zu erkennen.
- Lazy-Loading-Markup inspizierenFinde Bildpfade, die in data-src oder ähnlichen Vorlagen-Attributen gespeichert sind.
- Bilder aus gemischtem HTML extrahierenTrenne Bilddaten aus längeren Snippets mit Links, Text und Layout-Markup.
So funktioniert es
- 1
Füge dein HTML in das Eingabefeld ein.
- 2
Der Parser durchsucht das Markup nach img-Elementen.
- 3
Er extrahiert src, alt, width, height und verwandte Attribute, wenn vorhanden.
- 4
Prüfe die Liste und kopiere die extrahierten Bilddaten bei Bedarf.
Beispiele
Ein einzelnes img-Tag
Eingabe: <img src="/assets/hero.jpg" alt="Stadtsilhouette bei Dämmerung" width="1440" height="900">
Ausgabe: 1) src: /assets/hero.jpg | alt: Stadtsilhouette bei Dämmerung | width: 1440 | height: 900
Ein normales img-Element wird in separate Felder aufgeteilt.
Bild ohne explizite Breite
Eingabe: <figure><img src="product.png" alt="Produktansicht von vorne"></figure>
Ausgabe: 1) src: product.png | alt: Produktansicht von vorne
Es werden nur die Attribute zurückgegeben, die im Tag tatsächlich vorhanden sind.
Vorlagenbild mit data-Attribut
Eingabe: <img data-src="/img/gallery-03.jpg" alt="Galerieelement 3" loading="lazy">
Ausgabe: 1) data-src: /img/gallery-03.jpg | alt: Galerieelement 3 | loading: lazy
Hilfreich bei Vorlagen, die den echten Pfad in einem data-Attribut speichern.
FAQ
Liest der Extraktor nur img-Tags?
Ja. Er konzentriert sich auf img-Elemente im HTML und untersucht weder CSS-Hintergrundbilder noch per Skript geladene Bilder.
Was passiert, wenn ein Bild-Tag unvollständig ist?
Das Tool gibt die Attribute zurück, die es finden kann, daher ist ein Tag mit nur src und alt kürzer als ein vollständiges Element.
Kann ich es auf einen Ausschnitt mit vielen gleichen Bildern anwenden?
Ja. Jedes passende img-Element wird separat extrahiert, auch wenn mehrere Tags dieselbe Quelle verwenden.
Warum sehe ich manchmal data-src statt src?
Manche Vorlagen speichern den echten Pfad in data-src, data-original oder einem ähnlichen Attribut. Der Extraktor kann solche Werte anzeigen, wenn sie im Markup vorkommen.
Ändert das Tool das HTML?
Nein. Es liest nur das Markup und meldet bildbezogene Attribute. Es schreibt keine Tags um und errät keine fehlenden Werte.