Wie erstelle ich ein Platzhalterbild in einer exakten Größe?

Geben Sie Breite (px) und Höhe (px) ein, wählen Sie Farben oder ein Farbthema und klicken Sie dann auf PNG herunterladen, JPG herunterladen oder SVG herunterladen. Standardmäßig zeigt das Bild seine Abmessungen, z. B. 800 x 600, als Beschriftung.

Was ist das größte Platzhalterbild, das ich erzeugen kann?

Breite und Höhe müssen jeweils zwischen 1 und 4000 Pixeln liegen. Werte außerhalb dieses Bereichs zeigen den Fehler Breite und Höhe müssen zwischen 1 und 4000 px liegen.

Wie füge ich ein Platzhalterbild direkt in HTML ein, ohne eine Datei zu verwenden?

Klicken Sie auf Als Data-URL kopieren und fügen Sie es als src-Wert in ein img-Tag ein. Sie können auch HTML-Snippet kopieren oder CSS-Hintergrund kopieren verwenden. Es wird kein externer Bild-Host benötigt.

Kann ich Standardgrößen für soziale Medien oder Web erzeugen?

Ja. Zu den voreingestellten Größen gehören Instagram-Beitrag, Instagram-Story, Twitter-Karte, Open Graph, YouTube-Vorschaubild, Facebook-Titelbild und E-Mail-Kopfzeile. Alle Voreinstellungen herunterladen (ZIP) speichert alle elf als PNG-Dateien.

Wie bringe ich eigenen Text oder diagonale Linien auf das Platzhalterbild?

Geben Sie eine Beschriftung in das Feld Benutzerdefinierter Text ein, z. B. Hero-Bild, anstatt die Abmessungen anzuzeigen. Aktivieren Sie Diagonale Linien anzeigen (X), um schwache Diagonalen zu zeichnen. Langer Text wird automatisch verkleinert, um in die Breite zu passen.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🖼️

Platzhalterbild-Generator – kostenlos

Generieren Sie farbige Platzhalterbilder mit benutzerdefinierten Abmessungen, Text und Farben. Standardgrößen für soziale Medien, Mockups und Design-Comps.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Breite (px)

Höhe (px)

Voreingestellte Größen

Farbthemen

Hintergrund

Text / Linien

Eigener Text (leer lassen für Abmessungen)

Abmessungen anzeigen, wenn kein TextDiagonale Linien anzeigen (X)

💡 Für HTML-Mockups: Option „Als Data-URL kopieren" verwenden und in <img src=\"...\"> einfügen. Für Figma/Sketch-Designs das PNG herunterladen und hineinziehen.

Häufige Anwendungen

Platzhalterbilder für Design-MockupsGenerieren Sie farbige Felder für die Verwendung in Figma, Sketch oder Web-Design-Mockups, bevor echte Bilder bereit sind.
Inline-Platzhalter für HTML-PrototypenVerwenden Sie "Als Daten-URL kopieren", um Platzhalterbilder direkt in HTML für schnelle Prototypen einzufügen.
Platzhalter für CMS-InhaltsplätzeVerwenden Sie beim Demonstrieren einer CMS-Vorlage Platzhalterbilder statt echtem Inhalt für vertrauliche Vorschauen.
Social-Media-BildvorlagenGenerieren Sie ordnungsgemäß dimensionierte Platzhalter für Instagram-, Facebook-, Twitter- und LinkedIn-Post-Vorlagen.
CSS-Layout-TestbilderGenerieren Sie Bilder mit extremen Seitenverhältnissen zum Stresstesten responsiver CSS-Layouts.

So funktioniert es

Alles geschieht in Ihrem Browser mit der HTML Canvas API und selbst geschriebenem SVG-Markup – kein Server, kein Upload, kein Drittanbieterdienst. Sie legen Abmessungen, Farben und Beschriftung fest, und das Tool malt das Bild in Echtzeit direkt auf ein Canvas-Element und serialisiert es bei Bedarf als PNG, JPEG oder SVG.

1
Abmessungen und Farben festlegen
Geben Sie Breite und Höhe ein (jeweils 1–4000 px) oder wählen Sie eine von elf Voreinstellungen für gängige Social-Media- und Designgrößen. Wählen Sie Hintergrund- und Textfarbe aus den integrierten Themen oder geben Sie einen beliebigen Hex-Wert ein; eine native Farbauswahl und ein geprüftes Textfeld bleiben synchron.
2
Die Canvas API rendert die Vorschau sofort
Ein React-Effekt ruft bei jeder Änderung drawPlaceholder() auf. Diese Funktion nutzt CanvasRenderingContext2D, um das Rechteck mit der Hintergrundfarbe zu füllen, optional feine diagonale Fadenkreuzlinien mit 15 % Deckkraft zu zeichnen und dann Ihre Beschriftung zu messen und zu zentrieren – wobei die Schrift automatisch verkleinert wird, bis sie in 90 % der Canvas-Breite passt.
3
Export als PNG, JPEG oder SVG
PNG- und JPEG-Downloads rufen canvas.toDataURL() auf, wandeln das Base64-Ergebnis im Speicher in ein Blob um und starten den Download – alles synchron innerhalb der Benutzeraktion, damit die Download-Regeln von iOS Safari erfüllt sind. Der SVG-Export erstellt eine eigenständige SVG-Zeichenkette mit passendem rect, optionalen Diagonalen und einem text-Element und speichert sie als .svg-Datei.
4
Stapelexport und Kopierkürzel
Die Schaltfläche „Alle Voreinstellungen herunterladen“ importiert JSZip dynamisch, rendert jede der elf Voreinstellungsgrößen mit derselben Zeichenfunktion auf ein nicht sichtbares Canvas und packt alle PNGs in ein einziges ZIP. Kopier-Schaltflächen liefern eine PNG-Data-URL, ein Inline-SVG-img-Tag oder eine CSS-background-image-Deklaration zum sofortigen Einfügen in Code.

Platzhalterbild-Generator – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

Lorem-Ipsum-Generator

Bild-Kompressor

Bildgröße ändern

Häufige Fragen