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

Wklej obrazek lub użyj przykładu, aby zobaczyć podgląd.

Wynik (kod)

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 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).

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.

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