Tokenlabor

Platzhalterbild-Generator

Der Platzhalterbild-Generator erstellt Dummy-Bilder in jeder Größe mit Farbe und Text, als PNG, JPG, WebP, SVG oder Data-URI zum Einbetten.

Vorschau
Vorschau des Platzhalterbildes
SVG-Code
Data-URI für src oder CSS

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Dummy-Bilder für Layouts und Tests

Der Platzhalterbild-Generator erzeugt Bilder in genau der Größe, die ein Layout braucht, mit Hintergrundfarbe und Beschriftung. Standardmäßig steht die Größe im Bild, zum Beispiel „800 × 450“, damit man in Entwürfen sofort sieht, welches Format später hineingehört. Sie können ein Platzhalterbild erstellen als PNG, JPG, WebP oder SVG.

Ein Dummy-Bild ist nützlich für Wireframes, Prototypen, Tests von responsiven Layouts, Vorlagen für Redaktionen oder als Bildplatzhalter, solange das echte Foto fehlt. Statt einen externen Placeholder Image-Dienst einzubinden, der bei jedem Seitenaufruf angefragt wird und Besucherdaten sieht, legen Sie die Datei einfach in Ihr Projekt. Ein Platzhalter SVG ist besonders klein und lässt sich als Data-URI direkt in HTML oder CSS einsetzen. Für Daten-URIs aus beliebigen Dateien gibt es den Data-URI-Generator.

Die automatische Schriftgröße richtet sich nach der kleineren Bildseite und der Textlänge. Sehr große Bilder (über 8000 Pixel Kantenlänge) begrenzt das Werkzeug, weil Browser Canvas-Flächen nicht beliebig groß anlegen. Der Text wird im SVG korrekt maskiert, Sonderzeichen wie & und < sind also kein Problem.

Anleitung: Platzhalterbild-Generator in 4 Schritten

  1. Breite und Höhe in Pixeln eintragen oder eine Schnellwahl wie 1200 × 630 (Open Graph) nutzen.
  2. Das Format wählen: PNG, JPG, WebP oder SVG.
  3. Hintergrund, Textfarbe, Schriftgröße und optional einen eigenen Text festlegen; ohne Text steht die Größe im Bild.
  4. Das Bild herunterladen oder SVG-Code und Data-URI kopieren.

Typische Anwendungsfälle

  • Wireframes und Prototypen mit Bildflächen in der richtigen Größe füllen.
  • Responsive Layouts mit Bildern verschiedener Seitenverhältnisse testen.
  • Einer Redaktion eine Vorlage im Open-Graph-Format 1200 × 630 für Vorschaubilder geben.
  • Testdaten für Shops oder Kataloge mit Produktbild-Platzhaltern versehen.
Fragen

Häufige Fragen

Wofür brauche ich ein Platzhalterbild?

Für Entwürfe, Prototypen und Tests, solange die echten Bilder fehlen. Die angezeigte Größe hilft, später das richtige Format zu liefern.

Warum nicht einfach einen Placeholder-Dienst verlinken?

Externe Dienste können ausfallen, verlangsamen die Seite und erhalten bei jedem Aufruf die IP-Adresse Ihrer Besucher. Eine eigene Datei oder ein SVG als Data-URI vermeidet das.

Welches Format soll ich wählen?

SVG ist am kleinsten und bleibt in jeder Größe scharf. PNG eignet sich, wenn ein Programm ein Pixelbild verlangt; JPG und WebP sind für große Flächen sparsamer.

Kann ich den Data-URI direkt in HTML nutzen?

Ja, zum Beispiel als src eines img-Elements oder in CSS als background-image: url("…"). Der SVG-Data-URI ist URL-kodiert und damit kürzer als Base64.

Welche Bildgröße brauche ich für Open Graph?

Üblich sind 1200 × 630 Pixel, also ein Seitenverhältnis von etwa 1,91 : 1. Facebook, LinkedIn und viele Messenger zeigen dieses Format als großes Vorschaubild an.

Wie verhindere ich, dass die Seite beim Laden von Bildern springt?

Im img-Element width und height angeben oder die Fläche per CSS mit aspect-ratio reservieren. Ein Platzhalter in der richtigen Größe zeigt schon im Entwurf, wie viel Platz das Bild braucht.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen