Kostenloser Platzhalterbild-Generator

Erstellen Sie individuelle Platzhalterbilder mit erweiterten Hintergründen, Typografie, Retina-Export und Entwickler-Snippets. 100% clientseitig.

Live-Vorschau

Breite (px)

Höhe (px)

Seitenverhältnis sperren

Hintergrundfarbe

Textfarbe

Benutzerdefinierter Text

Verwenden Sie {width}, {height}, {ratio}, {date}, {random} in Ihrem Text.

Voreinstellungen

Hintergrundtyp

Zweite Farbe

Schriftfamilie

Schriftstärke

Buchstabenabstand

Textausrichtung

Vertikale Ausrichtung

Automatische Skalierung

Mehrzeiliger Text

Overlay-Deckkraft 0%

Dunkles Overlay

Sichere Ränder

Mittellinien

Format

Retina-Skalierung

Qualität 92%

HTML

CSS

Rückenwind

Reagieren

Größen (eine pro Zeile, z.B. 800x600)

Extras

Eckenradius 0px Textkontur 0px Schatten 0px

Wasserzeichen

Dominantes Farbmuster

Ob Sie eine neue Website erstellen, eine mobile App prototypisieren oder eine Präsentation vorbereiten – Platzhalterbilder sind unverzichtbar. Ein professioneller Platzhalterbild-Generator ermöglicht es Ihnen, Layouts mit Ersatzgrafiken zu füllen, direkt in Ihrem Browser für maximale Privatsphäre.

So Erstellen Sie Platzhalterbilder Online

Die Verwendung dieses kostenlosen Platzhalterbild-Tools ist einfach. Geben Sie die gewünschten Abmessungen ein oder wählen Sie eine Voreinstellung. Passen Sie Hintergrund, Text an und laden Sie im gewünschten Format herunter – PNG, JPG, WebP, SVG oder Base64.

Warum einen Platzhalterbild-Generator verwenden

Professionelle Designer und Entwickler nutzen Platzhalterbilder in jeder Phase. Ein dedizierter Generator hält den Fokus auf Struktur und visuelle Hierarchie. verschwommenes LQIP-Vorschaubild für Lazy Loading

FAQ — Kostenloser Platzhalterbild-Generator

Frequently Asked Questions

Generieren Sie Dummy-Bilder für das Webdesign. Passen Sie Abmessungen, Farben und Text an Ihre Layouts an.

Ja, vollständig kostenlos ohne Registrierung. Die gesamte Generierung erfolgt in Ihrem Browser.

PNG, JPG, WebP, SVG, Base64 und Data URI.

Ja, der Stapelmodus ermöglicht das Generieren mehrerer Größen und den Download als ZIP.

Ja, mit Skalierungen von 1x bis 4x.

Ja. 100% clientseitig, nichts wird an den Server gesendet.

So verwenden Sie den Platzhalterbild-Generator

Bildabmessungen festlegen
Geben Sie die gewünschte Breite und Höhe in Pixel ein oder wählen Sie eine Voreinstellung wie 16:9 Widescreen, Instagram Post oder YouTube Thumbnail. Aktivieren Sie "Seitenverhältnis sperren", um die Proportionen zu fixieren.
Anpassen des Hintergrunds
Wählen Sie einen Hintergrundtyp - Volltonfarbe, linearer/radialer Farbverlauf, Gitter, Streifen, Punkte, Rauschtextur oder Glaseffekt. Legen Sie Ihre Farben mit den Auswahlfeldern oder durch Eingabe von HEX-Werten fest.
Text und Typografie anpassen
Fügen Sie benutzerdefinierten Beschriftungstext mit statischen Zeichenfolgen oder dynamischen Token wie {Breite}×{Höhe} hinzu. Passen Sie Schriftfamilie, Gewicht, Größe, Buchstabenabstand und Ausrichtung an.
Exportieren Sie in Ihrem bevorzugten Format
Laden Sie die Bilder als PNG, JPG, WebP oder SVG herunter oder kopieren Sie die Base64/Data URI für die Inline-Einbettung. Verwenden Sie den Batch-Modus für mehrere Größen oder den Dev-Modus, um HTML/CSS/Tailwind/React-Schnipsel zu erfassen.

Formatvergleich

Wählen Sie das richtige Exportformat für Ihren Anwendungsfall:

Format	Best für	Typische Größe (800×600)	Browser-Unterstützung
PNG	Lose Qualität, Transparenz	~15-40 KB	Alle Browser
JPG	Kleine Dateien, keine Transparenz	~8-20 KB	Alle Browser
WebP	Moderne Sites, beste Kompression	~5-12 KB	Alle modernen Browser
SVG	Skalierbar, auflösungsunabhängig	<2 KB	Alle modernen Browser
Base64	Inline-Einbettung, keine HTTP-Anfrage	Größer als PNG	Alle Browser

Häufige Anwendungsfälle

Webdesign Prototyping

Füllen Sie Layouts während des Wireframings und Prototypings aus, ohne auf die endgültigen Bilder zu warten, und behalten Sie den visuellen Fokus auf Struktur und Abstände bei. Farbkontrast und Barrierefreiheit testen

Druck & Präsentation Mockups

Erstellen Sie genau bemessene Platzhalter für Broschüren, Dias und Drucklayouts, um die Komposition zu überprüfen, bevor Sie ein Foto in Auftrag geben.

Vorlagen für soziale Medien

Erzeugen Sie Bilder in der richtigen Größe für jede Plattform - Instagram, YouTube, Facebook, Twitter - mithilfe der integrierten Maßvorgaben.

Frontend-Entwicklung Testen

Testen Sie reaktionsschnelle Haltepunkte und das Ladeverhalten von Bildern in verschiedenen Grid-Systemen, ohne dass Sie reale Foto-Assets benötigen.

Bildung und Ausbildung

Erstellen Sie beschriftete Diagramme und Unterrichtsmaterialien mit deutlich dimensionierten, kommentierten Bildplatzhaltern für Dokumentation und Tutorials.

Wie es funktioniert

Alles läuft in Ihrem Browser - kein Server, keine Uploads, kein Tracking.

Canvas-API-Rendering

Die gesamte Bilderzeugung verwendet die HTML5 Canvas API. Abmessungen, Farben, Muster und Text werden direkt im Speicher gezeichnet und über toDataURL() in das gewünschte Format konvertiert.

Export-Pipeline für mehrere Formate

PNG- und JPG-Export verwenden Canvas.toBlob() mit einstellbarer Qualität. WebP verwendet die gleiche Pipeline, sofern unterstützt. SVG-Exporte erzeugen eine saubere Vektordatei. Base64 und Daten-URI verwenden URL.createObjectURL().

Stapelverarbeitung

Der Batch-Modus analysiert Ihre Größenliste, rendert jedes Bild unabhängig in einem gemeinsamen Canvas-Kontext und verpackt alle Dateien mit JSZip in ein ZIP-Archiv - vollständig clientseitig.

Für wen ist dieses Tool gedacht?

Web-Designer

Erstellen Sie pixelgenaue Layout-Mockups mit korrekt dimensionierten, gestylten Platzhalterbildern, bevor die endgültigen Assets fertig sind.

Frontend-Entwickler

Kopieren Sie HTML-, CSS-, Tailwind- oder React-Snippets direkt aus dem Dev-Modus, um Platzhalter sofort in Ihre Codebasis zu integrieren.

Schöpfer von Inhalten

Mit den integrierten Voreinstellungen können Sie schnell Bilder in der richtigen Größe für Beiträge in sozialen Medien auf allen Plattformen erstellen.

Digital-Agenturen

Generieren Sie im Stapelverfahren ganze Sätze von Platzhalterbildern für Kundenpräsentationen und mehrseitige Designprüfungen.

Studenten und Pädagogen

Erstellen Sie beschriftete Platzhalterbilder in einheitlicher Größe für Kursarbeiten, Dokumentationen und Unterrichtsmaterialien.

Tipps für bessere Platzhalterbilder

Verwenden Sie bei der Erstellung von responsiven Bildsets die Option "Seitenverhältnis sperren" - so wird sichergestellt, dass alle generierten Platzhalter an allen Haltepunkten die gleichen Proportionen beibehalten.
Passen Sie den Hintergrund Ihres Platzhalters an die dominante Farbe des endgültigen Bildes an, um die wahrgenommene Layoutverschiebung beim Laden der echten Bilder zu verringern.
Für React- und Next.js-Projekte verwenden Sie den Daten-URI-Export - er kann direkt als src-Prop ohne eine zusätzliche Netzwerkanfrage übergeben werden.
Raster- und Streifenhintergründe eignen sich besser als Volltonfarben, um Bildgrenzen in Wireframes für technisch nicht versierte Kunden zu kennzeichnen.
Export als SVG für UI-Komponentenbibliotheken - SVG-Platzhalter sind auflösungsunabhängig und fügen Ihrem Bundle praktisch keinen Größen-Overhead hinzu.

Warum gute Platzhalterbilder wichtig sind

Platzhalter in der richtigen Größe verhindern die kumulative Layout-Verschiebung (CLS), eine Core Web Vitals-Kennzahl, die sich direkt auf die Google-Suchergebnisse auswirkt.
Durch die konsistente Gestaltung von Platzhaltern bei Designprüfungen konzentriert sich das Kundenfeedback auf Layout und UX und nicht auf fehlende oder unpassende Bilder.
Durch die Verwendung von Daten-URI-Platzhaltern werden zusätzliche HTTP-Anfragen vermieden und die Ladezeit der Seite beim ersten Rendering verkürzt.
Retina-ready-Platzhalter (2x/3x) verhindern unscharfe Standins auf High-DPI-Displays und sorgen für ein professionelles Aussehen der Prototypen.

Leistung und Datenschutz

Jedes Bild - von Einzelexporten bis hin zu kompletten Stapelsätzen - wird vollständig in Ihrem Browser mithilfe der HTML5 Canvas API generiert. Es werden keine Bilder, Texte oder Farbdaten an einen Server gesendet. Das Tool arbeitet ohne Konten, Cookies oder Tracking und funktioniert nach dem ersten Laden der Seite offline.

Bildungshinweis: Bildformate und die Canvas-API

PNG vs. JPG

PNG verwendet eine verlustfreie Komprimierung und unterstützt Transparenz (Alphakanal). JPG verwendet eine verlustbehaftete Komprimierung und eignet sich besser für fotografische Inhalte, bei denen die geringere Dateigröße schwerer wiegt als die pixelgenaue Genauigkeit.

WebP

WebP ist das offene Format von Google, das verlustfreie und verlustbehaftete Komprimierung kombiniert. Es erzeugt 25-35 % kleinere Dateien als PNG/JPG bei gleicher Qualität und unterstützt Transparenz.

Daten URI & Base64

Ein Daten-URI kodiert binäre Dateidaten als Base64-ASCII-String, dem ein MIME-Typ vorangestellt ist (z. B. data:image/png;base64,...). Durch die Inline-Einbettung entfällt eine HTTP-Anfrage, aber die HTML/CSS-Datei wird um ~33 % größer.

HTML5-Leinwand-API

Die Canvas-API bietet eine JavaScript-gesteuerte 2D-Zeichenoberfläche. toDataURL() konvertiert die Canvas-Bitmap in einen Base64-String; toBlob() erzeugt einen binären Blob für den Dateidownload - und das alles ohne Beteiligung des Servers.

Fehlersuche

Dies kann passieren, wenn Ihr Browser das automatische Herunterladen von Dateien blockiert. Klicken Sie in der Eingabeaufforderung des Browsers zum Herunterladen auf "Zulassen" oder versuchen Sie, mit der rechten Maustaste auf die Vorschau zu klicken und "Bild speichern unter" auszuwählen.

WebP wird nicht von allen Bildbearbeitungsprogrammen unterstützt. Verwenden Sie PNG oder JPG für maximale Kompatibilität mit älterer Software wie Photoshop CS6 oder älteren Versionen von GIMP.

Die Live-Vorschau wird an das Panel angepasst. Das heruntergeladene Bild wird immer genau in den von Ihnen festgelegten Pixelmaßen gerendert und ist scharf.

Vergewissern Sie sich, dass Sie mindestens eine gültige Größe im Format BREITExHÖHE (z. B. 800x600) in der Liste der Stapelgrößen eingegeben haben. Versuchen Sie einen kleineren Stapel (weniger als 20 Bilder), wenn Speicherfehler auftreten.

Wussten Sie schon?

Das Konzept des "Lorem Ipsum"-Platzhaltertextes stammt aus den 1960er Jahren, aber Bildplatzhalter wurden erst nach dem Start von placehold.it im Jahr 2008 zur Standardpraxis im Webdesign. Dieser Dienst, der über eine URL einfache graue Rechtecke generierte, verzeichnete in seiner Hochphase Millionen von Anfragen pro Tag. Heute beseitigen clientseitige Generatoren die Latenzzeiten und Datenschutzbedenken von URL-basierten Platzhalterdiensten vollständig.

Der schnellste Weg, Ihre Layouts zu füllen

Von einem einzelnen Wireframe-Platzhalter bis hin zu einem kompletten Stapel responsiver Bildelemente gibt Ihnen dieser Generator volle kreative Kontrolle, ohne dass Sie Ihren Browser verlassen müssen. Passen Sie Abmessungen, Muster, Typografie und Exporte in Sekundenschnelle an - und gehen Sie dann direkt zurück zur Erstellung. Keine Server, keine Konten, keine Wartezeiten.