Generator obrazów zastępczych (placeholder)

Jak zrobić obraz zastępczy

1. Wpisz Szerokość (px) i Wysokość (px) – od 1 do 10 000 pikseli. Podgląd i jego proporcje aktualizują się na bieżąco.
2. Wpisz Tekst albo zostaw pole puste, aby na obrazie pojawił się rozmiar, np. „1200×630”.
3. Wybierz Kolor tła i Kolor tekstu.
4. Zostaw Rozmiar czcionki (px) na 0, aby rozmiar dobrał się automatycznie do obrazu, albo wpisz rozmiar w pikselach. Wybierz Czcionka.
5. Wybierz Format: PNG, JPG, WebP lub SVG, a potem kliknij Pobierz obraz.

Aby utworzyć wiele rozmiarów naraz, otwórz Zestaw popularnych rozmiarów, zaznacz potrzebne rozmiary (albo użyj Zaznacz wszystkie / Odznacz wszystkie) i kliknij Pobierz wybrane rozmiary (ZIP). Każdy obraz używa ustawionych wyżej kolorów, czcionki i formatu; gdy tekst jest pusty, każdy obraz pokazuje własny rozmiar.

Który format wybrać

• SVG jest najlżejszy (kilkaset bajtów niezależnie od rozmiaru) i pozostaje ostry przy każdym powiększeniu. Idealny do makiet, prototypów i szablonów HTML. Tekst używa czcionki systemowej, więc jego wygląd może się nieco różnić między komputerami.
• PNG daje dokładne, bezstratne piksele. Wybierz go do programów graficznych i wtedy, gdy potrzebna jest prawdziwa bitmapa.
• JPG daje małe pliki przy dużych rozmiarach i jest akceptowany wszędzie, także w starych systemach CMS.
• WebP jest mniejszy od PNG i JPG i obsługują go wszystkie aktualne przeglądarki.

Formaty rastrowe są ograniczone do około 16,7 mln pikseli (na przykład 4096 × 4096) – to największe płótno, jakie przeglądarki potrafią zakodować. SVG nie ma takiego limitu.

Popularne rozmiary w zestawie

Rozmiary reklam odpowiadają standardowym jednostkom IAB używanym przez większość sieci reklamowych, a rozmiary do mediów społecznościowych – zaleceniom największych platform.

Po co używać obrazów zastępczych?

Placeholdery rezerwują dokładnie tyle miejsca, ile zajmie obraz, zanim powstanie prawdziwe zdjęcie. Dzięki temu projektanci i programiści mogą sprawdzić układ, przetestować punkty przełamania responsywnego layoutu albo pokazać klientowi, gdzie trafią grafiki, bez szukania zdjęć stockowych. Wymiary wypisane na obrazie od razu pokazują, jakiego rozmiaru oczekuje każde miejsce, a neutralna szarość skupia uwagę na układzie, a nie na treści.

Ponieważ narzędzie tworzy prawdziwe pliki, możesz używać ich offline, dodać je do repozytorium albo wrzucić do programu graficznego – bez zależności od zewnętrznej usługi z placeholderami, która może przestać działać albo śledzić odwiedzających.