Placeholder Service

Platzhalter-Bilder ohne Bildbearbeitung

Der Placeholder Service (in der Oberfläche „Placeholder Generator") 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 siehst das Ergebnis sofort in der Live-Vorschau, dazu einen fertigen <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. Langer Text wird automatisch umbrochen und so weit verkleinert, dass er ins Bild passt — bis hinunter auf 5 px Schriftgröße.

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/
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/&format=webp&scale=2

Der Server erzeugt daraus on-the-fly ein Rasterbild — standardmäßig PNG, auf Wunsch WebP oder JPEG (&format=), soweit der Server das Format unterstützt, und mit &scale=2 oder &scale=3 in doppelter bzw. dreifacher Pixeldichte für Retina-Displays. Maße 1 bis 3200 Pixel je Seite, Farben als 6- oder 3-stellige Hex-Werte (ohne #, also auch fff), Leerzeichen im Text als +. Der Text darf Umlaute, ß und Satzzeichen enthalten; einen Bindestrich schreibst du als %2D, weil - die Teile der Adresse trennt, und /, & und # als %2F, %26 und %23. Eine ungültige Adresse beantwortet der Server mit HTTP 400 und einem kurzen Hinweis im Klartext.

Damit kannst du Platzhalter direkt in HTML, CSS oder Markdown verlinken, ohne je eine Datei herunterzuladen. Die ausgelieferten Bilder tragen einen Cache-Header für ein Jahr (immutable), sind also CDN- und browsercache-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 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 Tausch-Knopf. Eine Kontrastanzeige warnt, wenn der Text unter 4,5:1 schwer lesbar wird.
Text — Text ein-/ausblenden, ein eigener Custom text, die Maße-Zeile zusätzlich ein-/ausblenden und eine Text size (Auto oder eine Obergrenze von 16 bis 96 px).
Image file — Format (PNG, WebP, JPEG) und Pixel density (1×, 2× Retina, 3×) sowie die Downloads als Rasterbild oder SVG.
Vorschau & Ausgabe — eine Preview, die sich automatisch aktualisiert, der fertige <img>-Tag (HTML, bei Retina mit srcset), die direkte Image URL mit Copy-Buttons und eine Kurzreferenz des URL format.

Rasterbild vom Server, SVG aus dem Browser

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

PNG, WebP oder JPEG werden serverseitig erzeugt — genau das liefert das URL-Schema oben aus, und genau das lädst du mit dem Download-Knopf herunter (er heißt je nach Format Download PNG, Download WebP oder Download JPEG).
SVG entsteht rein im Browser: Das Tool baut aus deinen Einstellungen eine SVG-Grafik und bietet sie in der Karte SVG (no server needed) in drei Tabs 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.

Beide Wege rechnen mit derselben Schrift (Droid Sans) und derselben Layout-Regel: Rasterbild und SVG zeigen dieselben Zeilen in derselben Schriftgröße.

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. Open Graph / Facebook 1200 × 630, Instagram square 1080 × 1080, Story / Reel 1080 × 1920, 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, Video 16:9 1280 × 720). 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.