Platzhalterbild-Generator

Ein Platzhalterbild ist eine temporäre Ersatzgrafik, die verwendet wird, solange das endgültige Foto oder Artwork noch nicht bereit ist. Es handelt sich in der Regel um ein einfarbiges Rechteck in der exakten Pixelgröße des vorgesehenen Bildbereichs, oft mit einer Beschriftung der Abmessungen — zum Beispiel ein grauer 600×400-Kasten mit der Aufschrift „600 × 400". Designer und Entwickler setzen sie in Mockups, Wireframes und Prototypen ein, damit ein Layout vollständig wirkt, bevor die echten Bilder vorliegen. Weitere Bezeichnungen sind Dummy-Bild, Bild-Platzhalter oder Mock-Bild.

Ein <img>-Tag auf das Bild verweisen lassen. Die kompakteste Methode ist eine Data-URI — so ist keine separate Datei erforderlich: <img src="data:image/svg+xml,…" width="600" height="400" alt="Platzhalter">. Auf den Tab „<img>" klicken, „Kopieren" auswählen, und der vollständige Tag — Data-URI plus passende Breite und Höhe — landet in der Zwischenablage, bereit zum Einfügen. Alternativ die heruntergeladene Datei speichern und normal einbinden, z. B. <img src="/img/platzhalter-600x400.png">.

Ja — und eine datenschutzfreundlichere. Placehold.co, via.placeholder.com und dummyimage.com liefern Bilder von ihren Servern, was Netzwerkanfragen erzeugt, Ratenlimits treffen kann und bedeutet, dass diese Dienste verfolgen, welche Seiten ihre Bilder einbinden. UtiloKit generiert Platzhalterbilder vollständig im Browser — es verlässt keine Anfrage das Gerät. Das Ergebnis ist eine herunterladbare Datei oder eine eigenständige Data-URI, die offline funktioniert und nie ausfällt, wenn ein externer Dienst nicht erreichbar ist.

Platzhalterbilder werden für Website- und App-Mockups, Wireframes, E-Mail-Templates, Design-Übergaben und die Frontend-Entwicklung eingesetzt, solange die echten Assets noch in Arbeit sind. Sie reservieren den exakten Layout-Platz (was Layout-Versatz / CLS verhindert), helfen beim Testen von responsiven Breakpoints und füllen Demo-Inhalte in CMS-Templates und Komponentenbibliotheken. Ein einzelner 1280×720-Kasten kann während der Entwicklung als Platzhalter für sämtliche Video-Thumbnails in einem Raster dienen und dem gesamten Team die Überprüfung des Layouts ermöglichen, ohne auf Produktions-Assets warten zu müssen.

Die exakte Pixelgröße des vorgesehenen Bildbereichs verwenden, damit das Layout beim Laden des echten Bildes nicht springt. Häufige Zielgrößen: 1200×630 für Social-Media- und OG-Share-Bilder, 1080×1080 für ein quadratisches Instagram-Format, 1280×720 für Video-Thumbnails, 256×256 für Avatare, 1920×1080 für einen bildschirmbreiten Hero-Banner und 728×90 für ein Leaderboard-Werbebanner. Die Größen- und Seitenverhältnis-Presets ermöglichen die Einstellung mit einem Klick, oder es lässt sich jede benutzerdefinierte Breite und Höhe bis zu 4000 px eingeben.

Den gewünschten Text in das Feld „Text" eingeben — zum Beispiel „Hero", „Avatar" oder „Anzeige 300×250". Bleibt das Feld leer, beschriftet sich das Bild automatisch mit seinen Abmessungen (z. B. „600 × 400"). Textfarbe und Schriftgröße sind ebenfalls einstellbar, sodass ein Bereich im Mockup klar zeigt, was er darstellt. Das ist besonders hilfreich bei Design-Reviews, wenn Kunden verstehen müssen, welchen Inhalt jeder Bildbereich repräsentiert, ohne finale Assets zu sehen.

Für einen einfarbigen Kasten mit Text ist SVG in der Regel die beste Wahl: nur einige Hundert Bytes groß, in jeder Größe scharf und als Data-URI komfortabel einfügbar — ideal für das Web. PNG verwenden, wenn ein Tool eine Rasterdatei erfordert oder Transparenz gewünscht ist. JPG, wenn ein Fotoformat benötigt wird, und WebP für die kleinste Rasterdatei. Dieses Tool exportiert alle vier Formate; SVG ist der Standard, da es für Web-Entwicklungs-Workflows am praktischsten ist.

Lorem Picsum (picsum.photos) liefert zufällige echte Fotos — ideal, wenn lebensechte Bilder gewünscht sind, aber bei jedem Laden erscheint ein anderes Bild, das von einem Drittanbieter-Server geladen wird. Dieses Tool erstellt deterministische einfarbige Kästen mit exakter Größe, Farben und Beschriftung — vorhersagbar, winzig klein und offline im Browser generiert, ohne Upload, mit identischem Ergebnis bei jedem Laden. Picsum für realistische Foto-Mockups nutzen; dieses Tool für saubere, kontrollierte Layout-Platzhalter.

Gehostete Dienste wie placehold.co liefern eine URL wie placehold.co/600x400, weil ein Server das Bild bei jeder Anfrage erzeugt. Dieses Tool läuft vollständig im Browser ohne Server — statt einer verlinkten URL liefert es eine eigenständige Data-URI, die überall eingefügt werden kann, wo eine URL erwartet wird (als <img>-src, in CSS url()), sowie eine herunterladbare SVG-, PNG-, JPG- oder WebP-Datei. Kein Netzwerkrequest, keine Ratenlimits, funktioniert offline.

Den Hintergrund auf ein helles Grau wie #e2e8f0 und den Text auf ein mittleres Grau wie #475569 setzen — das ergibt den vertrauten neutralen Platzhalter-Look. Das Grau-Paletten-Preset auswählen, um beide Farben auf einmal zu übernehmen, Größe wählen und herunterladen. Grau signalisiert „absichtlich leer", sodass der Platzhalter beim Review visuell nicht mit dem umgebenden Design konkurriert. Dies ist die Standardkonvention in Figma, Sketch und den meisten Design-Systemen für Platzhalter-Slots.

Ja, vollständig. Das Tool läuft in jedem modernen Browser, einschließlich Safari auf dem iPhone und Chrome auf Android. Abmessungen festlegen, Farben wählen, Text hinzufügen und die Data-URI direkt vom Smartphone herunterladen oder kopieren. Besonders praktisch beim Überprüfen eines responsiven Layouts auf dem Gerät, wenn schnell ein Bildbereich für einen Screenshot oder eine Design-Übergabe gefüllt werden muss. Keine App-Installation nötig — einfach die Seite im mobilen Browser öffnen.

Ja — ein Seitenverhältnis-Preset wählen (1:1, 4:3, 3:2, 16:9, 2:1 oder 9:16) und die Höhe passt sich automatisch an die eingegebene Breite an — bei einer Breite von 1280 px und 16:9 ergibt das 1280×720. „Seitenverhältnis sperren" aktivieren, um diese Proportion beim Anpassen einer der Dimensionen beizubehalten. Ideal für responsive Bildplatzhalter, die über alle Breakpoints ein festes Verhältnis einhalten müssen, oder für Kachelraster, bei denen alle Thumbnails dieselbe Proportion haben sollen.

Ja — jedes Bild ist kostenlos, ohne Anmeldung, Wasserzeichen, Konto oder Nutzungslimit. Anders als manche Online-Bildtools, die kostenlose Nutzer auf eine bestimmte Anzahl von Downloads pro Tag beschränken oder eine E-Mail-Registrierung verlangen, hat dieses Tool keinerlei Einschränkungen. Es ist eine datenschutzfreundliche Alternative zu placehold.co, dummyimage.com und via.placeholder.com: Statt deren Server zu verlinken, wird das Bild lokal generiert und die Datei oder Data-URI gehört dem Nutzer — ohne Abhängigkeit von der Verfügbarkeit Dritter.