BlurHash-Generator

Nein, und das überrascht die meisten Menschen am häufigsten. Ein BlurHash ist kein Bildformat — es sind 20 bis 30 Zeichen, die ein Decoder zu Pixeln erweitert. Ihre App braucht einen Decoder, um ihn anzuzeigen. Wenn Sie etwas wollen, das ganz ohne Decoder funktioniert, verwenden Sie stattdessen die Data-URI- oder Download-als-PNG-Schaltflächen: Beide liefern Ihnen ein echtes PNG des unscharfen Platzhalters, das größer ist, aber direkt in ein src-Attribut oder eine Datei auf der Festplatte passt.

Vier in der Breite und drei in der Höhe ist die übliche Standardeinstellung und das, womit dieses Tool startet. Darunter verliert man das Gefühl dafür, wo sich Dinge im Bild befinden; darüber wächst der Hash schnell für sehr wenig sichtbaren Gewinn, weil das Ergebnis ohnehin unscharf sein wird. Neun mal neun sind 166 Zeichen — sechsmal so lang wie ein 4×3 für einen Platzhalter, den sich niemand genau ansieht.

Weil der Durchschnitt in linearem Licht berechnet wird, nicht anhand der sRGB-Bytes. Kodiert man einen Testverlauf, dessen sRGB-Kanäle im Durchschnitt rgb(130, 110, 95) ergeben, erhält man einen 1×1-Hash, der zu rgb(147, 116, 103) dekodiert. Das ist kein Fehler — das direkte Mitteln gammakodierter Werte ist der Fehler, und deshalb wirken naiv gemittelte Miniaturansichten oft trüb. Der lineare Durchschnitt ist der wahrnehmungsmäßig korrekte.

Nein. Der Punch-Wert wird erst beim Dekodieren angewendet, sodass die Zeichenkette unabhängig von Ihrer Einstellung identisch bleibt. Er ist hier enthalten, weil die meisten Decoder-Bibliotheken denselben Parameter anbieten und es nützlich ist, seinen Effekt zu sehen, bevor Sie einen Wert in Ihrem eigenen Code festlegen.

Nein. Das Format hat keinen Alphakanal, sodass ein transparentes PNG so kodiert wird, als wäre es auf das, was die Leinwand enthielt, geflacht worden. Für Bilder mit echter Transparenz ist eine Platzhalterfarbe meist die bessere Wahl als eine Unschärfe.

Nein. Es wird auf der Seite dekodiert, verkleinert und transformiert. Sowohl der Encoder als auch der Decoder hier sind reine Arithmetik, die in Ihrem Browser läuft — es wird zu keinem Zeitpunkt eine Anfrage gesendet.

Ein Platzhalter, der zu den Farben und der groben Komposition des Bildes passt, erfüllt zwei nützliche Zwecke. Er reserviert den richtigen Platz, sodass sich beim Laden des Bildes nichts verschiebt — die Hauptursache für Beschwerden über Layout-Verschiebungen auf bildlastigen Seiten. Und er gibt dem Auge sofort etwas Plausibles, wodurch das Laden kürzer wirkt als eine gleich lange Wartezeit gegen eine graue Fläche, weil es etwas zum Anschauen statt nur zum Warten gibt.