Platzhalterbild

Wofür Platzhalterbilder gut sind

Wenn eine Seite oder ein Mockup noch keine endgültigen Fotos hat, hält ein Platzhalter mit den genauen Abmessungen das Layout stabil: Die Blöcke „springen“ nicht, sobald das echte Bild kommt, und wer den Entwurf prüft, sieht sofort, wie viel Platz es einnehmen wird. Anders als bei Diensten wie placehold.co oder placekitten wird dieses PNG lokal erzeugt: Es funktioniert auch offline und verschwindet nicht, wenn ein externer Dienst abgeschaltet wird oder nur noch im Schneckentempo läuft.

Gängige Größen, die du kennen solltest

Ein paar wiederkehrende Formate: 1200×630 für Social-Media-Vorschauen mit Open Graph, 1280×720 für Video-Thumbnails im Format 16:9, 1080×1080 für quadratische Instagram-Posts, 300×250 für Werbebanner im Format Medium Rectangle und 150×150 für Avatare. Der Text passt sich der Bildgröße an: Lässt du ihn leer, werden stattdessen die Abmessungen angezeigt, die nützlichste Konvention, um Platzhalter in einem Mockup auf einen Blick zu erkennen.

Warum ein Platzhalter eine Seite stabil hält

Ein Block ohne Bild hat null Höhe, bis das Foto kommt, und wenn es kommt, schiebt es alles andere nach unten: Das ist der Fehler, den Leser als „die Seite springt, während ich sie anschaue“ erleben. Er hat sogar einen Namen in den Messwerten von Google, die ihn als Layoutverschiebung (Layout Shift) messen und als Qualitätsproblem werten.

Ein Platzhalter mit den genauen Abmessungen belegt den Platz vom ersten Moment an, und die Seite bleibt ruhig. Aus demselben Grund gehören zu Bildern auf der fertigen Website immer Angaben zu Breite und Höhe: nicht um ihre Größe festzulegen, sondern um dem Browser zu sagen, wie viel Platz er reservieren soll, bevor er sie überhaupt heruntergeladen hat.

Die wiederkehrenden Größen

1200 mal 630 ist die Vorschau, die beim Teilen eines Links erscheint: Das ist die von den Open-Graph-Metadaten verlangte Größe, und eine Seite ohne sie wird mit einer hässlichen oder leeren Vorschau geteilt. 1280 mal 720 ist 16:9, also Video-Cover und Präsentationen. 1080 mal 1080 und 1080 mal 1920 sind das Quadrat und das Hochformat der sozialen Medien.

Für Bilder in einem Artikel liegt die praktische Größe bei etwa 1600 Pixeln Breite, was die meisten Bildschirme abdeckt, auch solche mit hoher Pixeldichte, ohne riesige Dateien zu erzeugen. Und für Thumbnails reichen 400 Pixel: Ein Bild mit 3000 Pixeln zu laden, um es mit 300 anzuzeigen, ist die häufigste Verschwendung im Web.

Platzhalter oder echtes Bild: wann Schluss ist

Ein grauer Platzhalter mit den Abmessungen darauf dient dem Gestalten: Er zeigt, ob der Text drumherum funktioniert, ob die Proportionen auf dem Handy halten, ob das Raster intakt bleibt. Dafür ist er besser als ein Foto, weil er nicht ablenkt und das Design nicht nach der Schönheit des Bildes beurteilt wird.

Zum Problem wird er erst im Live-Betrieb, wenn er dort übrig bleibt: Das passiert öfter, als man denkt, und eine veröffentlichte Website mit grauen Kästen wirkt verlassen. Halte Platzhalter am besten in einer unverwechselbaren Farbe, damit niemand sie für fertige Inhalte hält.

Die Alternativen und ihre Grenzen

Viele nutzen Online-Dienste zum Erzeugen von Platzhaltern per URL: Sie sind bequem, binden eine Seite aber an eine externe Website, die langsamer werden, sich ändern oder verschwinden kann, und jeder Aufruf verrät diesem Dienst, wer die Seite gerade ansieht. Für einen Prototyp ist das in Ordnung, für eine veröffentlichte Website nicht.

Die leichteste Alternative ist nicht einmal ein Bild, sondern ein farbiges Rechteck aus reinem CSS, mit null Byte Gewicht. Heruntergeladene Platzhalterbilder brauchst du dagegen, wenn die Datei eine echte Datei sein muss: ein Mockup für einen Kunden, eine Präsentation, ein Dokument.

Siehe auch

Für die Abmessungen eines echten Bildes gibt es Bildgröße ändern und Bildgröße und Infos, für die Dateigröße Bild komprimieren. Für Grafik-Entwürfe Zufallsfarbe und Farbverlauf-Generator, und für Blindtext Lorem-Ipsum-Generator.