Zamiennik obrazów pozwala kliknąć dowolny obraz na stronie i zastąpić go własnym — przesyłając plik lokalny lub wklejając URL obrazu. Zamiennik idealnie pasuje do wymiarów oryginalnego elementu, zachowując układ strony. Testuj, jak nowe zasoby wyglądają w kontekstach produkcyjnych, twórz makiety z prawdziwą zawartością lub rób zrzuty ekranu z niestandardowymi obrazami.
Projektanci i programiści często muszą zobaczyć, jak nowy obraz wyglądałby w istniejącym układzie. Czy nowy obraz hero będzie współgrał z bieżącą nakładką tekstową? Czy nowe zdjęcie produktu wygląda dobrze w istniejącej siatce kart? Czy logo klienta ma właściwy rozmiar dla nagłówka? Zwykle odpowiedź na te pytania wymaga edycji kodu, podmiany plików obrazów, przebudowy i podglądu. Zamiennik obrazów sprawia, że jest to natychmiastowe — kliknij obraz, który chcesz zmienić, prześlij zamiennik lub wklej URL, a obraz zostanie wymieniony natychmiast, zachowując wymiary i stylizację oryginalnego elementu. Układ się nie przesuwa, sąsiednie elementy pozostają na miejscu, a widzisz dokładnie, jak nowy obraz wygląda w rzeczywistym kontekście strony. Wszystkie zmiany są nieniszczące i resetują się po odświeżeniu strony.
Najedź na obrazy na stronie, aby zobaczyć je podświetlone. Kliknij, aby wybrać obraz, który chcesz zastąpić. Narzędzie rozpoznaje elementy img, elementy CSS background-image i elementy picture/source.
Przeciągnij i upuść plik obrazu z komputera lub kliknij, aby otworzyć selektor plików. Obsługuje formaty PNG, JPG, WebP, SVG i GIF. Plik jest ładowany lokalnie — nigdy nie jest przesyłany na żaden serwer.
Masz obraz hostowany gdzie indziej? Wklej URL, a zostanie zastosowany natychmiast. Działa z każdym publicznie dostępnym URL obrazu — Unsplash, Imgur, twoim CDN, zasobnikami S3 lub dowolnym bezpośrednim linkiem do obrazu.
Zastępczy obraz wypełnia wymiary oryginalnego elementu za pomocą object-fit, więc układ strony pozostaje dokładnie taki sam. Bez przesunięć układu, bez przepływu, bez zepsutych siatek. Nowy obraz dostosowuje się do przestrzeni.
Panel boczny śledzi wszystkie obrazy, które zastąpiłeś w bieżącej sesji. Zobacz oryginał vs zamiennik jednym spojrzeniem i kliknij dowolny wpis historii, aby cofnąć tę konkretną zamianę.
Wszystkie zamiany istnieją tylko w pamięci przeglądarki. Rzeczywiste pliki obrazów strony i HTML nigdy nie są modyfikowane. Odśwież stronę, aby natychmiast przywrócić każdy oryginalny obraz. Bezpieczne w użyciu na dowolnej stronie.
Twój zespół ma trzy obrazy hero kandydujące na stronę główną. Zamiast wdrażać każdy, otwórz stronę produkcyjną i zamień obraz hero z każdym kandydatem. Zobacz, jak każdy wygląda z prawdziwą nakładką tekstową, paskiem nawigacyjnym i otaczającą zawartością.
Podczas rozmowy z klientem zastąp obrazy zastępcze na stronie stagingowej rzeczywistymi zdjęciami produktów klienta lub zasobami marki. Pokaż im dokładnie, jak będzie wyglądała ich zawartość w ostatecznym projekcie — na żywo, w przeglądarce.
Potrzebujesz zrzutów ekranu pokazujących różne treści regionalne? Zastąp obrazy produktów, zdjęcia zespołu lub grafiki funkcji wersjami specyficznymi dla regionu i rób zrzuty ekranu dla każdego rynku — wszystko bez wdrażania oddzielnych builds.
Eksplorowanie, jak inny styl ilustracji lub podejście fotograficzne wyglądałoby na istniejącej stronie. Zamieniaj obrazy jeden po drugim, aby zbudować wizualny prototyp nowego kierunku projektowego bez dotykania kodu.
Zastąp JPG wersją WebP, aby wizualnie zweryfikować, że jakość jest akceptowalna. Lub podmień na obraz o wyższej rozdzielczości, aby sprawdzić, czy układ prawidłowo obsługuje obrazy 2x. Testuj zmiany formatu obrazu wizualnie przed zatwierdzeniem konwersji plików.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Zamiennika obrazów. Narzędzie aktywuje się, a obrazy na stronie stają się klikalnymi celami, podświetlonymi po najechaniu.
Kliknij dowolny obraz na stronie. Pojawi się okno dialogowe zamiany pokazujące informacje o bieżącym obrazie (nazwa pliku, wymiary, rozmiar) oraz opcje przesłania lub wklejenia URL.
Przeciągnij i upuść plik z komputera, kliknij, aby przeglądać, lub wklej URL obrazu. Zamiennik jest stosowany natychmiast, a obraz jest podmieniany na miejscu.
Zobacz, jak nowy obraz wygląda w rzeczywistym układzie strony. Sprawdź, czy działa z nakładkami tekstowymi, prawidłowo pasuje do kontenera i pasuje do otaczającej zawartości.
Klikaj inne obrazy, aby kontynuować zamianę. Pasek boczny historii śledzi wszystkie zmiany. Po zakończeniu odśwież stronę, aby przywrócić wszystkie oryginalne obrazy.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
