Obrazek zastępczy dokładnie w potrzebnym rozmiarze
Wpisz szerokość i wysokość, a dostaniesz jednolity obrazek tego rozmiaru z wymiarami wypisanymi na środku — zastępstwo, którego układ strony potrzebuje, zanim dotrze prawdziwe zdjęcie. Zmień kolory, wpisz własny tekst i pobierz go jako PNG, JPEG, WebP lub SVG albo skopiuj jako data URI, by wkleić prosto do HTML lub CSS. Wszystko jest rysowane w Twojej przeglądarce.
Jak zrobić obrazek placeholder
- 1Wpisz szerokość i wysokość w pikselach albo wybierz popularny rozmiar, np. 300 × 250 lub 1920 × 1080.
- 2Zostaw tekst pusty, by pokazać wymiary, albo wpisz własny — nowa linia zaczyna drugi wiersz tekstu.
- 3Wybierz kolor tła i tekstu, czcionkę oraz rozmiar tekstu.
- 4Pobierz PNG, JPEG, WebP lub SVG, skopiuj obrazek albo skopiuj data URI SVG do
<img src>.
Raster czy wektor
- PNG, JPEG, WebP
- Bitmapa dokładnie o wpisanej szerokości i wysokości — do formularzy przesyłania, plików projektowych i wszędzie tam, gdzie potrzebny jest prawdziwy plik obrazu.
- SVG
- Kilkaset bajtów znaczników, które skalują się do dowolnego rozmiaru bez rozmycia. Wklej go bezpośrednio w kod albo użyj data URI, by placeholder w ogóle nie potrzebował pliku.
Tekst, który się mieści
Tekst dopasowuje się do obrazka automatycznie: duży na szerokim banerze, mały na reklamie typu leaderboard, nigdy nie wychodzi poza krawędź. Suwak rozmiaru tekstu skaluje go dalej.
Tekst w SVG jest rysowany czcionkami urządzenia, które go wyświetla, więc na innym komputerze może wyglądać nieco inaczej; formaty bitmapowe wszędzie wyglądają tak samo.
Bez usługi z placeholderami
Usługi z placeholderami online mogą przestać działać albo spowolnić stronę dodatkowym żądaniem. Pobrany plik lub data URI działa offline i nigdy się nie zmienia.
Aby dopasować prawdziwe zdjęcie do platformy, użyj narzędzia zmiana rozmiaru zdjęć do social mediów; aby wypełnić układ tekstem zastępczym, użyj generatora Lorem Ipsum.
Najczęstsze pytania
- Jak duży placeholder mogę zrobić?
- Do 8000 pikseli na każdy bok. Bardzo duże bitmapy mogą przekroczyć limit canvas w niektórych przeglądarkach; SVG nie ma takiego limitu.
- Czy mogę zmienić tekst na obrazku?
- Tak. Wpisz cokolwiek w polu tekstowym; zostaw je puste, by pokazać wymiary. Naciśnij Enter, by dodać drugi wiersz.
- Jak użyć placeholdera bez pliku?
- Skopiuj data URI i użyj go jako src obrazka lub jako url() we właściwości background-image w CSS. Cały obrazek mieści się w tym tekście.
- Czy coś jest wysyłane?
- Nie. Obrazek jest rysowany w Twojej przeglądarce i nigdy nie opuszcza Twojego urządzenia.