Über dieses Tool
Ein Platzhalter ist das, was eine Seite in dem Sekundenbruchteil zeigt, bevor das eigentliche Bild fertig geladen ist — ein verschwommener Abklatsch des kommenden Fotos oder einfach ein einfarbiges Rechteck —, damit das Layout nicht springt und die Seite sich bereits lebendig anfühlt, während die echte Ressource noch unterwegs ist. Der Stil des „verschwommenen Fotos" wird oft LQIP (Low-Quality Image Placeholder) genannt: Das Ausgangsfoto wird auf eine Handvoll Pixel verkleinert — 20 bis 40 px an der langen Seite reichen völlig —, optional mit einem Hauch Unschärfe weichgezeichnet und dieses winzige Ergebnis neu kodiert. Bei so wenigen Pixeln gibt es kaum etwas zu kodieren, sodass die Ausgabe meist nur ein paar hundert Bytes bis wenige Kilobyte groß ist — klein genug, um sie direkt als base64-Data-URI einzubetten, statt sie als separate Datei nachzuladen.
Den Platzhalter als Data-URI einzubetten bedeutet, dass er direkt im HTML oder CSS der Seite selbst mitreist — kein zusätzlicher Netzwerk-Roundtrip nur, um etwas zu zeigen, bevor das echte Foto eintrifft. Zieht man dieses winzige, leicht unscharfe Ergebnis per CSS auf die tatsächliche Anzeigegröße des Bildes, wirkt es wie eine sanfte Vorschau des kommenden Fotos — genau dieser Trick steckt hinter dem Einblend-Ladeeffekt auf Seiten wie Medium und in vielen Produktfoto-Galerien. Wenn noch kein Ausgangsfoto vorhanden ist — ein Skeleton-Screen, ein grober Layout-Entwurf oder reservierter Platz für vom Nutzer noch nicht hochgeladene Inhalte —, wechselt man in den zweiten Modus, um stattdessen einen einfarbigen, Verlaufs- oder gestreiften Platzhalter in beliebiger Pixelgröße zu erzeugen, mit demselben sofortigen Download und derselben kopierbaren Data-URI. Alles läuft lokal im Browser; nichts wird jemals hochgeladen.
Häufige Fragen
Wie "klein" ist "klein" für die LQIP-Daten-URI?
Eine typische Ausgabe bei den standardmäßig winzigen Abmessungen (deutlich unter 50px auf der längeren Seite) liegt irgendwo zwischen ein paar hundert Bytes und etwa 1-2KB als Base64-Zeichenfolge — klein genug, um direkt inline in Ihr HTML/CSS/JS eingebettet zu werden, ohne Ihrer Seite ein nennenswertes Gewicht hinzuzufügen, was der ganze Sinn der LQIP-Technik ist: SOFORT etwas anzuzeigen, während das echte Bild in voller Größe im Hintergrund lädt.
Sollte ich den "Aus Foto"-Modus oder den "Einfarbig/Farbverlauf"-Modus verwenden?
Verwenden Sie "Aus Foto", wenn Sie das echte Bild bereits haben und einen Platzhalter möchten, der visuell andeutet, was kommt (eine unscharfe Vorschau des tatsächlichen Inhalts) — dies bietet Benutzern ein reibungsloseres, informativeres Ladeerlebnis. Verwenden Sie "Einfarbig/Farbverlauf", wenn Sie einen generischen Platzhalter benötigen, BEVOR das echte Bild bekannt oder bereit ist (z. B. ein Skelett-Ladezustand für eine Galerie, deren Fotos noch nicht ausgewählt wurden), oder einfach etwas Einfacheres und noch Kleineres als ein LQIP möchten.