DARMOWE NARZĘDZIE

Generator obrazów Blur Data URI

Generuj rozmyte miniatury obrazów jako Base64 Data URI do Lazy Loading (blur-up effect). React, Next.js, HTML. Bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

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

Size

Blur

Format

Dane wejściowe

286 znaków

Jakość

Allow remote Opcja narzędzia

Nextjs Opcja narzędzia

Header

Plik zostanie użyty tylko podczas przetwarzania.

Wynik

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

Powiązane narzędzia

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

Generator rozmytego obrazu placeholder Data URI

Technika blur-up (LQIP) wyświetla rozmytą miniaturę zanim załaduje się pełny obraz – eleganckie i szybkie. Generator tworzy miniaturkę Base64 Data URI gotową do HTML lub React.

blur placeholder LQIP image lazy loading blur Data URI Base64

Jak to działa

Prześlij obraz – generator tworzy jego bardzo małą (10-30px) wersję skompresowaną jako Base64 JPG lub WebP zakodowaną w Data URI (data:image/jpeg;base64,...).

Zastosowania

Next.js Image placeholder prop, blurDataURL, CSS background-image blur (filter: blur(20px) + scale(1.1)), React Lazy Image, IntersectionObserver pattern.

Najczęstsze pytania

Co to LQIP?

Low Quality Image Placeholder – mała, rozmyta wersja obrazu wyświetlana podczas ładowania pełnej wersji. Eliminuje skoki layoutu (CLS) i poprawia perceived performance.

Jak użyć w Next.js?

– Next.js automatycznie obsługuje efekt przejścia.

Jak mały powinien być placeholder?

10-30px na szerszej osi. Blur w CSS (filter: blur(20px)) zamaskuje niską jakość – rozmiar Data URI: zazwyczaj 200-500 bajtów.

Inne narzędzia obrazów: Lorem Picsum i kompresja obrazów WebP.