Wählen Sie ein lokales Bild und lassen Sie es als BlurHash-Zeichenkette und kleine JPEG-Daten-URL kodieren. Komponenten und LQIP-Breite einstellen, beide Vorschauen vergleichen, dann kopieren oder laden.
Läuft lokal in deinem BrowserDie Werkbank liest ein lokales Bild mit dem Decoder des Browsers, zeichnet es auf eine Leinwand mit höchstens 160 px auf der längsten Kante und kodiert diese Pixel zweimal: als BlurHash-Zeichenkette und als kleine JPEG-Daten-URL. Beides sind Platzhalter für dasselbe Bild, und keines verlässt den Tab.
Die linke Vorschau ist der erneut dekodierte Hash in der Form des Originals, die rechte das gerade erzeugte JPEG; die beiden Kästen zeigen also, was Besucher sehen, während das echte Bild lädt. Die Zeile darunter nennt die Ausgangsgröße, die Länge der Zeichenkette und das Gewicht des JPEG.
Ein BlurHash ist eine kurze Textkodierung einer weichgezeichneten Fassung des Bildes. Die ersten Zeichen tragen das Komponentenraster und einen quantisierten Maximalwert, danach folgen die Durchschnittsfarbe und ein Koeffizient je Rasterzelle. Mit dem Standardraster 4 × 3 war die Zeichenkette 28 Zeichen lang; eine einzelne Komponente 1 × 1 ergab 6 Zeichen und eine Fläche in einer Farbe, das Maximum 9 × 9 ergab 166 Zeichen und erhält am meisten Struktur.
Die Zeichenkette ist für einen BlurHash-Decoder in Ihrer eigenen Seite gedacht: die Referenzbibliotheken für JavaScript, PHP, Swift oder Kotlin, die React-Komponente oder ein Bild-CDN, das einen Hash annimmt. Breite, Höhe und Metadaten stecken nicht darin: der Decoder zeichnet sie in jeder gewünschten Größe. Diese Seite kodiert und dekodiert für die Vorschau auch ihren eigenen Hash, nimmt aber keinen Hash als Eingabe an.
Die zweite Ausgabe ist ein echtes JPEG, geschrieben in der gewählten Breite und mit fester Kompression (Qualität 0,58). Beim Testbild mit 800 × 500 ergab die Standardbreite 32 px eine Daten-URL von 987 Bytes — 1 KB in der Datenzeile —, 96 px blieben unter 1,6 KB. Die Datenzeile nennt den genauen Wert für Ihr Bild.
Als Daten-URL lässt sie sich direkt in ein img src, ein CSS-background-image oder ein picture-Element einsetzen, ohne zweite Anfrage. JPEG kennt keinen Alphakanal, transparente Flächen werden also weiß gefüllt — dieselbe Fläche, aus der auch der Hash entsteht — und die Datei behält das Seitenverhältnis des Originals. Herunterladen speichert sie als voritools-lqip.jpg.
Das Bild wird in der Seite gelesen, gezeichnet und kodiert. Vom Dateiinhalt wird nichts übertragen, es gibt kein Konto und keinen Upload-Schritt, und nach dem Laden arbeitet das Werkzeug auch ohne Netz weiter. Auch das Ergebnis ist reproduzierbar: dasselbe Bild mit denselben Komponenten und derselben Breite ergibt immer dieselbe Zeichenkette und dasselbe JPEG.
Der Kodierer setzt den Referenzalgorithmus von BlurHash um; die hier erzeugten Hashes wurden mit der Referenzimplementierung verglichen und stimmen überein, ein anderer Decoder zeichnet also denselben Platzhalter. Die einzigen harten Grenzen setzt der Browser: ein sehr großes Foto ist kein Problem, weil die Kodierung bei 160 px abtastet, der Tab muss die Datei aber zuerst dekodieren, und ein Format, das der Browser nicht liest, muss vorher umgewandelt werden.