Generator obrazów placeholder

Generuj placeholder obrazy z Lorem Picsum: zdjęcia w dowolnym rozmiarze, grayscale, blur. Skopiuj URL lub tag img. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Tryb

Liczba

Kolumny

Szerokość

Wysokość

Ziarno (seed)

Skala szarości Opcja narzędzia

Rozmycie

Wynik

Wymiary

320 × 220 px

Zakres silnika: 120–800 px na bok

Liczba zdjęć

12 szt.

Każdy kafelek dostaje własny seed, więc URL-e się różnią

URL wygenerowany

https://picsum.photos/seed/toolsti-demo-1/320/220

Pierwszy kafelek siatki — pełna lista URL-i w eksporcie .txt

Skala szarości

wyłączona

Zdjęcia kolorowe — silnik nie dokleja ?grayscale

Rozmycie

0 / 10

0 = bez rozmycia (silnik nie dokleja parametru ?blur)

Tryb

Ustalony seed

Seed: toolsti-demo — ten sam zestaw URL-i przy każdym generowaniu

<!-- Wynik generatora Lorem Picsum (Toolsti) -->
<style>
.picsum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.picsum-grid img{width:100%;height:auto;border-radius:12px;display:block;}
@media (max-width: 992px){.picsum-grid{grid-template-columns:repeat(2,1fr);}}
</style>
<div class="picsum-grid" aria-label="Siatka zdjęć zastępczych">
  <img src="https://picsum.photos/seed/toolsti-demo-1/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 1">
  <img src="https://picsum.photos/seed/toolsti-demo-2/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 2">
  <img src="https://picsum.photos/seed/toolsti-demo-3/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 3">
  <img src="https://picsum.photos/seed/toolsti-demo-4/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 4">
  <img src="https://picsum.photos/seed/toolsti-demo-5/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 5">
  <img src="https://picsum.photos/seed/toolsti-demo-6/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 6">
  <img src="https://picsum.photos/seed/toolsti-demo-7/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 7">
  <img src="https://picsum.photos/seed/toolsti-demo-8/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 8">
  <img src="https://picsum.photos/seed/toolsti-demo-9/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 9">
  <img src="https://picsum.photos/seed/toolsti-demo-10/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 10">
  <img src="https://picsum.photos/seed/toolsti-demo-11/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 11">
  <img src="https://picsum.photos/seed/toolsti-demo-12/320/220" width="320" height="220" loading="lazy" alt="Zdjęcie zastępcze 12">
</div>

Ściąga: składnia URL zdjęć zastępczych

Zdjęcia pobierane są z zewnętrznej usługi Lorem Picsum (picsum.photos) — to narzędzie jedynie składa adresy URL, a obrazy ładuje przeglądarka wprost od Picsum. Przykłady poniżej buduje dokładnie ta sama metoda silnika, która generuje kafelki wyniku. Wysokość i szerokość mieszczą się w zakresie 120–800 px, rozmycie 0–10 (parametr doklejany od 1).

Przykłady URL wygenerowane silnikiem narzędzia (szer. 320 × wys. 220)
URL	Znaczenie
https://picsum.photos/seed/moj-seed/320/220	Wariant z seedem — dokładnie tak buduje URL-e to narzędzie; seed przechodzi przez rawurlencode()
https://picsum.photos/seed/moj-seed/320/220?grayscale	Parametr ?grayscale doklejany tylko przy włączonej skali szarości
https://picsum.photos/seed/moj-seed/320/220?blur=5	Parametr ?blur=1-10 doklejany tylko dla rozmycia 1–10 (0 = brak parametru)
https://picsum.photos/seed/moj-seed/320/220?grayscale&blur=3	Oba parametry naraz — łączone znakiem &
https://picsum.photos/320/220	Wariant bez seeda — każde odświeżenie może zwrócić inne zdjęcie

Zdjęcia zastępcze w praktyce

Zewnętrzna usługa, nie nasz serwer

Generator skleja adresy w formacie https://picsum.photos/seed/{seed}/{szerokość}/{wysokość}, ale same zdjęcia serwuje Lorem Picsum. Jeśli zewnętrzny serwis będzie niedostępny albo zmieni API, obrazy przestaną się ładować — wklejony kod HTML warto używać w projektach, gdzie to akceptowalne.

Do czego się przydają placeholdery

Makiety UI i mockupy przed doborem zdjęć, testy siatki galerii i layoutu, prezentacje dla klienta, szkolne projekty frontendu. Zamiast pustych ramek strona od razu wygląda jak gotowa, a realne zdjęcia podmieniasz na końcu.

Seed = powtarzalny obraz

Ten sam seed zawsze zwraca to samo zdjęcie, więc makieta z seedem wygląda identycznie przy każdym otwarciu. Tryb „Losowy” generuje nowe seedy przy każdym kliknięciu — przydaje się, gdy chcesz za każdym razem inny zestaw.

Wydajność i grayscale / blur

Wygenerowany HTML ma loading="lazy" oraz atrybuty width/height, więc obrazy doładowują się przy przewijaniu i nie rozjeżdżają layoutu. ?grayscale wyciąga kolory (neutralna, spójna makieta), a ?blur=1-10 rozmywa zdjęcie — dobre tło pod tekst.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator obrazów placeholder — obrazy zastępcze do makiet UI

Generator obrazów placeholder tworzy niestandardowe obrazy zastępcze do prototypów, makiet interfejsów i wireframeów. Określ rozmiar (szerokość × wysokość), kolor tła, kolor tekstu i etykietę — pobierz gotowy plik PNG, SVG lub użyj jako URL.

Do czego służą obrazy placeholder?

Podczas projektowania interfejsów i tworzenia prototypów często potrzebujemy tymczasowych obrazów — zanim docelowe zdjęcia będą dostępne. Obrazy placeholder wypełniają przestrzeń, zachowując prawidłowe proporcje layoutu. Używane są w: mockupach i wireframeach projektów UI/UX, szablonach HTML i CSS podczas developmentu (przed dodaniem prawdziwych zdjęć), prezentacjach klientom, dokumentacji API i tutorialach (gdzie konkretny obraz nie ma znaczenia), testach wydajności i ładowania strony.

Formaty obrazów placeholder

PNG — pikselowy obraz z zaznaczonym rozmiarem, idealny do pobrania i użycia jako plik. SVG — skalowalny wektor, lekki (kilkadziesiąt bajtów), idealny do osadzenia bezpośrednio w HTML — skaluje się do dowolnego rozmiaru bez utraty jakości. URL serwisu — adresy serwisów jak placekitten.com, picsum.photos, placehold.co możesz wkleić bezpośrednio jako src atrybutu img. Generator obsługuje wszystkie trzy podejścia.

Popularne serwisy placeholder online

Wiele projektów korzysta z zewnętrznych serwisów placeholder URL, które nie wymagają żadnego generowania: placehold.co — https://placehold.co/600x400/grey/white. picsum.photos — losowe zdjęcia Lorem Picsum, np. https://picsum.photos/600/400. placekitten.com — zdjęcia kotów: http://placekitten.com/600/400. via.placeholder.com — klasyczny szary placeholder. Wadą zewnętrznych serwisów jest zależność od dostępności zewnętrznego serwera i możliwe spowolnienie ładowania.

Generowanie placeholder w CSS i JavaScript

Najlżejsze podejście — generowanie przez CSS bez zewnętrznych plików: użyj background-color + aspect-ratio + display: flex + litera lub ikona SVG jako zawartość. W JavaScript: const svg = `<svg xmlns="..."><rect width="600" height="400" fill="#ccc"/><text>600×400</text></svg>`. Wbudowany SVG jako Data URL: src="data:image/svg+xml,..." — zero zewnętrznych zależności, idealne dla komponentów bibliotek UI.

Najczęściej zadawane pytania

Jaki jest najszybszy sposób dodania placeholder image do HTML?

Użyj atrybutu src z URL zewnętrznego serwisu: <img src="https://placehold.co/600x400" alt="Placeholder">. Lub wbudowanego SVG: <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect fill='%23ccc' width='600' height='400'/%3E%3C/svg%3E">. Oba podejścia nie wymagają plików zewnętrznych i działają natychmiast.

Jak ustawić kolor i wymiary placeholdera w CSS?

CSS-only placeholder: .placeholder { background-color: #ccc; aspect-ratio: 16/9; display: grid; place-items: center; color: #666; font-family: sans-serif; }. Dodaj pseudo-element z wymiarem: .placeholder::after { content: "800×450"; }. To rozwiązanie jest lekkie, responsywne i nie wymaga żadnych plików graficznych.

Jak wygenerować placeholder dla karuzeli zdjęć?

Dla karuzeli potrzebujesz kilku różnych placeholderów — możesz użyć innego koloru lub numeru dla każdego slajdu. Przykład z placehold.co: https://placehold.co/1200x600/3498db/white?text=Slide+1, https://placehold.co/1200x600/e74c3c/white?text=Slide+2. Generator na tej stronie pozwala masowo generować zestawy placeholderów z różnymi kolorami.

Czy mogę używać picsum.photos w projekcie produkcyjnym?

Picsum.photos jest serwisem do developmentu i testów — nie zaleca się używania w produkcji ze względu na: brak gwarancji SLA (serwis może być niedostępny), wolniejsze ładowanie niż własne serwery, brak kontroli nad obrazem (losowe zdjęcia). W produkcji zastąp placeholdery docelowymi zdjęciami lub użyj własnego CDN.

Jak dodać efekt lazy loading do obrazów placeholder?

HTML5 lazy loading: <img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="...">. Lub Intersection Observer API: const observer = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.src = e.target.dataset.src; } }); });. Nowoczesne podejście: loading="lazy" na img — obsługiwane we wszystkich nowoczesnych przeglądarkach bez JavaScript.