Generator obrazków zastępczych: PNG, JPG, WebP lub SVG | We.Inc
Stwórz obrazek zastępczy w dowolnym rozmiarze z własnymi kolorami i etykietą. Pobierz PNG, JPG lub WebP albo skopiuj SVG data URL, który nie wymaga hostingu obrazów.
Generator obrazków zastępczych
Ustaw szerokość, wysokość, tło, kolor tekstu i etykietę, a ten generator narysuje obrazek zastępczy w Twojej przeglądarce. Pobierz go jako PNG, JPG lub WebP albo skopiuj malutki SVG data URL do wklejenia prosto w tag img lub CSS, dzięki czemu Twoja makieta nigdy nie zależy od zewnętrznej usługi z obrazkami.
Wybierz format w zależności od miejsca, w którym trafi obrazek
Format
Najlepszy do
Uwagi
SVG data URL
Prototypy i przykłady kodu
Bez pliku, bez żądania, ostry przy każdym powiększeniu
PNG
Pliki projektowe, przesyłanie do CMS
Bezstratny, obsługuje go każda przeglądarka
JPG
Miejsca, które odrzucają PNG
Stratny, bez przezroczystości
WebP
Testowanie rzeczywistej wagi strony
Tutaj stratny, małe pliki
Hostowane usługi z obrazkami zastępczymi są wygodne, dopóki jedna z nich nie przestanie działać albo nie zostanie zablokowana przez filtr sieciowy, a wtedy psuje się każde szare pole w Twoim demo. To narzędzie tworzy obrazek lokalnie: dostajesz prawdziwy plik albo samodzielny ciąg SVG, który żyje w Twoim kodzie.
Wybierz popularny rozmiar z listy albo wpisz własną szerokość i wysokość, do 4000 pikseli z każdej strony.
Wybierz kolory tła i tekstu. Zostaw etykietę pustą, aby wyświetlić wymiary, albo wpisz coś w rodzaju Zdjęcie hero.
Podgląd jest rysowany jako SVG w Twojej przeglądarce. Skopiuj data URL lub gotowy tag img do kodu.
Aby dostać prawdziwy plik, wybierz PNG, JPG lub WebP i pobierz. Koduje go canvas w Twojej przeglądarce, więc nic nie jest wysyłane.
Zawsze zostawiaj atrybuty width i height na img, nawet przy obrazkach zastępczych, aby układ nie skakał, gdy pojawi się prawdziwe zdjęcie.
Opisz obrazki zastępcze tym, co ma się w nich znaleźć, na przykład Zdjęcie zespołu lub Przód produktu, aby osoba odpowiedzialna za treść wiedziała, co dostarczyć.
Użyj średnioszarego tła z ciemniejszym tekstem: czysto białe pola znikają na tle białych sekcji strony.
Wymień każdy obrazek zastępczy przed startem. Wyszukaj w kodzie data:image/svg+xml, aby znaleźć pozostałości.
Najczęściej zadawane pytania
Czy te obrazki kiedyś wygasają?
Nie. Pobrany plik jest Twój, a SVG data URL to po prostu tekst w Twojej stronie, więc nie stoi za nim żaden serwer, który mógłby zniknąć.
Dlaczego pobrany JPG nie ma przezroczystości?
JPEG nie ma kanału alfa. Każdy obrazek zastępczy ma tu i tak jednolite tło, ale wybierz PNG lub WebP, jeśli później edytujesz plik i potrzebujesz przezroczystego obszaru.
Czy mogę użyć SVG data URL w CSS?
Tak. Owiń go w url("...") wewnątrz background-image. Narzędzie już zamienia cudzysłowy podwójne na pojedyncze i koduje #, < oraz >, aby ciąg przetrwał w CSS i atrybutach HTML.
Które przeglądarki potrafią eksportować WebP?
Eksport z canvas do image/png jest wymagany od każdej przeglądarki, a JPEG i WebP są opcjonalne. Jeśli przeglądarka nie potrafi utworzyć WebP, po cichu zwraca PNG, a nazwa pliku tutaj to pokaże.
Obrazki zastępcze, które pomagają, zamiast ukrywać problemy
Dobry obrazek zastępczy ma takie same proporcje jak docelowy obraz. Jeśli hero będzie zdjęciem 16:9, prototypuj z 1920 na 1080, a nie z kwadratem, bo inaczej zatwierdzony układ później źle przytnie zdjęcie.
Wpisz docelowy rozmiar na polu. Projektanci, autorzy tekstów i fotografowie widzą wtedy, co dostarczyć, bez otwierania kodu.
Data URL a pliki
Data URL umieszcza bajty obrazu bezpośrednio w src. Dla małego SVG to taniej niż żądanie sieciowe, a fragment kodu staje się przenośny: wklej go gdziekolwiek, a się wyrenderuje.
Do wszystkiego, co prześlesz do CMS, zapiszesz w pliku projektowym albo zachowasz na dłużej, pobierz zamiast tego prawdziwy plik. Długie data URL trudno czytać podczas code review.
Popularne rozmiary obrazków zastępczych
Gotowe ustawienia dostępne w generatorze
Zastosowanie
Szerokość
Wysokość
Karta Open Graph
Hero, 16:9
Miniatura bloga
Kwadratowy post
Pionowa relacja
Awatar
Zdjęcie produktu, 4:5
Baner leaderboard
Obrazek zastępczy w tagu img i w CSS
Wbudowany obrazek zastępczy SVG, bez żądania
To samo szare pole 640 na 360 użyte dwa razy: raz jako źródło obrazu, raz jako tło CSS.
Karta Open Graph
Hero, 16:9
Miniatura bloga
Kwadratowy post
Pionowa relacja
Awatar
Zdjęcie produktu, 4:5
Baner leaderboard
Twoja przeglądarka nie mogła otworzyć canvasu.
Nie udało się zakodować obrazu.
Zapisano {name} ({n} KB).
Utwórz obrazek zastępczy
Wybierz rozmiar, kolory i opcjonalną etykietę. Skopiuj SVG data URL lub tag img albo pobierz PNG, JPG lub WebP utworzony w Twojej przeglądarce.