Kurz gesagt: Platzhalterbilder sind graue (oder farbige) Dummy-Grafiken in exakten Maßen, die echte Fotos beim Entwerfen vertreten. Ihr wahrer Wert: Sie reservieren früh den richtigen Platz, damit das Layout vor und nach dem Eintreffen der finalen Assets gleich bleibt — kein Umbruch, keine Überraschungen. Dieser Leitfaden behandelt, wann man sie nutzt, welches Format man exportiert und wie man Layout-Shift vermeidet.

Auf die finale Fotografie zu warten, ehe man ein Layout baut, ist verkehrt herum. Platzhalterbilder lassen Sie zuerst die Maße festlegen und dann echte Visuals einsetzen, ohne dass das Design unter Ihnen wegrutscht.

Platz reservieren, nicht nur füllen

Das Wertvollste an einem Platzhalter ist, exakt die Breite und Höhe zu halten, die das echte Bild nutzen wird. Ist ein Layout um Bilder ohne reservierte Größe gebaut, springt beim Einsetzen der finalen Assets alles — Text bricht um, Buttons wandern, und im Web zeigt sich das als Cumulative Layout Shift. Von Anfang an mit korrekt bemessenen Platzhaltern zu entwerfen bewirkt, dass der finale Tausch das Bild ändert, nicht die Position.

Echte Maße und Seitenverhältnis treffen

Ein Platzhalter nützt nur, wenn er zu dem passt, was kommt. Setzen Sie die tatsächlichen Pixelmaße und das Seitenverhältnis des finalen Bildes — ein 16:9-Hero, ein 1:1-Avatar, ein 4:3-Thumbnail — damit das Mockup die Realität spiegelt. Jeden Platzhalter mit seiner Größe zu beschriften (viele Generatoren drucken sie aufs Bild) erleichtert das Erkennen einer Abweichung in der Prüfung.

Retina und hohe DPI

Auf hochauflösenden Bildschirmen braucht ein Bild mehr physische Pixel als seine Layout-Größe. Einen Platzhalter in 2×, 3× oder 4× zu exportieren lässt Sie testen, wie das echte Asset auf Retina-Displays wirkt, und bestätigt, dass Sie die größere Datei der finalen Version eingeplant haben.

Welches Format exportieren

  • PNG / WebP — für Bildschirm-Mockups und Prototypen.
  • SVG — auflösungsunabhängig, winzig, ideal, wenn die exakte Größe noch fließend ist.
  • Base64 / Data URI — bettet den Platzhalter direkt in HTML oder CSS ein, praktisch für einen eigenständigen Prototyp ohne externe Dateien.

Ein praktischer Ablauf

  1. Listen Sie die Bildplätze Ihres Layouts und ihre echten Maße auf.
  2. Erzeugen Sie sie im Platzhalter-Bild-Generator — nutzen Sie den Stapelmodus, um alle Größen auf einmal zu erzeugen.
  3. Setzen Sie sie ins Design und prüfen Sie, dass beim Ändern der Viewport nichts springt.
  4. Tauschen Sie echte Assets nacheinander ein; weil der Platz reserviert ist, bleibt das Layout stehen.

Brauchen Sie auch Dummy-Text, um den Inhalt um diese Bilder zu füllen, kombinieren Sie den Lorem-Ipsum-Generator, damit das ganze Mockup in realistischer Dichte liest.

Häufige Fehler

  • Platzhalter im falschen Seitenverhältnis nutzen, sodass das echte Bild unerwartet beschnitten wird.
  • Bildmaße nicht reservieren und so Layout-Shift verursachen, wenn die Finalen kommen.
  • Retina-Skalierung ignorieren und die Dateigröße unterschätzen.
  • Einen Platzhalter in Produktion schicken, weil er nie getauscht wurde.