# Placeholder Service

> Platzhalter-Bilder mit frei wählbaren Maßen, Hex-Farben und Text erzeugen — per URL-Schema oder als PNG-/SVG-Download. Einstieg zu Manual und Beispielen.

Source: https://www.jpkc.com/db/tools/ph/

## Platzhalter-Bilder ohne Bildbearbeitung

Der [Placeholder Service](https://www.jpkc.com/tools/ph/) 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](https://www.jpkc.com/db/tools/ph/manual/#das-url-schema-die-eigentliche-api).

## 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](https://www.jpkc.com/tools/ph/)** — 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.

## Verwandte JPKCom-Tools

Rund um Platzhalter und Mockups passen diese Tools dazu:

- **[Graphic Editor](https://www.jpkc.com/db/tools/graphic/)** — wenn aus dem Platzhalter eine echte Grafik werden soll: zuschneiden, beschriften, exportieren.
- **[Color Tools](https://www.jpkc.com/db/tools/colors/)** — die richtigen Hex-Werte für Hintergrund- und Textfarbe finden, die du hier einsetzt.
- **[Lorem Ipsum](https://www.jpkc.com/db/tools/lorem-ipsum/)** — Blindtext für dasselbe Mockup, in dem die Platzhalter-Bilder stecken.

---

Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/ph/manual/)** mit dem vollständigen URL-Schema und jeder Option, **[Beispiele](https://www.jpkc.com/db/tools/ph/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/ph/tips/)**.

