Placeholder Service — Anwendungsbeispiele

Zurück zur Übersicht: Placeholder Service · Tool live öffnen: www.jpkc.com/tools/ph/

Das Manual erklärt jede Option und das vollständige URL-Schema im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben Schritt für Schritt, mit dem fertigen Markup zum Übernehmen. Die Oberfläche des Tools ist auf Englisch — Karten- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise.

Beispiel 1: Der Standard-Platzhalter — 600 × 400 in Grau

Der Klassiker: ein neutrales graues Rechteck in einer festen Größe, das die Maße anzeigt.

Öffne den Placeholder Service. Setz in Dimensions die Breite auf 600 und die Höhe auf 400.
In Colors wählst du einen hellen Hintergrund (z. B. cccccc) und eine dunklere Textfarbe (z. B. 333333).
Lass Custom Text leer — dann zeigt das Bild automatisch seine Maße als „600 x 400".
Klick auf Update Preview, um die Vorschau zu laden, und kopier dir aus Direct URL die Adresse oder aus Generated Code den fertigen <img>-Tag.

Die direkte URL sieht dann so aus — du kannst sie sogar von Hand tippen, ohne die Oberfläche:

https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/

Den passenden Bild-Tag liefert das Tool gleich mit:

<img src="https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/" alt="600x400 placeholder" width="600" height="400">

Beispiel 2: Markenfarben plus eigener Text

Für ein Mockup, das schon nach „deiner" Seite aussieht, gibst du Platzhalter in den Markenfarben aus und beschriftest sie.

Maße einstellen (z. B. 800 × 600).
In Colors die Markenfarbe als Background Color setzen (z. B. das dunkle 264653) und eine kontrastreiche Text Color (z. B. das warme e9c46a). Die Swatches im Farbwähler bieten dafür eine fertige Palette.
In Text Options unter Custom Text einen Begriff eintippen, etwa Hero Image. Erlaubt sind Buchstaben, Zahlen und Leerzeichen.
Lass Show resolution aktiv, wenn du Text und Maße willst — dann rendert das Bild zweizeilig: oben „Hero Image", darunter „800 x 600".

Die URL kodiert das Leerzeichen als +:

https://www.jpkc.com/tools/ph/?800x600-264653-e9c46a-Hero+Image/

Beispiel 3: Platzhalter direkt in HTML einbinden

Du musst nichts herunterladen — die URL gehört direkt ins src-Attribut. Setz immer width und height, damit das Layout nicht springt (das Tool schreibt sie automatisch mit):

<figure>
	<img
		src="https://www.jpkc.com/tools/ph/?1200x630-3c4955-eeeeee-Cover/"
		alt="Platzhalter für das Titelbild"
		width="1200"
		height="630">
	<figcaption>Titelbild folgt</figcaption>
</figure>

Weil der Server ein langes Cache-Header mitschickt, lädt derselbe Platzhalter beim zweiten Aufruf aus dem Browser-Cache. Brauchst du mehrere gleich große Dummys, variier einfach den Text — …-Bild+1/, …-Bild+2/ — und behalt Maße und Farben bei.

Beispiel 4: Als CSS-Hintergrund über die SVG-Data-URI

Für einen Platzhalter, der keinen externen Request auslöst und verlustfrei skaliert, nimmst du die SVG-Ausgabe.

Stell Maße, Farben und Text wie gewünscht ein.
Geh zur Karte SVG Output und öffne den Tab Data URI (CSS).
Kopier die fertige Zeile und setz sie in dein Stylesheet:

.placeholder {
	background-image: url('data:image/svg+xml,...');
	background-size: cover;
}

Den vollständigen Data-URI-String liefert das Tool — er enthält die komplette SVG-Grafik inline. Alternativ holst du dir im Tab IMG Tag ein <img> mit eingebettetem SVG, das ebenfalls ohne externe Datei auskommt, oder lädst die Grafik per Download SVG als Datei herunter.

Für ein Vorschaubild in exakt der richtigen Plattform-Größe musst du die Maße nicht nachschlagen.

Öffne in Dimensions das Preset-Dropdown Social Media und wähle z. B. Instagram Square (1080 × 1080) oder YouTube Thumbnail (1280 × 720). Breite und Höhe werden sofort gesetzt.
Farben und Text nach Wunsch anpassen — etwa Thumbnail als Custom-Text in großer Schrift.
Über Text Size auf large oder xlarge stellen, damit die Beschriftung auch in der Verkleinerung lesbar bleibt.

Die feste Textgröße landet als Query-Parameter in der URL:

https://www.jpkc.com/tools/ph/?1280x720-993366-eeeeee-Thumbnail/&size=xlarge

Beispiel 6: Reine Farbfläche oder nur Text

Manchmal willst du gar keine Beschriftung — oder nur deinen Text, ohne die Maße.

Nur Farbe, kein Text: Schalte Show text on image aus. Das Bild wird eine glatte Fläche — gut als farbiger Block in einem Layout. In der URL erscheint &notext=1:
```
https://www.jpkc.com/tools/ph/?300x250-2a9d8f-2a9d8f/&notext=1
```
Nur Text, ohne Maße: Trag einen Custom Text ein und schalte Show resolution aus. Jetzt zeigt das Bild allein deinen Text (einzeilig), die „W x H"-Zeile entfällt. In der URL steht &nodim=1:
```
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Sale/&nodim=1
```
Beachte: Die Maße lassen sich nur ausblenden, wenn ein Custom-Text gesetzt ist — sonst hätte das Bild gar keinen Text mehr, und der Schalter bleibt deaktiviert.

Noch tiefer: die Übersicht zum großen Bild, das Manual für das vollständige URL-Schema und gesammelte Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.