Generator obrazów zastępczych
Utwórz prosty obraz zastępczy w dokładnie takim rozmiarze, jakiego potrzebujesz, z wypisanym wymiarem, do makiet, układów stron i testów.
Działa w całości w przeglądarce
Zostaw puste, aby pokazać rozmiar.
Szerokość i wysokość od 1 do 8000 pikseli, łącznie do 100 megapikseli. Tekst to jeden wiersz, dopasowany rozmiarem.
Jak zrobić obraz zastępczy
- Wpisz szerokość i wysokość albo naciśnij gotowy rozmiar, na przykład 1200 × 630 dla karty społecznościowej lub 300 × 250 dla reklamy.
- Wybierz kolory tła i tekstu. Zostaw tekst pusty, aby pokazać rozmiar, albo wpisz własną etykietę.
- Wybierz PNG, JPEG, WebP lub SVG i naciśnij Pobierz albo skopiuj obraz jako data URI.
Wybór rozmiaru obrazu zastępczego
Obraz zastępczy zastępuje prawdziwe zdjęcie podczas budowania strony, więc liczy się to, by miał odpowiedni kształt. Układy psują się bardziej przez proporcje niż przez rozdzielczość: obraz hero 16:9 zachowuje się inaczej niż kwadratowy awatar, nawet jeśli oba są małe. Wypisanie rozmiaru na obrazie sprawia, że każdy, kto ogląda makietę, widzi, które miejsce potrzebuje jakich wymiarów.
Gotowe rozmiary obejmują wymiary, które wracają raz po raz: 1200 × 630 to kształt używany przez większość sieci społecznościowych w podglądach linków, 1080 × 1080 to kwadratowy post, 1920 × 1080 i 1280 × 720 to popularne klatki wideo, 300 × 250 i 728 × 90 to dwa standardowe miejsca reklamowe, a 150 × 150 to typowy awatar.
W prawdziwym użyciu pamiętaj, że obraz zastępczy to jednolity kolor. PNG i SVG zapisują to niemal za darmo, natomiast JPEG przy dużym rozmiarze dodaje rozmycie wokół tekstu. Jeśli wklejasz obraz do kodu jako data URI, niech będzie mały: każdy bajt obrazu powtarza się na Twojej stronie.
Wskazówki
- Potrzebujesz prawdziwego obrazu w tym rozmiarze? Zmień rozmiar obrazu i Przytnij obraz dopasują zdjęcie do dokładnego miejsca.
- Aby osadzić gotowy obraz jako tekst, użyj narzędzia Obraz na Base64.
- Dobierz pasujące kolory w narzędziu Konwerter kolorów i kontrastu.
Najczęstsze pytania
Czy cokolwiek opuszcza moje urządzenie?
Nie. Nic, co wpiszesz, nie jest nigdzie wysyłane. Obraz jest rysowany przez przeglądarkę, a plik do pobrania powstaje na Twoim urządzeniu.
Jaki format wybrać?
SVG zajmuje kilkaset bajtów i jest ostry w dowolnym rozmiarze, więc pasuje do układów stron internetowych. PNG jest dokładny i bezstratny dla jednolitych kolorów. JPEG i WebP dają mniejsze pliki przy dużych rozmiarach, a JPEG lekko rozmywa tekst. Niektóre miejsca przyjmujące pliki, na przykład wiele pól w systemach CMS, akceptują tylko obrazy rastrowe, więc tam użyj PNG.
Jak dobierany jest rozmiar tekstu?
Automatycznie. Tekst jest tak duży, jak mieści się w jednym wierszu na około 80 procentach szerokości i 40 procentach wysokości, więc zarówno szeroki baner, jak 728 × 90, jak i wysoki, jak 160 × 600, wyglądają prawidłowo.
Do czego służy data URI?
Data URI to obraz zapisany jako tekst, który można wkleić prosto do znacznika img w HTML lub tła w CSS bez osobnego pliku. Dobrze sprawdza się przy małych obrazach. Duży PNG staje się długim ciągiem, który rozdyma stronę, więc narzędzie ostrzega, gdy wynik jest większy, niż to praktyczne, i odmawia skopiowania czegokolwiek powyżej 1 MB.
Czy SVG wymaga specjalnych czcionek?
Nie. Używa systemowej czcionki bezszeryfowej, więc na różnych urządzeniach wygląda nieco inaczej, ale zawsze się mieści, a tekst jest zabezpieczony, więc znaki takie jak & i < są bezpieczne.
Jakie są limity rozmiaru?
Każdy bok może mieć od 1 do 8000 pikseli, a łącznie do 100 megapikseli. Większe obrazy rysują się dłużej i mogą nie otwierać się w niektórych programach.