Jak utworzyć obraz zastępczy o dokładnym rozmiarze?

Wpisz Szerokość (px) i Wysokość (px), wybierz kolory lub motyw kolorystyczny, a następnie kliknij Pobierz PNG, Pobierz JPG lub Pobierz SVG. Domyślnie obraz pokazuje swoje wymiary, np. 800 x 600, jako etykietę.

Jaki jest największy obraz zastępczy, który mogę wygenerować?

Szerokość i wysokość muszą mieścić się w zakresie od 1 do 4000 pikseli. Wartości spoza tego zakresu spowodują błąd Szerokość i wysokość muszą być między 1 a 4000 px.

Jak umieścić obraz zastępczy bezpośrednio w HTML-u, bez pliku?

Kliknij Kopiuj jako data URL i wklej go do znacznika img jako wartość src. Możesz też użyć Kopiuj fragment HTML lub Kopiuj tło CSS. Nie jest potrzebny zewnętrzny hosting obrazów.

Jak umieścić własny tekst lub ukośne linie na obrazie zastępczym?

Wpisz etykietę w polu tekstu niestandardowego, np. Obraz główny, zamiast wyświetlania wymiarów. Zaznacz Pokaż linie ukośne (X), aby narysować delikatne przekątne. Długi tekst jest automatycznie pomniejszany, aby zmieścił się na szerokość.

Czy naprawdę jest za darmo?

Tak. Każde narzędzie jest darmowe, bez konta i karty kredytowej. Praca odbywa się na Twoim urządzeniu, a nie na naszych serwerach, co pozwala utrzymać ją za darmo.

Czy działa na urządzeniach mobilnych?

Tak. Działa w aktualnych przeglądarkach mobilnych na iOS i Androidzie, bez instalowania czegokolwiek.

🖼️

Generator obrazów zastępczych za darmo

Q: Czy mogę wygenerować standardowe rozmiary dla mediów społecznościowych lub stron internetowych?

Tak. Rozmiary predefiniowane obejmują Post Instagram, Historia Instagram, Karta Twitter, Open Graph, Miniatura YouTube, Okładka Facebook i Nagłówek e-maila. Pobierz wszystkie ustawienia wstępne (ZIP) zapisuje wszystkie jedenaście jako pliki PNG.

Generuj kolorowe obrazy zastępcze z niestandardowymi wymiarami, tekstem i kolorami. Standardowe rozmiary dla mediów społecznościowych, makiet i projektów.

Działa w przeglądarceBez rejestracji, bez wyskakujących okienekLogowanie nie jest wymaganeZa darmo na zawsze

Szerokość (px)

Wysokość (px)

Rozmiary predefiniowane

Motywy kolorystyczne

Tło

Tekst / linie

Własny tekst (zostaw puste, aby wyświetlić wymiary)

Pokaż wymiary, jeśli brak tekstuPokaż linie ukośne (X)

💡 Do makiet HTML: użyj opcji „Kopiuj jako data URL” i wklej do <img src="..."> jako placeholder inline. Do projektów Figma / Sketch pobierz PNG i przeciągnij do projektu.

Typowe zastosowania

Obrazy Placeholder dla Makiet ProjektówGeneruj kolorowe pola o rozmiarze do użytku w Figma, Sketch lub makietach projektów internetowych przed gotowością rzeczywistych obrazów.
Placeholdery Inline dla Prototypów HTMLUżyj 'Kopiuj jako URL danych' aby osadzić obrazy placeholder bezpośrednio w HTML dla szybkich prototypów.
Placeholdery dla Slotów Zawartości CMSPodczas demonstrujący szablonu CMS, używaj obrazów placeholder zamiast rzeczywistej zawartości dla wrażliwych podglądów.
Szablony Obrazów Mediów SpołecznychGeneruj placeholdery o prawidłowym rozmiarze dla szablonów postów Instagram, Facebook, Twitter, LinkedIn.
Obrazy Testowe Układu CSSGeneruj obrazy o skrajnych proporcjach aby testować responsywne układy CSS.

Jak to działa

Wszystko dzieje się w przeglądarce z użyciem HTML Canvas API i ręcznie napisanego kodu SVG — bez serwera, przesyłania i usług zewnętrznych. Ustawiasz wymiary, kolory i tekst etykiety, a narzędzie maluje obraz bezpośrednio na elemencie canvas w czasie rzeczywistym, a następnie na żądanie serializuje go do PNG, JPEG lub SVG.

1
Ustaw wymiary i kolory
Wpisz szerokość i wysokość (po 1–4000 px) lub wybierz jedno z jedenastu gotowych ustawień obejmujących popularne rozmiary dla mediów społecznościowych i projektowania. Wybierz kolor tła i tekstu z wbudowanych motywów lub wpisz bezpośrednio dowolną wartość hex; natywny selektor kolorów i sprawdzane pole tekstowe są zsynchronizowane.
2
Canvas API natychmiast renderuje podgląd
Efekt Reacta wywołuje drawPlaceholder() przy każdej zmianie. Ta funkcja używa CanvasRenderingContext2D, aby wypełnić prostokąt kolorem tła, opcjonalnie narysować delikatne ukośne linie krzyżowe z kryciem 15%, a następnie zmierzyć i wyśrodkować tekst etykiety — automatycznie zmniejszając czcionkę, aż zmieści się w 90% szerokości płótna.
3
Eksport jako PNG, JPEG lub SVG
Pobieranie PNG i JPEG wywołuje canvas.toDataURL(), zamienia wynik base64 na Blob w pamięci i uruchamia pobieranie — wszystko synchronicznie w ramach gestu użytkownika, aby spełnić zasady pobierania w Safari na iOS. Eksport SVG tworzy samodzielny ciąg SVG z odpowiadającym prostokątem, opcjonalnymi liniami ukośnymi i elementem tekstowym, a następnie zapisuje go jako plik .svg.
4
Eksport zbiorczy i skróty kopiowania
Przycisk „Pobierz wszystkie ustawienia” dynamicznie importuje JSZip, renderuje każdy z jedenastu gotowych rozmiarów na niewidocznym płótnie tą samą funkcją rysującą i pakuje wszystkie pliki PNG w jedno archiwum ZIP. Przyciski kopiowania zwracają data URL PNG, znacznik img z SVG inline lub deklarację CSS background-image do natychmiastowego wklejenia w kodzie.