BlurHash / ThumbHash erzeugen
BlurHash / ThumbHash
Kodiert ein Bild in eine kurze BlurHash- oder ThumbHash-Zeichenkette, die als Lade-Platzhalter dient.
Ein BlurHash sind gut zwanzig Zeichen, die sich in eine unscharfe Version eines Bildes dekodieren – kurz genug, um in einer Datenbankspalte neben der URL zu liegen und im selben JSON zu reisen, damit das Layout etwas Erkennbares zeigen kann, bevor das Foto ankommt.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
SVG-Data-URI
580 ByteProzentkodiert statt base64: rund 25 % kleiner, und noch lesbar. Fügen Sie es direkt ein in background-image: url("…")
So funktioniert es
Legen Sie ein Bild ab oder fügen Sie einen Hash ein
Beide Richtungen funktionieren im selben Feld: Ein Bild gibt Ihnen einen Hash, ein Hash gibt Ihnen die dekodierte Vorschau.
Wählen Sie die Komponentenzahlen
Ein Hash hat 4 + 2·x·y Zeichen, 4×3 sind also 28. Mehr Komponenten bedeuten mehr Detail und eine längere Zeichenkette; vier mal drei ist die übliche Voreinstellung.
Verwenden Sie Punch bei einem flauen Foto
Es skaliert die Variation, ohne die Durchschnittsfarbe zu verschieben, was ein kontrastarmes Bild rettet, das sonst zu einem flachen Rechteck dekodieren würde.
Häufige Fragen
Warum wird die Quelle zuerst auf 32 px verkleinert?
Weil alles über dieser Frequenz von der Transformation ohnehin verworfen wird. In voller Auflösung zu kodieren gibt hundert Millionen Basisauswertungen aus, um dieselben 28 Zeichen zu erzeugen.
Ich brauche nur eine Durchschnittsfarbe.
Dann nehmen Sie die ersten sechs Zeichen des Hashs – genau die kodieren sie, sodass eine Seite, die nur eine Hintergrundfarbe braucht, nichts dekodieren muss.
BlurHash oder ThumbHash?
BlurHash ist das mit Bibliotheken überall und das, was diese Seite ausgibt. ThumbHash ist bei gleicher Qualität kürzer und trägt Alpha, aber Sie brauchen so oder so einen Decoder auf dem Client – nehmen Sie das, was Ihr Stack schon hat.
Eingabe aus
Platzhalterbild
Placeholder Image
Erzeugt ein einfarbiges oder mit Verlauf gefülltes Platzhalterbild in beliebiger Größe, mit eingezeichneten Abmessungen.
Durchschnitts- und Hauptfarbe
Average & Dominant Colour
Liefert eine repräsentative Farbe für ein Bild – Mittelwert, Median oder häufigste Farbe – als Farbwert.
PNG-Kompressor
PNG Compressor
Verkleinert ein PNG ohne Upload, komplett im Browser: Die Farbpalette wird quantisiert und der Deflate-Strom neu geschrieben, die Abmessungen bleiben unverändert.
JPEG-Kompressor
JPEG Compressor
Kodiert ein JPEG mit der gewählten Qualität neu und zeigt die Dateigröße vorher und nachher sowie eine Differenzansicht live an.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Durchschnitts- und Hauptfarbe
Average & Dominant Colour
Liefert eine repräsentative Farbe für ein Bild – Mittelwert, Median oder häufigste Farbe – als Farbwert.
Bildgröße ändern
Image Resizer
Skaliert Bilder nach Pixeln, Prozent oder einer Ziel-Kantenlänge, mit Sperre für das Seitenverhältnis und Voreinstellungen für die Stapelverarbeitung.
Platzhalterbild
Placeholder Image
Erzeugt ein einfarbiges oder mit Verlauf gefülltes Platzhalterbild in beliebiger Größe, mit eingezeichneten Abmessungen.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
Base64 in Bild
Base64 to Image
Dekodiert eine Base64-Zeichenkette oder Data-URI zurück in ein anzeigbares, herunterladbares Bild.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.