Wireframe-Layouts vor Asset-Lieferung. Storybook-/Figma-Exporte mit Platzhaltern. Lazy-Loading oder Aspect-Ratio-CSS testen. Externen Placeholder-Service in CSP-strikten Projekten ersetzen.

Platzhalter-Bild-Generator

Inline-SVG-Platzhalterbilder in beliebiger Größe mit eigenem Text und Farben. Als Data-URI oder SVG-Download.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Wofür ist das?

Beim Layouten braucht man oft Bilder einer bestimmten Größe, bevor das echte Asset fertig ist. Externe Dienste wie via.placeholder.com funktionieren, fügen aber einen externen Request hinzu. Dieses Tool liefert ein eigenständiges Inline-SVG mit Größe und Label deiner Wahl — als Data-URI oder Download. Nichts verlässt den Browser.

Wann verwenden

Wireframe-Layouts vor Asset-Lieferung.
Storybook-/Figma-Exporte mit Platzhaltern.
Lazy-Loading oder Aspect-Ratio-CSS testen.
Externen Placeholder-Service in CSP-strikten Projekten ersetzen.

Häufige Stolperfallen

SVG ist kein Raster. Für PNG: Screenshot oder Konverter.
Lange Data-URIs sind unhandlich in Tools/Diffs — bei großen Mockups SVG-Download bevorzugen.
Auto-Label ist nicht übersetzt. Bei Bedarf eigenen Text eingeben.
Farben nur als HTML-Hex. Für rgba() SVG nachträglich bearbeiten.
Größe ist intrinsisch. CSS-Skalierung mit preserveAspectRatio="none".
Nicht in Produktion vergessen.