Wireframing layoutu, gdzie potrzebujesz placeholderów w kształcie zanim prawdziwe assety są gotowe. Budowa Storybooka albo eksportu z Figmy, potrzebujesz placeholderowej grafiki per komponent. Testowanie kodu ładowania obrazków, progów lazy-loadingu albo CSS aspect-ratio. Zastąpienie zewnętrznego placeholder service w projekcie, który musi działać offline albo pod restrykcyjnym CSP.

SVG ≠ raster. Data URI to string SVG; skaluje się bez końca bez bluru, ale designer oczekujący PNG może oczekiwać czego innego. Po obrazek raster zrób screen z preview albo przepuść SVG przez konwerter SVG-to-PNG. Długie data URI są niewygodne w img src . Przeglądarki je trawią, ale narzędzia (lintery, search-and-replace, diff toole) często krztuszą się wielokilobajtowymi wartościami atrybutów. Dla dużych mockupów wybieraj download SVG. Tekst labela nie jest lokalizowany. Auto-label to "WxH" ze znakiem mnożenia; jeśli potrzebujesz tłumaczenia, wpisz custom label. Kolory tylko HTML hex. Color pickery produkują #rrggbb . Jeśli chcesz rgba() , edytuj markup SVG po skopiowaniu. Width/height są intrinsic, nie display. Ustawienie CSS na inny rozmiar przeskaluje SVG — wizualnie OK, ale osadzony tekst może wyglądać rozciągnięty, jeśli aspect ratio się zmieni; używamy preserveAspectRatio="none" dla przewidywalnego skalowania. Nie wysyłaj placeholdera na produkcję. Łatwo zapomnieć — podmień na prawdziwy asset przed go-live.

Generator Placeholder Image

Generuj placeholderowe obrazki inline-SVG w dowolnym rozmiarze z własnym tekstem i kolorami. Wyjście jako data URI albo SVG do pobrania.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Do czego to służy?

Projektując stronę często potrzebujesz obrazka o konkretnym rozmiarze, zanim prawdziwy obrazek będzie gotowy — hero banner, miniaturka karty, awatar, OG card. Wczytanie via.placeholder.com albo placehold.co działa, ale dodaje zewnętrzny request i zewnętrzną zależność. To narzędzie produkuje samowystarczalny inline SVG z rozmiarem i labelem, jakiego chcesz, gotowy do wrzucenia w HTML, CSS-owy background-image albo komponent React jako data URI. Nic nie opuszcza przeglądarki.

Kiedy tego użyć

Wireframing layoutu, gdzie potrzebujesz placeholderów w kształcie zanim prawdziwe assety są gotowe.
Budowa Storybooka albo eksportu z Figmy, potrzebujesz placeholderowej grafiki per komponent.
Testowanie kodu ładowania obrazków, progów lazy-loadingu albo CSS aspect-ratio.
Zastąpienie zewnętrznego placeholder service w projekcie, który musi działać offline albo pod restrykcyjnym CSP.

Częste pułapki

SVG ≠ raster. Data URI to string SVG; skaluje się bez końca bez bluru, ale designer oczekujący PNG może oczekiwać czego innego. Po obrazek raster zrób screen z preview albo przepuść SVG przez konwerter SVG-to-PNG.
Długie data URI są niewygodne w img src. Przeglądarki je trawią, ale narzędzia (lintery, search-and-replace, diff toole) często krztuszą się wielokilobajtowymi wartościami atrybutów. Dla dużych mockupów wybieraj download SVG.
Tekst labela nie jest lokalizowany. Auto-label to "WxH" ze znakiem mnożenia; jeśli potrzebujesz tłumaczenia, wpisz custom label.
Kolory tylko HTML hex. Color pickery produkują #rrggbb. Jeśli chcesz rgba(), edytuj markup SVG po skopiowaniu.
Width/height są intrinsic, nie display. Ustawienie CSS na inny rozmiar przeskaluje SVG — wizualnie OK, ale osadzony tekst może wyglądać rozciągnięty, jeśli aspect ratio się zmieni; używamy preserveAspectRatio="none" dla przewidywalnego skalowania.
Nie wysyłaj placeholdera na produkcję. Łatwo zapomnieć — podmień na prawdziwy asset przed go-live.