JPKCom DB

Placeholder Service — Anwendungsbeispiele

Praxisnahe Durchläufe mit dem Placeholder Service: Standard-Platzhalter, Markenfarben mit Text, HTML und CSS, Social-Media-Presets, Retina-WebP und Umlaute.

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.

  1. Öffne den Placeholder Service. Setz in Dimensions die Width auf 600 und die Height auf 400.
  2. In Colors wählst du einen hellen Background (z. B. cccccc) und eine dunklere Text-Farbe (z. B. 333333). Die Kontrastanzeige darunter meldet Contrast 7.87:1 — gut lesbar.
  3. Lass Custom text leer — dann zeigt das Bild automatisch seine Maße als „600 x 400".
  4. Die Preview aktualisiert sich von selbst. Kopier dir aus Image URL die Adresse oder aus HTML den fertigen <img>-Tag.

Die direkte URL sieht dann so aus — du kannst sie sogar von Hand tippen, ohne die Oberfläche (die Kurzform ?600x400-ccc-333/ funktioniert genauso):

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="600×400 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.

  1. Maße einstellen (z. B. 800 × 600).
  2. In Colors die Markenfarbe als Background setzen (z. B. das dunkle 264653) und eine kontrastreiche Text-Farbe (z. B. das warme e9c46a). Die Swatches im Farbwähler bieten dafür eine fertige Palette; die Kontrastanzeige bestätigt mit rund 6:1, dass die Kombination lesbar ist.
  3. In der Karte Text unter Custom text einen Begriff eintippen, etwa Hero Image. Erlaubt sind auch Umlaute und Satzzeichen.
  4. Lass Also show the size (width × height) aktiv, wenn du Text und Maße willst — dann zeigt das Bild oben „Hero Image" und darunter „800 x 600".

Die URL kodiert das Leerzeichen als +:

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

Tippst du einen längeren Text, etwa eine ganze Bildunterschrift, bricht das Tool ihn um und verkleinert die Schrift, bis er mit etwas Rand ins Bild passt — du musst dafür nichts einstellen.

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):

html
<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 einen langen 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.

  1. Stell Maße, Farben und Text wie gewünscht ein.
  2. Geh zur Karte SVG (no server needed) und öffne den Tab CSS.
  3. 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 ein <img> mit eingebettetem SVG, das ebenfalls ohne externe Datei auskommt, oder lädst die Grafik per Download SVG als Datei herunter.

Beispiel 5: Social-Media-Mockup über ein Preset

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

  1. Öffne in Dimensions das Preset-Dropdown Social media und wähle z. B. YouTube thumbnail (1280 × 720), Instagram square (1080 × 1080) oder Story / Reel (1080 × 1920). Breite und Höhe werden sofort gesetzt.
  2. Farben und Text nach Wunsch anpassen — etwa Thumbnail als Custom-Text.
  3. Text size bleibt am besten auf Auto (fits the image): Die Schrift wächst mit der kürzeren Bildseite, beim Thumbnail sind das schon 96 px. Willst du eine dezentere Beschriftung, wählst du eine feste Obergrenze wie Medium (max. 32 px).

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

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

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 the 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 Also show the size (width × height) aus. Jetzt zeigt das Bild allein deinen Text, 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.

Beispiel 7: Retina-Platzhalter als WebP mit srcset

Auf hochauflösenden Displays wirkt ein Platzhalter in einfacher Pixeldichte unscharf. Das Tool liefert dir die scharfe Variante samt passendem Markup.

  1. Stell Maße, Farben und Text ein, etwa 800 × 600 mit Hero Image.
  2. In der Karte Image file wählst du unter Format WebP und unter Pixel density 2× (Retina). Das Badge an der Vorschau zeigt jetzt „800 × 600 @2x".
  3. Kopier den Tag aus HTML. Er behält width und height in CSS-Pixeln und bietet über srcset beide Varianten an:
<img src="https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp" srcset="https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp 1x, https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp&amp;scale=2 2x" alt="Hero Image" width="800" height="600">

Der Browser holt sich auf einem Retina-Display das 1600 × 1200 Pixel große Bild, sonst das einfache. Die Image URL zeigt die Adresse der gewählten Pixeldichte, und Download WebP speichert sie als placeholder-800x600@2x.webp. Bietet der Server kein WebP an, fehlt es in der Format-Liste — dann nimmst du PNG oder JPEG.

Beispiel 8: Umlaute, Bindestrich und Pluszeichen im Text

Deutsche Beschriftungen sind kein Problem mehr, solange die Zeichen in der Schrift vorhanden sind.

  1. Tipp unter Custom text etwa Größe – Sommer-Sale 2+1 ein.
  2. Unter dem Feld erscheint „Not in the font, left out: –": Der typografische Gedankenstrich (U+2013) liegt außerhalb von Latin-1 und fehlt auf dem Bild. Umlaut, ß, der normale Bindestrich und das Pluszeichen bleiben erhalten.
  3. Ersetz den Gedankenstrich bei Bedarf durch einen normalen Bindestrich oder einen Doppelpunkt, wenn das Trennzeichen sichtbar sein soll.

Die URL kodiert das Ganze automatisch — den Bindestrich als %2D, das Pluszeichen als %2B, Umlaute als UTF-8:

https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Gr%C3%B6%C3%9Fe+Sommer%2DSale+2%2B1/

Baust du solche URLs von Hand, gilt dieselbe Regel: Ein unkodierter - im Text würde als weiterer Teil der Adresse gelesen, und der Server antwortet mit HTTP 400.

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.