Placeholder Image Generator

Den Platzhalter-Bild-Generator verwenden

1. Die Abmessungen festlegen: eine Breite und Höhe in Pixeln eingeben, oder auf ein Preset klicken wie "Banner" (1200x400), "Quadrat" (500x500), "Social" (1200x630) oder "HD" (1920x1080).
2. Eine Hintergrundfarbe auswählen mit dem Farbwähler, oder einen Hex-Code eingeben. Das Tool akzeptiert auch Hex-Kurzformen wie #ccc und benannte CSS-Farben.
3. Eine Textfarbe wählen - normalerweise etwas mit ausreichend Kontrast zum Hintergrund. Weiss auf Dunkelgrau oder Schwarz auf Hellgrau funktionieren beide gut.
4. Den Text anpassen (optional). Lass es leer, um die Abmessungen anzuzeigen (800 x 400), oder gib ein beliebiges Label ein wie "Hauptbild" oder den Abschnittsnamen.
5. Auf "Generieren" klicken, um die Vorschau zu rendern, und dann auf "PNG herunterladen", um die Datei zu speichern.

Wie ein Platzhalter gezeichnet wird

Das Tool erstellt ein Off-Screen-HTMLCanvasElement, das auf die angeforderte Breite und Höhe dimensioniert ist, füllt das gesamte Canvas mit der Hintergrundfarbe über ctx.fillRect und wechselt dann zum Text-Rendering. Der Schriftgrad wird als Bruchteil der kürzeren Dimension berechnet (ca. 1/8), damit das Label proportional über Presets hinweg bleibt. Wir setzen ctx.textAlign = "center" und ctx.textBaseline = "middle", messen den Text mit ctx.measureText, um zu prüfen, ob er passt, und rufen ctx.fillText bei den Canvas-Mittelpunkt-Koordinaten auf.

Die Ausgabe wird durch canvas.toBlob("image/png") exportiert, was das Pixel-Raster an den verlustfreien DEFLATE-Encoder des Browsers übergibt (gemäß der W3C-PNG-Empfehlung). PNG ist hier die richtige Wahl, weil Platzhalter sehr wenige verschiedene Farben haben - typischerweise nur den Hintergrund, den Text und einige anti-aliasierte Randpixel - und die Präkondizierer-plus-DEFLATE-Pipeline diesen Inhaltstyp extrem effizient komprimiert. Ein 1200x400 Platzhalter könnte nur 5 KB PNG sein, was kleiner ist als das äquivalente JPEG für denselben Inhalt wäre.

Wo Platzhalter tatsächlich helfen

• Entwerfen eines responsiven Layouts in HTML/CSS, bevor das Design-Team finale Bilder produziert hat, mit real-dimensionierten Assets, die das Raster füllen.
• Durchführen eines Workshops, bei dem du Beispielbilder in bestimmten Größen benötigst, aber keine Stockfotografie verwenden möchtest.
• Stress-Testing einer CMS- oder SSG-Pipeline mit Dutzenden unterschiedlich großer Bilder, um Zuschnitt, responsives Rendering und Lazy-Load-Verhalten zu verifizieren.
• Demo eines Produkts oder einer Komponente mit "Dein Bild hier"-Platzhaltern, bevor ein Kunde eigene Inhalte hochlädt.
• Erstellen von Fallback-Bildern für den Fall, dass ein echtes Bild nicht geladen werden kann, mit einer Farbe, die zum Theme passt statt des Browser-Symbol für ein gebrochenes Bild.
• Nachstellen eines Social-Media-Vorschau-Rasters mit korrekt dimensionierten 1:1-, 4:5- und 9:16-Platzhaltern, bevor die eigentlichen Posts gestaltet werden.

Fallstricke und Größentipps

• Sehr kleine Platzhalter sehen gedrängt aus. Der Auto-Schriftgrößen-Algorithmus skaliert mit der kürzeren Dimension, sodass ein 60x60-Platzhalter mikroskopischen Text zeigt. Für winzige Größen verwende das Textfeld, um mit einem sehr kurzen Label oder einem einzigen Zeichen im Icon-Stil zu überschreiben.
• Extreme Seitenverhältnisse sehen seltsam aus. Ein 2000x50-Banner zeigt vertikal komprimierten Text, weil die Höhe die Schriftart einschränkt. Plane für vernünftige Seitenverhältnisse (typischerweise unter 10:1) oder gib ein kurzes benutzerdefiniertes Label an.
• Kontrast ist wichtig für WCAG. Wenn du den Platzhalter tatsächlich ausliefern planst (sogar vorübergehend), stelle sicher, dass das Vordergrund-Hintergrund-Kontrastverhältnis 4,5:1 überschreitet - andernfalls werden Screen-Reader im visuellen Modus unlesbares Bildmaterial anzeigen.
• PNG-Ausgabe für einheitliche Farben ist oft größer als SVG. Für skalierbare responsive Platzhalter ist ein Inline-SVG mit einem Rect- und Text-Element typischerweise kleiner als ein PNG und kann mit CSS eingefärbt werden. Verwende PNG, wenn das konsumierende System speziell eine Raster-Datei erwartet.
• Der Text verwendet system-standardmäßige serifenlose Schriftart. Benutzerdefinierte Schriftarten werden nicht unterstützt, was die Ausgabe portabel hält. Wenn das Branding eine bestimmte Schriftart erfordert, verwende stattdessen ein vollständiges Design-Tool.

Die Geschichte und das Ökosystem von Platzhalterbildern

Das Web hat seit den frühen 2000er Jahren eine Platzhalter-Bild-Kultur, als via.placeholder.com das URL-als-Bild-Muster populär machte: placeholder.com/1200x400/cccccc/000000?text=Held gab sofort ein generiertes Bild zurück. Picsum (lorem picsum) und Lorem Flickr bieten echte Fotos in gewünschten Größen für mehr Abwechslung. Unsplash bietet kuratierte Fotografie. Diese gehosteten Dienste sind bequem, kosten aber einen HTTP-Request und können von strengen Content Security Policies blockiert werden. Platzhalter lokal zu generieren vermeidet die Netzwerkabhängigkeit und die Bandbreitenkosten des Anforderns tausender verschiedener Größen während einer Designphase. Die W3C-PNG-Spezifikation (zweite Ausgabe 2003) und die Canvas-Text-APIs in HTML5 machen die browserseitige Generierung trivial - kein Server nötig. Für skalierbare In-Page-Platzhalter ist ein Inline-SVG mit berechnetem viewBox sogar leichter als ein generiertes PNG, weshalb Tailwind CSS 2021 aspect-ratio-Utilities hinzufügte, um responsive Layouts ohne Bilddateien zu unterstützen.

Alternativen für verschiedene Arbeitsabläufe

Für gehostete Platzhalter sind via.placeholder.com und placeholder.com die klassischen URL-basierten Dienste. Picsum Photos liefert echte Fotografie in beliebiger Größe. Für React- und Vue-Projekte rendern Pakete wie react-placeholder und vue-content-placeholders Shimmer-Ladezustände statt generierter Bilder. In Design-Tools hat Figma ein "Unsplash"-Plugin, das echte Fotos in der richtigen Größe in Rahmen einfügt, und Sketch hat Craft. Im CLI generiert ImageMagick Platzhalter mit magick -size 1200x400 xc:gray -pointsize 48 -gravity center -fill white -annotate 0 "Held" platzhalter.png - eine Zeile, gut für Stapelverarbeitung. Dieses Tool ist die richtige Wahl, wenn du eine einmalige PNG-Datei ohne das Einrichten von Abhängigkeiten benötigst; verwende die gehosteten Dienste, wenn dein Mockup-Tool URLs erwartet, und greife für die Batch-Generierung von Dutzenden von Größen auf ein CLI zurück.