Was ist ein BlurHash?

Eine kompakte Zeichenkette, die den niederfrequenten Anteil eines Bildes kodiert: seine unscharfe Form und Farben, gedacht zum Speichern neben der URL.

Wie lang ist eine BlurHash-Zeichenkette?

Vier Zeichen plus zwei je Komponente, ein 4-mal-3-Hash hat also 28 Zeichen und ein 1-mal-1-Hash sechs.

Wie viele Komponenten sind sinnvoll?

Vier mal drei ist bei Fotos üblich; ein Porträt profitiert manchmal von drei mal vier, eine flache Grafik reicht mit zwei mal zwei.

Wird mein Bild hochgeladen?

Nein. Das Bild wird auf ein Canvas gezeichnet und in deinem Browser kodiert, Fotos verlassen dein Gerät also nie.

BlurHash-Generator

Mach aus einem Bild eine BlurHash-Zeichenkette und dekodiere jeden Hash zur unscharfen Vorschau.

Der BlurHash-Generator läuft vollständig in deinem Browser: Hineingezogene Bilder werden auf deinem Gerät kodiert und nie hochgeladen.

Platzhalterbild-Generator öffnen

Über BlurHash-Generator

Ein BlurHash ist eine gut zwanzig Zeichen lange Kette, die die unscharfe Form eines Bildes speichert – genug, um einen erkennbaren Platzhalter zu zeigen, während das eigentliche Bild lädt, statt eines grauen Kastens, der beim Füllen das Layout verschiebt. Der Kodierer projiziert das Bild auf wenige Kosinusfunktionen, quantisiert die Koeffizienten und packt sie in Basis 83, weshalb das Ergebnis bequem in ein JSON neben die Bild-URL passt. Dieses Werkzeug kodiert dein Bild, dekodiert jeden Hash zur Kontrolle und liefert den passenden Codeschnipsel.

Funktionen

Kodiert jedes PNG, JPEG oder WebP in eine BlurHash-Zeichenkette
Komponenten von 1 bis 9 je Achse, mit sichtbarer Länge
Dekodiert jeden gültigen Hash, nicht nur den gerade erzeugten
Punch-Regler für kräftigeren Kontrast der Unschärfe
Durchschnittsfarbe des Hashes, direkt als Hintergrund nutzbar
Schnipsel für React, HTML-Attribut und JSON-Antwort

So verwendest du BlurHash-Generator

Bild hineinziehen oder vorhandenen Hash zum Dekodieren einfügen
Komponenten anpassen – vier mal drei passt für die meisten Fotos
Hash kopieren und neben der Bild-URL speichern
React- oder HTML-Schnipsel für die Darstellung übernehmen

Beispiel

Eingabe

photo.jpg · 4 × 3 components

Ausgabe

LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters

Achtundzwanzig Zeichen wiegen weniger als die meisten Bild-URLs und erscheinen sofort, ohne zweite Anfrage.

Häufige Fehler & Fehlerbehebung

Ein gespeicherter Hash lässt sich nicht dekodieren. — Die Länge muss zu den Komponenten im ersten Zeichen passen: 4 + 2 × x × y. Eine abgeschnittene Kette fällt bei dieser Prüfung durch.
Der Platzhalter sieht dem Bild nicht ähnlich. — Zu wenige Komponenten: eins mal eins speichert nur eine Durchschnittsfarbe, drei oder vier je Achse machen ein Foto erkennbar.

Häufig gestellte Fragen

Was ist ein BlurHash?: Eine kompakte Zeichenkette, die den niederfrequenten Anteil eines Bildes kodiert: seine unscharfe Form und Farben, gedacht zum Speichern neben der URL.
Wie lang ist eine BlurHash-Zeichenkette?: Vier Zeichen plus zwei je Komponente, ein 4-mal-3-Hash hat also 28 Zeichen und ein 1-mal-1-Hash sechs.
Wie viele Komponenten sind sinnvoll?: Vier mal drei ist bei Fotos üblich; ein Porträt profitiert manchmal von drei mal vier, eine flache Grafik reicht mit zwei mal zwei.
Wird mein Bild hochgeladen?: Nein. Das Bild wird auf ein Canvas gezeichnet und in deinem Browser kodiert, Fotos verlassen dein Gerät also nie.