So nutzt du: BlurHash- & LQIP-Generator
- Wähle ein Foto aus (oder probier das Beispiel aus). Alles läuft in deinem Browser.
- Passe die BlurHash-Detailstufe an: 4 × 3 eignet sich für die meisten Landschaftsfotos; mehr Komponenten bewahren mehr Formen, machen die Zeichenfolge aber länger.
- Wähle die Breite und das Format für das LQIP aus – ein 16-px-WebP-Bild ist in der Regel kleiner als 1 KB.
- Kopiere die BlurHash-Zeichenkette, die Daten-URI oder den fertigen Code für HTML/CSS, Next.js oder React. Weiter.
Drei Arten von Platzhaltern
| Platzhalter | Größe | Am besten geeignet für |
|---|---|---|
| Dominante Farbe | 7 Zeichen | Miniaturansichten als Raster; die einfachste Option |
| BlurHash | 20–30 Zeichen | Speicherung in einer Datenbank oder als Teil der API-Antwort neben der Bild-URL; wird in der App in Pixel umgewandelt |
| LQIP (Base64-Bild) | Unter 1 KB | Einbettung in HTML oder CSS, Next.js blurDataURL; funktioniert ohne JavaScript |
So funktioniert BlurHash
BlurHash beschreibt ein Bild mit ein paar Kosinuswellen – ähnlich wie ein JPEG mit sehr niedriger Auflösung. Das Bild wird in lineares Licht umgewandelt, mit Kosinusmustern in jeder Richtung multipliziert, und die resultierenden Faktoren werden quantisiert und mit einem 83-Zeichen-Alphabet geschrieben. Beim Dekodieren werden dieselben Wellen wiederhergestellt, was zu einer sanften Unschärfe mit den Farben und dem groben Layout des Bildes führt. Dekodiere es auf etwa 32 × 32 Pixel und strecke es mit CSS – es soll unscharf sein.
Stell immer width und height (oder aspect-ratio) für das Bild ein, damit der Platzhalter seinen Platz reserviert und nichts verrutscht, wenn das Foto eintrifft. Komprimiere auch das vollständige Bild mit dem Image Compressor.
Auch gesucht als: blurhash-generator, lqip-generator, bild-platzhalter-generator, platzhalter „blur“, nextjs blurdataurl, blurhash online, platzhalterbild in schlechter qualität, progressives laden von bildern.
Passende Tools zu: BlurHash- & LQIP-Generator
- Bildgrößenänderer — Passe die Größe eines Fotos auf exakte Pixelabmessungen oder einen Prozentsatz an, schneide es so zu, dass es die Größe eines Social-Media-Beitrags ausfüllt, oder passe es in einen Rahmen mit einer Hintergrundfarbe ein – alles direkt in deinem Browser.
- Bild in Base64 — Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML um – oder füge eine Base64-Zeichenkette ein, um eine Vorschau des Bildes anzuzeigen und es herunterzuladen.
- Bildkonverter — Konvertiere jedes Bild, das dein Browser öffnen kann – PNG, JPG, WebP, AVIF, GIF, BMP oder SVG – in PNG, JPG, WebP oder AVIF, egal ob eine Datei oder Hunderte auf einmal.
- Page Speed Test — Run Google Lighthouse on any URL for mobile or desktop.