Generator rozmytego obrazu Data URI

Generuj rozmyte obrazy placeholder jako Data URI (base64). Tiny blur placeholders dla lazy loading, SVG blobs. 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

Rozmiar 32

Rozmycie 3

Format obrazu

Dane wejściowe

286 znaków

Jakość 82

Zezwól na zdalne URL Opcja narzędzia

Fragment kodu Next.js Opcja narzędzia

Nagłówek

Plik zostanie użyty tylko podczas przetwarzania.

Podgląd na żywo

32x20 px (0,17 KB)

Styl Next.js

ROZMYTY PLACEHOLDER

Strona używa małego obrazu base64 rozciągniętego z filtrem CSS blur.

Wynik (kod)

Oryginał

80 × 50 px

PNG, 197 B

Rozmiar placeholdera

32 × 20 px

dłuższy bok = ustawiony rozmiar, proporcje zachowane (imagecopyresampled)

Siła rozmycia

3 × Gauss

imagefilter(IMG_FILTER_GAUSSIAN_BLUR) powtórzone N razy; 0 = bez rozmycia

Rozmiar Data URI

0,17 KB

zapis base64 powiększa dane o ok. 1/3 wobec bajtów binarnych

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAYUlEQVRIie3WsQ6AIAxF0au8Wgz6/5+rg5gwqRMMdrgDaUhOOnVaih8ikREZe2x9mX/97xiOEAnhCRjVjCiqD+uYagmxWwACEIAABCAAfwdsN0AdsxagAYB2A35dJqOuohNLIA6Sr9rFfAAAAABJRU5ErkJggg==

Ściąga: mechanizm generowania — dokładnie tak, jak w kodzie silnika (GD, nie CSS i nie SVG)

Kolejność: dekodowanie → skalowanie → rozmycie → kodowanie; rozmycie realizuje imagefilter(IMG_FILTER_GAUSSIAN_BLUR) w GD, powtarzane N razy
Etap	Co robi silnik
Wejście	Data URI „data:image/…;base64,” albo adres http/https — zdalne URL tylko z włączoną zgodą, pobierane przez SsrfGuard::fetch (blokada adresów prywatnych i lokalnych)
Dekodowanie	getimagesizefromstring() + ImageGuard::assertWithinLimitsFromString() + imagecreatefromstring() — PNG, JPEG, GIF i WebP, maks. 12 000 × 12 000 px
Skalowanie	imagecopyresampled() do dłuższego boku równego wybranemu rozmiarowi (8–128 px); proporcje zachowane, kanał alfa pilnowany (imagealphablending / imagesavealpha)
Rozmycie	N przejść imagefilter(IMG_FILTER_GAUSSIAN_BLUR) w bibliotece GD — N = suwak „Rozmycie” (0–10); to rozmycie GD na bitmapie, nie filtr CSS ani SVG feGaussianBlur
Zapis	PNG: imagepng() poziom 6; JPEG: spłaszczenie na białym tle (JPEG nie ma alfa) + imagejpeg() z jakością 40–95
Wyjście	„data:<mime>;base64,<dane>” gotowe do wklejenia w CSS/HTML; opcjonalnie fragment <Image placeholder="blur" blurDataURL=…> dla Next.js

Ściąga: zastosowanie (LQIP) oraz rozmycie a rozmiar

LQIP (Low-Quality Image Placeholder) to standardowe zastosowanie małego rozmytego Data URI; do rozciągania służy CSS, do generowania GD
Temat	Praktyka
LQIP placeholder	Mały rozmyty obraz rozciągnięty na kontener (background-size: cover albo object-fit: cover + filter: blur w CSS) zastępuje treść, dopóki właściwy obraz się nie doładuje — poprawia odczuwaną szybkość strony
Data URI w CSS/HTML	Obraz jedzie wprost w kodzie: background-image: url(„data:…”) albo <img src=„data:…”> — zero dodatkowych żądań HTTP, brak problemu z kolejnością ładowania
Next.js Image	placeholder="blur" + blurDataURL="…" — Next.js sam pokazuje placeholder do momentu załadowania obrazu (fragment generuje opcja „Fragment kodu Next.js”)
Rozmycie a rozmiar	Rozmycie wygładza krawędzie, więc PNG zwykle kompresuje się lekko lepiej (mniej detali); mniejszy wybrany rozmiar (px) daje krótszy string — na placeholder zwykle wystarcza 8–32 px
Base64 a długość	Zapis base64 powiększa dane o ok. 1/3 względem bajtów binarnych (plus nagłówek data:) — limit wyniku w narzędziu to 5 MB

Ściąga: przykład przeliczony dokładnie silnikiem narzędzia

Domyślna próbka (przycisk „Przykład”): suwak Rozmiar 32, Rozmycie 3, format PNG
Element	Wartość z silnika	Skąd
Wymiary oryginału	80 × 50 px, image/png, 197 B	próbka wstawiana przyciskiem „Przykład”
Placeholder (rozmiar 32, rozmycie 3)	32 × 20 px, image/png, 175 B	dłuższy bok 32 px = domyślny suwak „Rozmiar”
Długość Data URI	258 znaków (ok. 0,25 KB)	gotowy string do wklejenia w CSS/img

Warto wiedzieć — rozmyty placeholder Data URI

Gdzie wkleić Data URI

W CSS: background-image: url("data:image/png;base64,…"), w HTML: <img src="data:…">. Obraz jedzie wprost w dokumencie — bez dodatkowego żądania HTTP, więc placeholder pojawi się razem ze stylem strony.

LQIP i Next.js

Placeholder rozciąga się na kontener, a ostateczne wygładzenie robi CSS (filter: blur(), object-fit: cover). W Next.js użyj wygenerowanego fragmentu: placeholder="blur" + blurDataURL — framework sam pokaże placeholder przed załadowaniem obrazu.

Rozmiar a jakość placeholdera

Na placeholder wystarcza dłuższy bok 8–32 px — i tak zostanie rozmyty przy rozciąganiu. PNG jest najlepszy dla gradientów i UI, JPEG często mniejszy dla zdjęć (spłaszczany na białym tle). Zapis base64 powiększa dane o ok. 1/3.

Bezpieczeństwo pobierania

Zdalne URL działają tylko po włączeniu zgody i idą przez SsrfGuard (blokada adresów prywatnych i lokalnych, limit przekierowań). Rozmiar pilnuje limit 5 MB, a wymiary obrazu ImageGuard — narzędzie przetwarza wyłącznie dane obrazu.

Oceń to narzędzie:

5,0 / 5 · 1 ocena

Powiązane narzędzia

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

Generator rozmytego obrazu Data URI – blur placeholder dla stron

Rozmyte placeholdery obrazów (blur placeholders) poprawiają UX poprzez wyświetlanie wersji low-quality podczas ładowania właściwego obrazu. Technika LQIP (Low Quality Image Placeholder) i Data URI (base64 inline) eliminuje dodatkowe żądania HTTP i przyspiesza perceived performance.

Data URI generator blur placeholder obraz LQIP lazy loading rozmyty obraz placeholder

Co to jest Data URI i LQIP

Data URI: zakodowany plik bezpośrednio w URL. Format: data:[mediatype][;base64],. Przykład: data:image/png;base64,iVBORw0K... LQIP (Low Quality Image Placeholder): bardzo mała (10-30px) wersja obrazu zakodowana jako base64. Rozmiar: 300-800 bajtów vs MB właściwego obrazu. Korzyść: natychmiastowe wyświetlenie, potem animowany blur podczas ładowania HD.

Techniki placeholder dla obrazów

LQIP: mały obraz base64 + CSS blur (filter: blur(20px)). BlurHash: algorytm Wolt (compact representation 20-30 znaków, dekoduje do kolorowego blur). ThumbHash: nowszy, lepsze kolory. SVG placeholder: kolorowe kształty. Dominant color: jeden kolor tła z obrazu. Progressive JPEG: ładuje się od rozmytego do ostrego. Skeleton screens: szare prostokąty.

Data URI w HTML i CSS

HTML: . CSS: background-image: url("data:image/png;base64,..."). Wady: nie cachowane osobno przez przeglądarkę. Zwiększa rozmiar HTML/CSS. Dobre dla: małych ikonek, placeholder. SVG Data URI: data:image/svg+xml,

Implementacja lazy loading z blur

HTML: . CSS: .blur-up { filter: blur(20px); transition: filter 0.4s; } .blur-up.loaded { filter: none; }. JavaScript (IntersectionObserver): gdy widoczny → wczytaj data-src → dodaj klasę loaded. Biblioteki: lazysizes (automatyzuje), next/image (Next.js built-in blur placeholder).

Jak działa generator: od pikseli do ciągu base64

Generator nie tworzy obrazu od zera. Wczytuje wskazany plik do pamięci przeglądarki, rysuje go na niewidocznym płótnie (canvas) przeskalowanym do wybranej szerokości — zwykle 10-30 px — a następnie nakłada na nie rozmycie. Można to zrobić filtrem kontekstu płótna albo ręcznie, uśredniając kolor sąsiednich pikseli (box blur o promieniu kilku pikseli). Powstały, kilkusetpikselowy obraz jest kodowany do PNG, WebP lub JPEG i zamieniany na tekst metodą toDataURL.

Kluczowa jest arytmetyka base64: kodowanie zamienia każde 3 bajty danych binarnych na 4 znaki ASCII, więc ciąg tekstowy jest o około jedną trzecią dłuższy od pliku źródłowego — dokładnie 4/3 jego rozmiaru. Placeholder o masie 300-800 bajtów daje więc string o długości od około 400 do około 1067 znaków. To wciąż na tyle mało, że mieści się w pierwszym pakiecie dokumentu HTML i nie wymaga osobnego żądania.

Dlaczego wystarcza tak mały obraz? Przeskalowanie w dół usuwa wysokie częstotliwości, czyli drobne tekstury i ostre krawędzie, a rozmycie dodatkowo uśrednia sąsiednie piksele. Mniej szczegółów to mniejsza entropia, a mniejsza entropia to krótszy strumień po kompresji bezstratnej. Przeglądarka rozciąga potem taki obraz do rozmiaru kontenera, a wygładzanie dokłada warstwa CSS — filter: blur. Efektem jest kolorowa plama zgodna z oryginałem, która pojawia się natychmiast i ustępuje właściwemu plikowi.

Przykład krok po kroku: zdjęcie 2400 × 1600 px

Wybierz plik źródłowy — zdjęcie JPEG o wymiarach 2400 × 1600 px, czyli w proporcji 3:2.
Ustaw szerokość placeholdera na 24 px. Wysokość policz z proporcji: 24 × (1600 / 2400) = 16 px, więc płótno ma 24 × 16 = 384 piksele.
Nałóż rozmycie o promieniu około 2 px, czyli mniej więcej dziesiątej części szerokości — znikają drobne tekstury, zostaje sam rozkład barw.
Zakoduj wynik do PNG. Rozmyta plama bez detali kompresuje się do około 600 bajtów, czyli do środka przedziału 300-800 B.
Zamień plik na base64: 600 bajtów × 4/3 = 800 bajtów tekstu. Otrzymany string zaczyna się od data:image/png;base64,iVBORw0KGgo...
Wstaw string w atrybut src obrazu i rozciągnij go do docelowego pola (width: 100%; height: 100%), a w CSS dodaj filter: blur(20px) oraz niewielkie scale, żeby ukryć rozmazane krawędzie.

Parametry rozmytego placeholdera — tabela referencyjna

Parametr	Wartość typowa	Znaczenie
Szerokość obrazu źródłowego	10-30 px	Poniżej 10 px obraz zlewa się w jedną plamę, powyżej 30 px rośnie masa stringa bez widocznej poprawy.
Rozmiar pliku binarnego	300-800 B	Im mniej szczegółów zostało po rozmyciu, tym bliżej dolnej granicy.
Rozmiar po base64	około 4/3 pliku binarnego	300 B daje około 400 znaków, 800 B około 1067 znaków.
Format kodowania	PNG, WebP lub JPEG	PNG jest bezstratny i dobrze radzi sobie z gładkimi plamami; JPEG ryzykuje artefakty blokowe.
Prefiks Data URI	data:image/png;base64,	Bez niego przeglądarka nie rozpozna typu danych zawartych w stringu.
Rozmycie w CSS	filter: blur(20px)	Niezależna od pliku warstwa wygładzania przy powiększaniu.
BlurHash	20-30 znaków	Zapis matematyczny, nie plik obrazu — dekodowany dopiero w JavaScript.
Progressive JPEG	wiele przejść skanowania	Obraz wyświetla się stopniowo: od rozmytego do ostrego.

Praktyczne wskazówki

Trzymaj się przedziału 10-30 px — to kompromis między czytelnością plamy a masą stringa; przy 10 px i mocnym rozmyciu obraz często zlewa się w jeden kolor.
Rozmywaj przed kodowaniem, nie tylko w CSS — rozmyta plama ma mniejszą entropię, więc PNG lub WebP wychodzi mniejszy, a filtr CSS to jedynie dodatkowa warstwa wygładzania przy powiększaniu.
Zapisz proporcje obrazu — ustaw width i height albo aspect-ratio kontenera, inaczej po wstawieniu właściwego pliku układ strony przeskoczy.
Nie wstawiaj tego samego placeholdera wielokrotnie — Data URI nie jest cache'owany jako osobny zasób, więc każda kopia powiela te same kilobajty w dokumencie.
Dopasuj rozmycie do skali wyświetlania — blur(20px) to wartość startowa; przy małych miniaturach wystarczy mniej, a przy pełnoekranowych tłach warto dodać scale(1.05), żeby krawędzie nie prześwitywały.

Ograniczenia i czynniki zaburzające

Nie odtworzy treści obrazu — placeholder pokazuje tylko rozkład barw; tekst, twarze i drobne elementy są nieczytelne, więc nie zastąpi podpisu ani atrybutu alt.
Brak osobnego cache przeglądarki — ciąg jest częścią HTML lub CSS, więc nie da się go zapisać w pamięci podręcznej jak zwykłego pliku graficznego; każda zmiana obrazu zmienia cały dokument.
Rośnie masa dokumentu — base64 dodaje około jednej trzeciej objętości, a przy kilkudziesięciu placeholderach na jednej stronie suma kilobajtów staje się odczuwalna.
Wynik rozmycia zależy od przeglądarki — algorytm filter: blur nie jest identyczny we wszystkich silnikach, więc ten sam string może wyglądać nieco inaczej.
Brak analizy treści — narzędzie nie wyznacza koloru dominującego ani nie generuje BlurHash lub ThumbHash; to osobne reprezentacje placeholdera.

Najczęstsze pytania

Jak wygenerować Data URI z obrazu w JavaScript?

canvas.toDataURL("image/png") lub canvas.toDataURL("image/jpeg", 0.8). FileReader: reader.readAsDataURL(file). Zmniejsz obraz: canvas 10×10px z drawImage → toDataURL → base64 placeholder. Node.js: sharp(image).resize(10).blur(5).toBuffer().then(buf => "data:image/png;base64," + buf.toString("base64")).

Co to jest BlurHash i jak używać?

BlurHash: algorytm Wolt/Dag Ågren. Kompresuje obraz do stringa np. "LEHV6nWB2yk8pyo0adR*.7kCMdnj". Dekoduje do kolorowego blur w JavaScript. Rozmiar: 20-30 znaków vs LQIP base64 (300-800 B). Biblioteki: blurhash (npm), blurhash-wasm. Next.js: blurDataURL + placeholder="blur". Wady: wymaga JS do dekodowania, brak natywnej przeglądarki.

Jak sprawdzić rozmiar Data URI?

Base64 koduje 3 bajty → 4 znaki ASCII (+33% overhead). Obraz 600B PNG → base64 ok. 800 znaków. Sprawdź: atob("base64string").length (JavaScript). Optymalizuj: zmniejsz rozmiar source image przed base64. PNG vs JPEG: dla zdjęć JPEG mniejszy. WebP: jeszcze mniejszy. SVG: dla geometrycznych kształtów najmniejszy.

Jak lazy loading wpływa na Core Web Vitals?

LCP (Largest Contentful Paint): lazy loading hero image = zły LCP. Nie lazy-load above-the-fold images! loading="lazy" tylko dla below-the-fold. FCP: blur placeholder przyspiesza perceived FCP. CLS: zawsze podaj width i height w img żeby przeglądarka zarezerwowała miejsce. TBT: IntersectionObserver jest async, nie blokuje main thread.

Jakie narzędzia generują LQIP automatycznie?

Next.js: next/image z placeholder="blur" generuje automatycznie. Gatsby: gatsby-image/GatsbyImage. Vite: vite-plugin-lqip. Webpack: image-minimizer-webpack-plugin. CLI: sharp CLI (sharp input.jpg -r 10 -o placeholder.jpg). Online: squoosh.app (resize + export). ImageMagick: convert input.jpg -resize 10x10 -blur 0x2 placeholder.jpg.

Ile bajtów ma rozmyty obraz w formacie Data URI?

Po pomniejszeniu i rozmyciu plik waży zwykle 300-800 bajtów. Po zakodowaniu base64 rozmiar rośnie o około jedną trzecią, więc string w HTML ma od około 400 do około 1067 znaków.

Czy Data URI jest cache'owany przez przeglądarkę?

Nie jako osobny zasób. Ciąg jest częścią dokumentu HTML lub arkusza CSS, więc podlega ich cache'owaniu razem z całością i nie da się go odświeżyć niezależnie.

Jaką szerokość placeholdera wybrać?

Najczęściej 10-30 px. Poniżej 10 px obraz zlewa się w jedną plamę, a powyżej 30 px rośnie masa stringa bez zauważalnej poprawy wyglądu.

Czym różni się taki placeholder od BlurHash?

Data URI to prawdziwy, bardzo mały plik obrazu zapisany w base64. BlurHash to 20-30-znakowy zapis matematyczny, który dopiero w JavaScript dekoduje się do kolorowego rozmycia.

Czy rozmyty placeholder poprawia LCP?

Nie skraca czasu wczytywania właściwego pliku, ale likwiduje pusty obszar w miejscu obrazu — użytkownik widzi treść natychmiast, więc poprawia się odczuwana szybkość i stabilność układu.

Powiązane narzedzia: koder base64 obrazu, optymalizator obrazow i generator SVG.