FakecreditcardHerunterladen oder direkt einbetten
Wähle das passende Format für deinen Zweck. SVG benötigt für einen einfachen Platzhalter nur wenige hundert Bytes und bleibt bei jeder Skalierung gestochen scharf. PNG hält einfarbige Flächen sowie Text randscharf und ist das universellste Rasterformat. WebP wird von allen modernen Browsern unterstützt und ist meist spürbar schlanker als PNG. JPG eignet sich für Tools, die dieses Format zwingend voraussetzen; es unterstützt keine Transparenz und kann bei Verläufen Farbabrisse (Banding) zeigen. Bei Rastergrafiken wählst du @2x oder @3x, um gestochen scharfe Bilder für hochauflösende Displays bei gleicher CSS-Größe zu erhalten. Sehr große Bilder werden automatisch auf ca. 16 Megapixel begrenzt, was dem Canvas-Limit von Safari und vielen Mobilgeräten entspricht.
Unter Kopieren als erhältst du die Grafik als Data-URI direkt in deinem gewünschten Code eingebettet: als <img>-Tag inklusive Breiten- und Höhenangaben, als Markdown für READMEs und Dokumentationen, als CSS-background-image mit passendem aspect-ratio oder als React-<img>. Das SVG wird URL-kodiert statt Base64-kodiert ausgegeben – dadurch bleibt der Markup lesbar und ist meist kaum größer als die Base64-Variante.
Brauchst du eine URL wie /600x400?
Klassische Online-Dienste liefern Platzhalter über URLs wie /600x400 aus. Das ist praktisch, bis der Dienst offline geht oder seine URL-Struktur ändert und plötzlich alle Mockups ins Leere laufen; zudem entsteht bei jedem Seitenaufruf ein externer Request. Eine Inline-Data-URI ist die verlässliche, in sich geschlossene Alternative: Einmal kopiert, funktioniert sie offline, in Prototypen, Storybook-Stories und Test-Fixtures. Zwei Ausnahmen: Viele E-Mail-Clients (darunter Gmail) blockieren Data-URIs – nutze für Newsletter daher heruntergeladene PNG-Dateien. Zudem blähen riesige Inline-Bilder dein HTML auf, weshalb große Formate besser als separate Dateien eingebunden werden sollten.
Drei typische Arten von Platzhalter-Bildern
- Dummy-Bild im Designprozess: Ein Kasten in exakt den geplanten Maßen, der stellvertretend für ein noch ausstehendes Foto dient – genau das erzeugt dieser Generator.
- Fallback- oder Standardbild: Wird Besuchern angezeigt, wenn kein Bild hinterlegt ist, etwa bei einem Produkt ohne Foto oder einem Profil ohne Avatar. Halte es neutral, achte auf das finale Seitenverhältnis und wähle einen aussagekräftigen Alt-Text.
- Lade-Platzhalter: Eine winzige, unscharfe Vorschau (Blur-Up) oder eine neutrale Farbfläche während des Bildaufbaus, wie etwa
blurDataURLin Next.js. Ein kleines, flächiges SVG von dieser Seite eignet sich hierfür hervorragend.
Gängige Platzhalter-Größen
| Verwendungszweck | Größe (px) | Verhältnis |
|---|---|---|
| Open Graph / Link-Vorschau (Facebook, LinkedIn) | 1200 × 630 | ≈ 1,91:1 |
| X (Twitter) Large Image Card | 1200 × 600 | 2:1 |
| Instagram quadratischer Beitrag | 1080 × 1080 | 1:1 |
| Instagram Hochformat-Beitrag | 1080 × 1350 | 4:5 |
| Stories, Reels, TikTok | 1080 × 1920 | 9:16 |
| YouTube Thumbnail, HD-Video | 1280 × 720 | 16:9 |
| Full HD Hero-Banner oder Slide | 1920 × 1080 | 16:9 |
| Blog-Beitrag oder Card-Bild | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| E-Commerce Produktbild | 1000 × 1000 | 1:1 |
| Medium Rectangle Ad (MPU) | 300 × 250 | 6:5 |
| Leaderboard Banner | 728 × 90 | ≈ 8:1 |
| Wide Skyscraper Banner | 160 × 600 | 4:15 |
| Mobile Banner Ad | 320 × 50 | 32:5 |
| Avatar / Profilbild | 150 × 150 (Kreis) | 1:1 |
Soziale Netzwerke passen ihre Bildempfehlungen gelegentlich an. Prüfe vor der finalen Medienproduktion daher stets die aktuellen Vorgaben der jeweiligen Plattform.
Platzhalter ohne Layout-Shifts
- Immer Breite und Höhe definieren (oder CSS-
aspect-ratio) direkt am Bild. Der Browser reserviert den Raum vorab, wodurch unschöne Layout-Verschiebungen (Cumulative Layout Shift, CLS) vermieden werden. - Das finale Seitenverhältnis nutzen: So erkennst du Probleme beim Zuschneiden (Cropping) durch Responsive Images oder
object-fit: coverfrühzeitig. - Abmessungen als Text einblenden: Im Design-Review sieht jeder Beteiligte sofort, welches Bildformat noch angeliefert werden muss.
- Dekorative Platzhalter mit
alt=""versehen und vor dem Launch konsequent austauschen: Ein Dummy-Bild in Produktion gilt als Bug.
Häufige Fragen
Was ist ein Platzhalter-Bild?
Ein temporäres Bild, das den Platz für das spätere Original freihält: Ein Kasten in den passenden Maßen und Farben, oft mit den Abmessungen beschriftet. Es wird in Screendesigns, Prototypen und Layout-Templates eingesetzt, bis das finale Bildmaterial vorliegt. Der Begriff bezeichnet außerdem Fallback-Grafiken für fehlenden Content oder Lade-Vorschauen.
Welche Größe sollte ein Platzhalter-Bild haben?
Exakt die Maße des endgültigen Bildes oder zumindest dasselbe Seitenverhältnis – z. B. 1200 × 630 für Social-Media-Links, 1080 × 1080 für quadratische Posts oder 1920 × 1080 für vollflächige Hero-Banner. Passende Maße decken Layout- und Schnittprobleme auf, bevor echte Bilder eingebaut werden.
Darf ich die Platzhalter-Bilder kostenlos nutzen?
Ja. Die Bilder werden direkt auf deinem Gerät anhand deiner Parameter erzeugt. Es gibt keine Lizenzbeschränkungen: Du kannst sie uneingeschränkt in kommerziellen Projekten, Vorlagen und Kundenaufträgen ohne Namensnennung verwenden.
Gibt es eine URL zum Einbinden wie /600x400?
Nein, ganz bewusst nicht: Da die Generierung vollständig im Browser stattfindet, gibt es keinen Server für Hotlinks. Kopiere das Bild stattdessen als <img>-Tag, Markdown oder CSS – die Data-URI ist eigenständig und funktioniert auch ohne Internetverbindung.
Kann ich transparente oder runde Platzhalter erstellen?
Ja. Aktiviere Transparenter Hintergrund bei PNG, WebP oder SVG (JPG unterstützt keine Transparenz und erhält einen weißen Hintergrund). Für Avatare oder Teaser-Cards kannst du die runde Form oder abgerundete Ecken wählen und optional mit einem Rahmen versehen.
Was ist die maximale Bildgröße?
Bis zu 4000 × 4000 Pixel bei einfacher Skalierung (@1x). Sehr große PNG- und WebP-Dateien benötigen einen kurzen Moment für das Rendering im Browser; SVG steht bei jeder Auflösung sofort zur Verfügung.