Wyodrębnij obrazy skanuje dowolną stronę i prezentuje każdy obraz w przeglądalnej galerii. Zobacz miniatury, oryginalne wymiary, rozmiary plików i URL-e źródłowe dla każdego obrazu — następnie wybierz pojedyncze obrazy lub pobierz je wszystkie naraz. Wykrywa obrazy z tagów img, właściwości CSS background-image, elementów picture/source i wbudowanych URI danych.
Zapisywanie obrazów ze strony pojedynczo — kliknięcie prawym przyciskiem, „Zapisz obraz jako”, wybór folderu, powtórz — jest boleśnie wolne, gdy strona zawiera dziesiątki obrazów. Działa to zresztą tylko dla zwykłych znaczników img. Obrazów tła CSS, responsywnych elementów picture czy obrazów w postaci data URI w ten sposób w ogóle nie da się zapisać. Extract Images rozwiązuje ten problem, skanując cały DOM strony oraz obliczone style, znajdując każdy obraz niezależnie od sposobu jego implementacji.
Przy każdym obrazie widoczna jest miniatura podglądu, oryginalne wymiary (szerokość × wysokość), format pliku, przybliżony rozmiar oraz adres URL źródła. Możesz wybrać pojedyncze obrazy do pobrania albo użyć opcji „Pobierz wszystko”, aby pobrać wszystko naraz. Filtr rozmiaru pozwala pominąć drobne piksele śledzące i favikony, dzięki czemu widzisz tylko obrazy istotne dla treści.
Obrazy ładowane leniwie (lazy-loaded) są wykrywane, jeszcze zanim się załadują — narzędzie odczytuje popularne atrybuty lazy-load (data-src, data-srcset, loading="lazy") oprócz rozwiązanego atrybutu src, dzięki czemu obrazy znajdujące się dalej na długiej stronie pojawiają się w galerii bez konieczności wcześniejszego przewinięcia do nich. Nowoczesne formaty, takie jak WebP i AVIF, są prawidłowo rozpoznawane i oznaczane, zamiast wrzucania ich do jednej ogólnej kategorii „obraz”, co ma znaczenie, gdy szukasz konkretnie pliku PNG lub SVG wśród strony pełnej zoptymalizowanych zasobów WebP.
Każdy obraz na stronie jest wyświetlany w galerii siatki z podglądami miniatur. Zobacz 8, 20 lub 100+ obrazów jednym spojrzeniem — przewiń, aby znaleźć dokładnie to, czego potrzebujesz. Każda miniatura jest wystarczająco duża, aby zidentyfikować zawartość obrazu.
Każdy obraz pokazuje swoje oryginalne wymiary (np. 1920×1080), format pliku (PNG, JPG, WebP, SVG), przybliżony rozmiar pliku (np. 245 KB) oraz URL źródłowy lub właściwość CSS, z której pochodzi. Bez zgadywania jakości czy rozmiaru obrazu.
Ustaw minimalny próg wymiarów (np. 100×100), aby odfiltrować małe obrazy, takie jak piksele śledzące, GIF-y odstępów i favicony. Skup się na obrazach treści, które naprawdę mają znaczenie.
Kliknij pojedyncze obrazy, aby je wybrać (pokazane z fioletowym znacznikiem), a następnie pobierz tylko wybrane. Lub kliknij "Pobierz wszystkie", aby zapisać każdy obraz na stronie na twoim urządzeniu w jednej akcji.
Znajduje obrazy ze wszystkich źródeł: standardowe tagi img, właściwości CSS background-image, responsywne elementy picture/source, wbudowane SVG renderowane jako obrazy oraz obrazy kodowane URI danych. Nic nie jest pomijane.
Pasek stanu pokazuje, ile obrazów jest wybranych i łączny rozmiar pliku wyboru. Dokładnie wiesz, ile masz pobrać, zanim naciśniesz przycisk pobierania.
Potrzebujesz wszystkich obrazów produktów ze strony katalogu? Wyodrębnij obrazy znajduje i pobiera je wszystkie naraz — w tym warianty responsywne i obrazy hero tła CSS, których nie można zapisać prawym klikiem.
Budujesz tablicę inspiracji lub zbierasz referencje wizualne ze stron inspiracji projektowych? Przeglądaj galerię obrazów, wybierz te, które chcesz, i pobierz je w jednej partii zamiast zapisywać jeden po drugim.
Przejrzyj wszystkie obrazy na swojej stronie, aby sprawdzić zbyt duże pliki, brakujące alternatywy WebP lub nieużywane obrazy tła. Wymiary i rozmiary plików pomagają zidentyfikować obrazy wymagające optymalizacji.
Zapisujesz stronę do referencji offline? Wyodrębnij wszystkie obrazy, aby mieć kompletną zawartość wizualną razem z HTML. Przydatne do archiwizacji dokumentacji, referencji projektowych lub stron, które mogą się zmienić lub zniknąć.
Wiele nowoczesnych stron używa CSS background-image dla sekcji hero, teł kart i elementów dekoracyjnych. Te obrazy nie mogą być zapisywane przez prawy klik. Wyodrębnij obrazy wykrywa i pobiera je wraz ze zwykłymi elementami img.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Wyodrębnij obrazy. Narzędzie skanuje DOM strony i obliczone style, aby znaleźć każdy obraz.
Panel galerii wyświetla wszystkie znalezione obrazy jako siatkę miniatur. Każdy obraz pokazuje swoją nazwę pliku, wymiary i rozmiar. Przewiń, aby przeglądać wszystkie obrazy na stronie.
Użyj filtra minimalnego rozmiaru, aby ukryć małe obrazy, takie jak ikony i piksele śledzące. Ustaw na 100×100, aby pokazać tylko obrazy istotne dla treści.
Kliknij pojedyncze obrazy, aby je wybrać — pojawi się fioletowy znacznik. Pasek stanu aktualizuje się z liczbą i całkowitym rozmiarem twojego wyboru.
Kliknij "Pobierz wybrane", aby zapisać wybrane obrazy, lub "Pobierz wszystkie", aby pobrać każdy obraz na stronie. Pliki są zapisywane w folderze pobrań twojego urządzenia.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
