Opis
To narzędzie analizuje kod HTML i wyciąga elementy obrazów do przejrzystego wyniku, który można od razu przejrzeć lub skopiować. Każdy wpis może zawierać adres obrazu, tekst alternatywny, szerokość, wysokość oraz inne atrybuty obecne w znaczniku, co ułatwia dokładną kontrolę markup’u. Przydaje się zwłaszcza wtedy, gdy dane o obrazach są ukryte w eksporcie z CMS, szablonach newsletterów albo długich fragmentach HTML z wieloma elementami. Ponieważ parsowanie odbywa się lokalnie w przeglądarce, możesz pracować także z poufnym kodem bez wysyłania go dalej.
Zastosowania
- Sprawdzenie brakujących tekstów altPrzejrzyj eksport strony pod kątem znaczników img bez sensownego atrybutu alt przed publikacją treści.
- Zebranie adresów obrazów z szablonuWyciągnij wszystkie źródła obrazów z newslettera lub fragmentu CMS do jednej prostej listy.
- Kontrola deklarowanych wymiarówSprawdź width i height, aby wykryć obrazy rozciągnięte, zamienione lub źle dobrane rozmiarowo.
- Analiza lazy loadOdszukaj odwołania do obrazów zapisane w data-src lub podobnych atrybutach szablonu.
- Wyodrębnianie obrazów z mieszanego HTMLOddziel dane o obrazach od dłuższych fragmentów zawierających też linki, tekst i układ strony.
Jak to dziala
- 1
Wklej HTML do pola wejściowego.
- 2
Parser skanuje kod w poszukiwaniu elementów img.
- 3
Wyodrębnia src, alt, width, height i powiązane atrybuty, jeśli występują.
- 4
Sprawdź listę i skopiuj dane obrazów, jeśli chcesz.
Przyklady
Jeden znacznik obrazu
Wejscie: <img src="/assets/hero.jpg" alt="Panorama miasta o zmierzchu" width="1440" height="900">
Wynik: 1) src: /assets/hero.jpg | alt: Panorama miasta o zmierzchu | width: 1440 | height: 900
Standardowy element img zostaje rozbity na osobne pola.
Obraz bez szerokości
Wejscie: <figure><img src="product.png" alt="Widok produktu z przodu"></figure>
Wynik: 1) src: product.png | alt: Widok produktu z przodu
Zwracane są tylko atrybuty, które faktycznie znajdują się w znaczniku.
Obraz z atrybutem danych
Wejscie: <img data-src="/img/gallery-03.jpg" alt="Element galerii 3" loading="lazy">
Wynik: 1) data-src: /img/gallery-03.jpg | alt: Element galerii 3 | loading: lazy
Przydatne w szablonach, które przechowują ścieżkę obrazu w atrybucie danych.
FAQ
Czy ekstraktor czyta tylko znaczniki img?
Tak. Skupia się na elementach img w HTML i nie analizuje obrazów tła z CSS ani grafik ładowanych przez skrypty.
Co się dzieje, gdy znacznik obrazu jest niepełny?
Narzędzie zwraca te atrybuty, które uda się znaleźć, więc tag z samym src i alt da krótszy wynik niż pełny znacznik.
Czy mogę użyć go na fragmencie z wieloma powtórzonymi obrazami?
Tak. Każdy pasujący element img jest wyodrębniany osobno, nawet jeśli kilka znaczników używa tego samego źródła.
Dlaczego czasem widzę data-src zamiast src?
Niektóre szablony przechowują prawdziwą ścieżkę obrazu w data-src, data-original lub podobnym atrybucie. Ekstraktor może pokazać takie wartości, jeśli występują w kodzie.
Czy narzędzie poprawia lub przepisuje HTML?
Nie. Tylko odczytuje kod i raportuje atrybuty związane z obrazami. Nie zmienia znaczników ani nie zgaduje brakujących wartości.