Kurz gesagt: ein Blur-Placeholder ist keine Dekoration — er ist eine als Ladeeffekt getarnte Korrektur des Cumulative Layout Shift, denn ein korrekt dimensionierter Placeholder reserviert den exakten Platz des Bildes, bevor die echte Datei ankommt. Kombiniere diesen Guide mit Character Counter, Encoding Converter, Text Difference und AI Hidden Characters.

LQIP (Low Quality Image Placeholder) ist eine winzige, stark komprimierte Version des echten Bildes — oft 20×20 Pixel oder kleiner, ein paar hundert Bytes — unscharf und vergrößert angezeigt, während die Datei in voller Auflösung lädt.

Das echte Problem, das LQIP löst: Layout-Verschiebung, nicht Ästhetik

Ohne einen Placeholder, der die endgültigen Dimensionen des Bildes reserviert, rendert die Seite ohne Platz für das Bild, dann schiebt sie alles darunter nach unten, sobald die Datei ankommt — Cumulative Layout Shift (CLS), eine von Googles Core Web Vitals, bestraft genau das. Ein Placeholder mit demselben Seitenverhältnis (unscharf oder nicht) belegt vom ersten Rendering an den richtigen Platz, sodass sich nichts bewegt, wenn das echte Bild lädt — die Unschärfe ist ein nettes Extra obendrauf zur eigentlichen Korrektur, nämlich Platz zu reservieren.

Wie ein winziges Bild sofort eingebettet wird

LQIP-Placeholder werden typischerweise als base64-kodierte Daten-URIs direkt im HTML eingebettet — <img src="data:image/jpeg;base64,..."> — sodass der Placeholder mit null zusätzlichen Netzwerkanfragen rendert, was zählt, weil der ganze Sinn ist, etwas zu zeigen, bevor sich überhaupt die Anfrage des echten Bildes auflöst. Da das Quellbild winzig ist (oft unter 1KB vor der Kodierung), ist der Base64-Overhead — etwa 33% größer als die rohen Bytes — für einen Placeholder vernachlässigbar, trotz seiner Verschwendung bei einem Bild in voller Größe.

LQIP vs. ein Placeholder mit dominanter Volltonfarbe

Eine unscharfe Mikro-Miniatur trägt mehr visuelle Information (grobe Formen, Farbverteilung) als ein einzelnes Rechteck mit dominanter Farbe, bedeutet aber auch mehr Konfigurationsaufwand — für jedes Foto ein winziges Bild generieren und speichern, gegenüber der Berechnung einer einzigen Durchschnittsfarbe. Bei einer fotolastigen Galerie, wo das Bild selbst der Punkt ist, lohnt sich die zusätzliche Detailtreue von LQIP meist; bei kleineren UI-Bildern oder Icons erledigt ein flacher Farb-Placeholder die CLS-Verhinderung mit weniger Overhead.

Ein Workflow zum korrekten Hinzufügen von Placeholdern

  1. Setze explizite width- und height-Werte (oder ein CSS-aspect-ratio) auf jedem Bild-Tag — das ist es, was tatsächlich Platz reserviert; das Placeholder-Bild selbst tut das nicht allein.
  2. Generiere den winzigen Placeholder im wahren Seitenverhältnis des Bildes, nicht in einer festen Größe, die nicht passt — ein falsches Verhältnis erzeugt eine Verschiebung, wenn das echte Bild eingesetzt wird.
  3. Bette den Placeholder als Base64-Daten-URI ein für Laden mit null Anfragen, reserviert nur für wirklich kleine Placeholder-Bilder.
  4. Teste mit dem Netzwerk-Throttling des Browsers — der Wert eines Placeholders zeigt sich nur, wenn das echte Bild langsam ankommt.

Häufige Fehler, die du vermeiden solltest

  • Einen Unschärfe-Effekt hinzufügen, ohne auch explizite Dimensionen zu setzen — die Unschärfe allein tut nichts gegen Layout-Verschiebung.
  • Einen Placeholder mit einem anderen Seitenverhältnis als das echte Bild verwenden, was ohnehin eine Verschiebung verursacht, wenn es ersetzt wird.
  • Ein Bild in voller Größe "aus Konsistenzgründen" in Base64 einbetten, was das Seitengewicht ohne jeglichen Placeholder-Vorteil aufbläht.
  • LQIP rein als visuellen Effekt behandeln und übersehen, dass seine eigentliche Aufgabe darin besteht, Layout-Platz zu reservieren.

Die Unschärfe ist das, was Nutzer bemerken; die Dimensionsreservierung darunter ist das, was tatsächlich deinen Core-Web-Vitals-Score schützt.