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

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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.