Lorem Picsum / Platzhalterbild-Generator

Der Lorem Picsum / Platzhalterbild-Generator ist ein kostenloses, browserbasiertes Tool, das pixelgenaue Platzhalterbilder für Mockups, Wireframes, Prototypen und die Frontend-Entwicklung erstellt. Legen Sie eine beliebige Breite und Höhe bis zu 4000 Pixeln fest, wählen Sie Ihre Farben, fügen Sie benutzerdefinierten Text hinzu, und die Canvas-basierte Vorschau wird sofort aktualisiert – kein Server-Umweg, keine Wartezeit. Laden Sie das Ergebnis als PNG, JPG, WEBP oder SVG herunter oder greifen Sie auf kopierfertige HTML / Markdown / React Snippets und Hotlink-URLs für Lorem Picsum, Placehold.co und DummyImage zu.

Was ist ein Platzhalterbild und warum brauche ich eines?

Ein Platzhalterbild ist ein temporäres Bild, das während der Design- und Entwicklungsphase einer Website oder App verwendet wird. Es reserviert Platz für das endgültige Bild, damit Designer und Entwickler Inhalte layouten, responsives Verhalten testen und Mockups überprüfen können, bevor die echten Fotos oder Grafiken bereit sind. Platzhalter sind essenziell für Wireframes, Prototypen, E-Mail-Vorlagen und das Frontend-Testing. Ohne sie brechen Layouts zusammen, CSS-Regeln verhalten sich falsch und Stakeholder können sich das fertige Design nicht vorstellen.

Häufige Anwendungsfälle

• Wireframing & Mockups — Zeigen Sie Kunden genau, wo jedes Bild in welcher Größe sitzen wird.
• Frontend-Prototyping — Entwickeln Sie responsive Layouts, bevor die endgültigen Assets geliefert werden.
• CMS-Testing — Befüllen Sie Test-Beiträge und Produktseiten mit realistischen Bildabmessungen.
• E-Mail-Vorlagen — Reservieren Sie Plätze für Banner und Produktbilder in Marketingkampagnen.
• Dokumentation & Design-Systeme — Veranschaulichen Sie Seitenverhältnisse, Abstände und Breakpoints.
• Lazy-Load-Tests — Generieren Sie schnell große Bilder, um Ladestrategien für Bilder einem Belastungstest zu unterziehen.

Was ist der Unterschied zwischen Lorem Picsum und Placehold.co?

Lorem Picsum (picsum.photos) liefert ein zufälliges echtes Foto in den angeforderten Abmessungen zurück, was sich hervorragend für realistische Mockups eignet. Placehold.co und DummyImage liefern einfarbige Rechtecke mit den in der Mitte aufgedruckten Maßen zurück, was ideal für Wireframes ist, um genau zu zeigen, wo ein Bild einer bestimmten Größe sitzen wird. Dieser Generator erstellt URLs für beide Stile an einem Ort und produziert zusätzlich eigene Canvas-gerenderte einfarbige, verlaufende oder karierte Bilder, die Sie als Dateien herunterladen können.

Wie generiere ich ein Retina-fähiges Set von Platzhalterbildern?

Stellen Sie Ihre Basisbreite und -höhe ein und klicken Sie dann auf URLs & Snippets generieren, um das Ergebnispanel einzublenden, und klicken Sie auf 1x / 2x / 3x herunterladen. Das Tool erstellt drei Kopien desselben Platzhalters im Maßstab 1×, 2× und 3×, bereit für die Verwendung in srcset-Attributen für hochauflösende Bildschirme. Jede Datei wird mit einem klaren Dateinamen wie [email protected] heruntergeladen.

Warum wird die Vorschau ohne Serveranfrage aktualisiert?

Das Bild wird vollständig in Ihrem Browser mithilfe der HTML Canvas API gezeichnet. Jede Änderung an Breite, Höhe, Farbe oder Text wird sofort neu gerendert, ohne dass eine Netzwerkverbindung erforderlich ist. Das bedeutet, dass das Tool schnell ist, nach dem Laden offline funktioniert und Ihre Design-Entscheidungen niemals an einen Server sendet. Wenn Sie mit der Vorschau zufrieden sind, wird derselbe Canvas als herunterladbare Datei exportiert oder als Base64-Daten-URL kopiert.

Welche Bildformate kann ich herunterladen?

Sie können den generierten Platzhalter in folgenden Formaten herunterladen:

• PNG — Verlustfrei, unterstützt Transparenz, am besten für Volltonfarben und scharfen Text.
• JPG — Kleinere Dateigröße, ideal für fotoähnliche Inhalte, bei denen einige Kompressionsartefakte akzeptabel sind.
• WEBP — Modernes Format mit der besten Komprimierung bei gleicher Qualität. Wird von allen modernen Browsern unterstützt.
• SVG — Vektorformat, unendlich skalierbar, winzige Dateigröße für einfarbige und verlaufende Hintergründe.
• Base64-Daten-URL — Kopieren Sie das Bild als Inline-Text, um es direkt in HTML oder CSS einzufügen.

So verwenden Sie dieses Tool

1. Größe wählen: Geben Sie Breite und Höhe in Pixeln ein oder klicken Sie auf eine der Größen-Voreinstellungen wie Avatar, Banner, Hero oder Twitter Card.
2. Hintergrundstil wählen: Einfarbig für flache Farben, Verlauf für Zwei-Farben-Mischungen oder Karo für Hintergründe im Transparenz-Stil.
3. Farben festlegen: Verwenden Sie die Farbwähler, geben Sie Hex-Codes direkt ein oder klicken Sie auf ein Feld der Schnellpalette.
4. Benutzerdefinierten Text hinzufügen (optional): Lassen Sie das Feld leer, um die Abmessungen automatisch anzuzeigen (z. B. 600 × 400).
5. Live-Vorschau beobachten: Der Canvas wird bei jedem Tastendruck aktualisiert – kein Absenden erforderlich.
6. Herunterladen oder URLs generieren: Klicken Sie auf Bild herunterladen für eine sofortige Datei oder URLs & Snippets generieren für Hotlink-URLs und Copy-Paste-Code.

Schnellreferenz für Größen

Tipps für beste Ergebnisse

• Sperren Sie das Seitenverhältnis beim Ändern der Größe, um die gleichen Proportionen beizubehalten – nützlich für responsive Sets.
• Nutzen Sie das Karomuster, wenn Sie für transparente Overlays entwerfen, um zu simulieren, wie Transparenz gerendert wird.
• Wählen Sie kontrastreiche Farben (dunkler Text auf hellem Hintergrund oder umgekehrt) für gut lesbare Maßangaben.
• Halten Sie Text kurz — lange Beschriftungen werden automatisch verkleinert, aber vier bis zwölf Zeichen sehen am saubersten aus.
• SVG für gestochen scharfe Skalierung — für Designs, die in mehreren Größen angezeigt werden, ist SVG in jeder Zoomstufe schärfer.
• WEBP für die Produktion — ca. 30 % kleiner als JPG bei gleichbleibender Qualität, mit exzellenter Browserunterstützung.

Kann ich die generierten Bilder in einem kommerziellen Projekt verwenden?

Benutzerdefinierte Bilder, die mit dem Canvas-Generator dieses Tools erstellt wurden (die einfarbige Vorschau, die Sie herunterladen), gehören zu 100 % Ihnen und können überall ohne Einschränkungen verwendet werden. Lorem Picsum Fotos sind unter der Unsplash-Lizenz lizenziert und für die kommerzielle und persönliche Nutzung kostenlos. Placehold.co und DummyImage sind ebenfalls kostenlos nutzbar, aber prüfen Sie immer die aktuellen Bedingungen des jeweiligen Dienstes, bevor Sie Produktions-Assets veröffentlichen.

Häufig gestellte Fragen

Gibt es eine maximale Bildgröße?

Dieses Tool unterstützt Abmessungen bis zu 4000 × 4000 Pixel pro Seite, was fast jeden Anwendungsfall in der Praxis abdeckt, einschließlich hochauflösender Hero-Bilder und 4K-Displays. Der Browser erledigt die Hauptarbeit, daher können sehr große Canvases die Vorschau auf älteren Geräten kurzzeitig verlangsamen.

Kann ich transparente Platzhalter generieren?

Ja — laden Sie sie als PNG oder SVG herunter und verwenden Sie den Hintergrundmodus Karo, um zu visualisieren, wie Transparenz gerendert wird. Für einen vollständig transparenten Download stellen Sie Hintergrundfarbe und Zweitfarbe auf denselben Wert ein und wählen Sie PNG.

Funktioniert das Bild in Photoshop, Figma oder Sketch?

Absolut. PNG, JPG, WEBP und SVG sind Standard-Bildformate, die von jedem modernen Design-Tool unterstützt werden. Ziehen Sie die heruntergeladene Datei per Drag-and-Drop auf Ihre Arbeitsfläche oder verwenden Sie die Daten-URL direkt in CSS für Inline-Hintergründe.

Warum sollte ich dieses Tool verwenden, anstatt einfach eine Placehold.co URL einzutippen?

Drei Gründe: (1) visuelle Live-Vorschau, bevor Sie sich für eine URL entscheiden – Sie sehen genau, was Sie erhalten; (2) Ein-Klick-Kopie für HTML, Markdown, JSX, CSS und BBCode gleichzeitig; (3) herunterladbare, selbstgehostete Dateien für die Offline-Nutzung oder Projekte, die sich nicht auf einen Drittanbieter verlassen können.

Funktioniert es auf mobilen Geräten?

Ja, die gesamte Oberfläche passt sich an Smartphone- und Tablet-Bildschirme an. Die Canvas-Vorschau skaliert passend, die Steuerelemente werden vertikal gestapelt und alle Download- / Kopieraktionen funktionieren über die mobile Zwischenablage-API.

Kann ich viele Größen auf einmal im Batch generieren?

Die Schaltfläche Retina-Set lädt 1x, 2x und 3x Ihrer aktuellen Größe mit einem Klick herunter. Für andere Batches klicken Sie einfach nacheinander auf die Preset-Chips und laden sie herunter – der Canvas rendert mit über 60 FPS, sodass das Iterieren extrem schnell geht.

Verwandte Tools

• Bild-Resizer — Ändern Sie die Größe eines vorhandenen Fotos auf eine beliebige Breite / Höhe.
• Bild-Kompressor — Verringern Sie die Dateigröße vor der Veröffentlichung.
• Farbschema-Generator — Wählen Sie Paletten für Ihre Platzhalter.
• CSS-Verlauf-Generator — Entwerfen Sie Verläufe für Hintergründe.

Zusätzliche Ressourcen

• MDN: img-Element & srcset