crop_original Platzhalterbild-Generator star

Warum Designer und Entwickler Platzhalterbilder verwenden

Lange bevor die echten Fotos, Illustrationen oder Produktaufnahmen einer Website fertig sind, muss trotzdem jemand sehen, wie die Seite mit Bildern darin aussieht. Ein Layout, das ausschließlich mit leeren grauen Kästen oder fehlenden Bildsymbolen aufgebaut wird, ist irreführend — Ränder, Seitenverhältnisse und der Textumbruch um ein Bild herum verhalten sich anders, sobald tatsächlich etwas diesen Platz einnimmt. Ein Platzhalterbild löst das, indem es als Stellvertreter für das spätere Asset dient: Es hat die richtige Breite und Höhe, sitzt an der richtigen Stelle im Raster und erlaubt einem Designer oder Entwickler zu beurteilen, ob das Layout funktioniert, ohne dass der endgültige Inhalt bereits existieren muss. Der Inhalt des Platzhalters selbst — seine Farbe, seine Beschriftung — ist bewusst nebensächlich; entscheidend ist, dass seine Abmessungen und sein Seitenverhältnis dem entsprechen, was das echte Bild später haben wird.

Genau deshalb funktionieren beliebte Platzhalterbild-Dienste traditionell so, dass die Größe direkt in eine URL kodiert wird: Man fordert etwa ein 800×600-Bild an und erhält ein graues Rechteck zurück, auf dem „800 × 600" steht. Diese aufgedruckte Größe ist selbst nützlich: Sie lässt jeden, der einen Blick auf den Entwurf wirft, sofort bestätigen, dass der Bildplatz die vorgesehene Größe hat, ohne den HTML-Code zu prüfen. Dieses Tool folgt derselben Konvention — lassen Sie das Textfeld leer, und es beschriftet das Rechteck automatisch mit seiner eigenen Breite und Höhe, oder geben Sie eigenen Text ein, um eine Bildunterschrift, einen Platzhalter-Markennamen oder etwas anderes zu testen, das in diese Box passen soll.

Warum SVG oft ein besseres Platzhalterformat ist als PNG

Ein PNG-Platzhalter ist ein Raster aus Pixeln: Ein einfarbiges 800×600-Rechteck mit Text muss trotzdem für alle 480.000 dieser Pixel Farbinformationen speichern, obwohl die überwiegende Mehrheit davon eine einzige, einheitliche Farbe ist. Ein SVG-Platzhalter dagegen besteht überhaupt nicht aus Pixeln — es ist ein kurzer Textblock, der Formen beschreibt: „Zeichne ein so breites und hohes Rechteck, gefüllt mit dieser Farbe, und zeichne dann diesen Text mittig hinein." Für einen einfachen, einfarbigen Platzhalter mit Text, wie ihn dieses Tool erzeugt, ist diese Beschreibung typischerweise nur wenige hundert Byte groß — deutlich kleiner als das entsprechende PNG. SVG hat einen zweiten Vorteil, der für Platzhalter in einem responsiven Layout noch wichtiger ist: Weil es durch mathematische Formanweisungen und nicht durch ein festes Pixelraster definiert wird, lässt es sich verlustfrei und ohne Pixelbildung auf jede beliebige Größe skalieren, während ein über seine native Auflösung hinaus gestrecktes PNG sichtbar unscharf wird.

Beide Formate werden hier auf dieselbe Weise erzeugt: Ein Rechteck wird gezeichnet und mit der gewählten Hintergrundfarbe gefüllt, und der Beschriftungstext wird sowohl horizontal als auch vertikal mittig darin platziert, wobei seine Größe proportional zu den Boxmaßen skaliert wird, damit ein kleiner Platzhalter nicht von überdimensioniertem Text erdrückt wird. Die PNG-Version wird auf einem HTML5-Canvas-Element gerendert und mit canvas.toDataURL() exportiert; die SVG-Version wird direkt als XML-String mit einem <rect>- und einem <text>-Element erzeugt und als Datei heruntergeladen. Anders als Platzhalter-Dienste, die ein Bild von einer entfernten URL abrufen — bei jedem Seitenaufruf also eine echte Netzwerkanfrage stellen —, läuft hier alles lokal: Es verlässt keine Anfrage jemals den Browser, sodass nichts fehlschlagen kann, falls dieser externe Dienst ausfällt, und es gibt kein von einem fremden Server auferlegtes Größenlimit.