Wie erzeuge ich ein Platzhalterbild in einer bestimmten Größe?

Breite und Höhe oben eintragen, das Bild entsteht sofort. Als SVG oder PNG herunterladen oder den Data-URI kopieren.

Warum ein Data-URI statt eines Dienstes?

Er spart eine Anfrage je Bild, funktioniert offline und bricht nicht, wenn ein externer Dienst ausfällt oder drosselt.

SVG oder PNG für Platzhalter?

SVG für den Bildschirm: wenige hundert Byte und in jeder Größe scharf. PNG, wenn ein Werkzeug ein Rasterbild verlangt.

Welche Größe braucht ein Open-Graph-Bild?

1200 mal 630 Pixel, die enthaltene Vorgabe: Darauf schneiden Facebook, LinkedIn und die meisten Vorschauen zu.

Platzhalterbild-Generator

Erzeuge Platzhalterbilder in jeder Größe – als SVG, PNG oder Data-URI zum direkten Einfügen.

Der Platzhalterbild-Generator läuft vollständig in deinem Browser: Das SVG entsteht und rastert auf deinem Gerät, nichts wird hochgeladen.

Open-Graph-Generator öffnen

Über Platzhalterbild-Generator

Platzhalterdienste setzen mitten in ein Layout, das du noch entwirfst, eine Netzwerkanfrage – eine Seite voll davon ist langsam, offline unbrauchbar und einen Ausfall vom Kaputtsein entfernt. Dasselbe graue Rechteck lokal zu erzeugen beseitigt die Abhängigkeit: Das Ergebnis ist ein SVG, das du speichern, zu PNG rastern oder als Data-URI ganz ohne Anfrage einfügen kannst. Die Größen decken ab, was tatsächlich gebraucht wird – Social Cards, Werbeformate, Avatare, Header – und die Beschriftung zeigt standardmäßig die Maße.

Funktionen

Beliebige Breite und Höhe, mit Vorgaben für Social, Werbung und Allgemeines
Eigene Hintergrund- und Textfarbe, mit lesbarer Voreinstellung
Beschriftung zeigt die Maße oder deinen eigenen Text
Eckenradius und das diagonale Kreuz aus Wireframes
Download als SVG oder in voller Auflösung gerastert als PNG
Data-URI, der offline funktioniert und keine Anfrage kostet

So verwendest du Platzhalterbild-Generator

Breite und Höhe eingeben oder eine Vorgabe wählen
Farben und Beschriftung festlegen oder die Maße stehen lassen
Data-URI kopieren oder SVG bzw. PNG herunterladen
HTML-, CSS- oder JSX-Schnipsel ins Layout einfügen

Beispiel

Eingabe

1200 × 630 · #e5e7eb background

Ausgabe

<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />

Ein Open-Graph-Platzhalter als Data-URI: keine Anfrage, kein Ausfall, offline identisch.

Häufige Fehler & Fehlerbehebung

Der Data-URI zerlegt die CSS-Datei. — In doppelte Anführungszeichen innerhalb von url() setzen, wie es der CSS-Schnipsel hier tut.
Das PNG ist auf einem Retina-Display unscharf. — In doppelter Anzeigegröße erzeugen: Es wird genau in den eingegebenen Pixelmaßen gerastert.

Häufig gestellte Fragen

Wie erzeuge ich ein Platzhalterbild in einer bestimmten Größe?: Breite und Höhe oben eintragen, das Bild entsteht sofort. Als SVG oder PNG herunterladen oder den Data-URI kopieren.
Warum ein Data-URI statt eines Dienstes?: Er spart eine Anfrage je Bild, funktioniert offline und bricht nicht, wenn ein externer Dienst ausfällt oder drosselt.
SVG oder PNG für Platzhalter?: SVG für den Bildschirm: wenige hundert Byte und in jeder Größe scharf. PNG, wenn ein Werkzeug ein Rasterbild verlangt.
Welche Größe braucht ein Open-Graph-Bild?: 1200 mal 630 Pixel, die enthaltene Vorgabe: Darauf schneiden Facebook, LinkedIn und die meisten Vorschauen zu.