Placeholder Service

Platzhalter-Bilder ohne Bildbearbeitung

Der Placeholder Service erzeugt dir graue (oder beliebig eingefärbte) Platzhalter-Bilder in jeder Größe — für Prototypen, Mockups, Demos und Layout-Tests, bei denen das echte Bild noch fehlt. Du stellst Maße, Hintergrund- und Textfarbe sowie einen optionalen Text ein und bekommst sofort eine fertige Grafik, einen <img>-Tag und eine direkte URL zum Kopieren.

Das löst ein alltägliches Problem in der Web-Entwicklung: Du baust ein Layout, aber die finalen Bilder sind noch nicht da. Statt aus einem Grafikprogramm rasch ein leeres Rechteck zu exportieren, holst du dir hier ein passgenaues Platzhalter-Bild — mit der richtigen Auflösung, in deinen Markenfarben, beschriftet mit den Maßen oder einem eigenen Text.

Gedacht ist das Tool für alle, die Seiten und Layouts bauen: Entwicklerinnen und Entwickler, die schnell ein Bild der richtigen Größe in ein Template setzen; Designerinnen und Designer, die Mockups mit konsistenten Dummy-Bildern füllen; und alle, die für Social-Media-Vorlagen, Werbebanner oder Geräte-Mockups eine exakte Pixelgröße brauchen. Kostenlos, ohne Account, direkt im Browser.

Ein echtes URL-Schema: Bilder per Adresse abrufen

Anders als die meisten Tools hat der Placeholder Service ein echtes, öffentlich aufrufbares URL-Schema. Du musst die Oberfläche gar nicht benutzen — ein Platzhalter-Bild entsteht allein durch den Aufruf einer Adresse nach diesem Muster:

https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE/
https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE-Text/

Konkret:

https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/

Der Server erzeugt daraus on-the-fly ein PNG-Bild — Maße 1 bis 3200 Pixel je Seite, Farben als 6-stellige Hex-Werte (ohne #), Leerzeichen im Text als +. Damit kannst du Platzhalter direkt in HTML, CSS oder Markdown verlinken, ohne je eine Datei herunterzuladen. Die ausgelieferten Bilder tragen ein Cache-Header für ein Jahr, sind also CDN- und Browser-cache-freundlich. Das vollständige Schema mit allen Parametern steht im Manual.

Was du einstellen kannst

In der Oberfläche (die Tool-Labels sind englisch) konfigurierst du dein Platzhalter-Bild über ein paar klar gegliederte Karten:

Dimensions — Breite und Höhe (je 1–3200 px), ein Swap-Knopf zum Vertauschen und Dropdowns mit fertigen Presets (Social Media, Web Banners, Devices, Common).
Colors — Hintergrund- und Textfarbe über einen Farbwähler (Hex, mit Swatches), ebenfalls mit Swap-Knopf.
Text Options — Text ein-/ausblenden, die Maße-Zeile ein-/ausblenden, ein eigener Custom Text (Buchstaben, Zahlen, Leerzeichen) und eine Text Size (Auto, Small, Medium, Large, Extra Large).
Vorschau & Ausgabe — eine Preview (per Knopf aktualisiert), der fertige <img>-Tag, die direkte URL und Copy-Buttons für beides.

PNG vom Server, SVG aus dem Browser

Zwei Wege führen zum Bild, und sie unterscheiden sich technisch:

PNG wird serverseitig erzeugt — genau das liefert das URL-Schema oben aus, und genau das lädst du mit Download PNG herunter.
SVG entsteht rein im Browser: Das Tool baut aus deinen Einstellungen eine SVG-Grafik und bietet sie in drei Formen an — als SVG-Quelltext, als Data-URI für CSS (background-image) und als fertigen IMG-Tag mit eingebettetem Data-URI. Mit Download SVG speicherst du sie als Datei. Diese SVG-Variante braucht keinen Server-Request und skaliert verlustfrei — ideal für CSS-Hintergründe und gestochen scharfe Platzhalter.

Voreingestellte Größen (Presets)

Du musst die gängigen Maße nicht auswendig kennen — die Presets liefern sie fertig, gruppiert in vier Dropdowns: Social Media (z. B. Facebook Post 1200 × 630, Instagram Square 1080 × 1080, YouTube Thumbnail 1280 × 720), Web Banners (z. B. Leaderboard 728 × 90, Medium Rectangle 300 × 250, Billboard 970 × 250), Devices (z. B. iPhone 15 Pro 393 × 852, iPad Pro 1024 × 1366, Desktop HD 1920 × 1080) und Common (z. B. Square 150/300/600, Thumbnail 150 × 100, Hero 1200 × 400). Ein Klick setzt Breite und Höhe — danach passt du Farben und Text an.

Jetzt ausprobieren

→ Placeholder Service öffnen — Maße wählen, Farben setzen, Text eintippen, URL oder <img>-Tag kopieren. Oder ganz ohne Oberfläche: eine Adresse nach dem URL-Schema in dein Markup schreiben und der Server liefert das Bild. Ohne Account, kostenlos, direkt im Browser.