Ziehe ein Bild hierher oder klicke zum Auswählen
PNG, JPEG, WebP, GIF, BMP, AVIF
So funktioniert es
Ein Platzhalter ist das, was den Platz eines Bildes einnimmt, während es lädt. Er erfüllt zwei verschiedene Zwecke: Er reserviert den genauen Raum, den das Bild einnehmen wird, damit der umgebende Text beim Erscheinen nicht springt, und er zeigt etwas, das dem Endinhalt ähnelt, sodass die Wartezeit kürzer wirkt als vor einem grauen Rechteck.
Es gibt drei Lösungsfamilien. Kompakte Hashes (BlurHash und ThumbHash) fassen das Bild in einer so kurzen Zeichenkette zusammen, dass du sie in einer Datenbankspalte neben dem übrigen Datensatz speichern kannst; der Browser dekodiert sie und zeichnet die Unschärfe. Data-URIs (das LQIP-Miniaturbild und das SVG) tragen das bereits kodierte Bild im HTML oder CSS, brauchen also überhaupt kein JavaScript. Und die einfarbige Fläche ist der günstigste Platzhalter von allen: sieben Zeichen.
Was sich eignet, hängt davon ab, woher das HTML stammt. Kommen die Bilder aus einer Datenbank und listest du sie zu Hunderten auf, ist der Hash pro Datensatz am leichtesten. Erzeugst du statische Seiten oder nutzt ein Framework, das Platzhalter bereits unterstützt, erspart dir das Data-URI zusätzlichen Dekodier-Code. Alle Werte, die du hier siehst, werden in deinem Browser berechnet: Das Bild wird auf keinen Server hochgeladen.
Beispiele
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjDie Länge eines BlurHash hängt allein von der Anzahl der Komponenten ab, nicht von Größe oder Inhalt des Bildes: Bei 4 × 3 sind es immer 28 Zeichen, bei 3 × 3 sind es 22 und bei 5 × 4 sind es 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHEin ThumbHash belegt zwischen 17 und 25 Byte, also 24 bis 36 Zeichen in Base64. Die genaue Größe hängt vom Seitenverhältnis des Bildes und davon ab, ob es Transparenz enthält, denn das Format kodiert auch den Alphakanal.lqip 24 px webpdata:image/webp;base64,UklGRi…Ein 24 px breites WebP-Miniaturbild bleibt meist unter 1 KB. Da es im HTML eingebettet ist, entsteht keine zusätzliche Anfrage, es bläht aber das Dokument auf, das nicht separat zwischengespeichert wird.Anwendungsfälle
- Einen BlurHash oder ThumbHash in der Bildtabelle speichern, damit eine Liste oder ein Feed mit unendlichem Scrollen vom ersten Moment an etwas anzeigt.
- Das Attribut blurDataURL von next/image oder den Platzhalter von NgOptimizedImage befüllen, wenn das Bild kein statischer Import ist.
- Layout-Verschiebungen (CLS) in Produkt- oder Artikelkarten vermeiden, indem der Platzhalter mit den Attributen width und height kombiniert wird.
- Einen Platzhalter in statisches HTML, eine E-Mail oder eine Vorlage einbetten, in der du kein JavaScript zum Dekodieren ausführen kannst.
- Denselben BlurHash im Web und in mobilen Apps wiederverwenden, für die es Decoder in Swift, Kotlin und Flutter gibt.
- Die Durchschnittsfarbe als Hintergrund eines Containers verwenden, wenn das Byte-Budget nicht einmal ein Miniaturbild zulässt.
Häufige Fragen
BlurHash oder ThumbHash?
ThumbHash gibt das Bild mit weniger Bytes originalgetreuer wieder, erhält die Transparenz und speichert das Seitenverhältnis – du musst also nicht einmal die Originalgröße kennen, um es zu zeichnen. BlurHash ist älter und ungenauer, hat aber Implementierungen für weit mehr Plattformen und Sprachen. Wenn du bei null anfängst: ThumbHash; wenn du bereits BlurHash-Decoder im Stack hast, gibt es keinen Grund zu wechseln.
Verbessert das den LCP?
Nicht direkt. Der Platzhalter verbessert die gefühlte Geschwindigkeit und beseitigt zusammen mit width und height die Layout-Verschiebung, doch der LCP-Wert wird weiterhin gemessen, wenn das echte Bild fertig gezeichnet ist. Mehr noch: Ist das Hauptbild das LCP-Element, gib ihm kein loading="lazy" und verzögere es nicht hinter einem Platzhalter; markiere es besser mit fetchpriority="high", damit der Browser es früher anfordert. Platzhalter sind für die Bilder außerhalb des ersten Bildschirms gedacht.
Wie viele Komponenten sollte ein BlurHash haben?
Vier mal drei funktioniert gut bei Querformaten, drei mal vier bei Hochformaten. Jede zusätzliche Komponente bringt zwei Zeichen und etwas mehr Detail, doch ab sechs oder sieben ist der Unterschied mit bloßem Auge nicht mehr zu erkennen, weil das Ergebnis ohnehin unscharf dargestellt wird.
Hash oder Data-URI?
Der Hash belegt einige Dutzend Byte pro Bild und ist ideal, wenn viele davon auf derselben Seite stehen, verlangt aber Client-Code zum Dekodieren. Das Data-URI braucht gar nichts, wiegt dafür zehn- bis fünfzigmal mehr und reist im HTML mit, das nicht separat zwischengespeichert wird. Bei wenigen hervorgehobenen Bildern ist das Data-URI die bessere Wahl, bei langen Listen der Hash.
Warum das SVG statt direkt das Miniaturbild verwenden?
Weil die Unschärfe vom Browser beim Zeichnen des SVG angewendet wird. So kannst du von einem viel kleineren Miniaturbild ausgehen, ohne dass beim Vergrößern Pixelblöcke sichtbar werden, und das Ergebnis wirkt in jeder Größe gleich weich. Das SVG setzt außerdem den Alphakanal auf deckend, damit die Unschärfe die Ränder nicht transparent macht.
Gibt es eine Größenbeschränkung für den Platzhalter?
Das hängt vom Werkzeug ab. Angulars NgOptimizedImage gibt eine Konsolenwarnung aus, wenn das Data-URI des Platzhalters 4000 Zeichen überschreitet, denn ab da wiegt das zusätzliche HTML schwerer als der Nutzen. Das ist ein guter allgemeiner Richtwert: Überschreitet dein Miniaturbild diesen Wert, verringere Breite oder Qualität.