Direkte Antwort
Link-Vorschaubilder auf die Standardfläche 1200×630 oder auf 1200×628 bringen. Lokal zuschneiden oder mit Rändern einpassen und die Vorschau auf der Zielplattform prüfen. Wählen Sie Zuschneiden für eine randlose Füllung des 1.91:1 Rahmens oder Anpassen mit Rand für transparente oder farbige Seitenleisten.
So verwenden Sie dieses Tool
Vorschaubild oder Header hochladen
Wählen Sie bis zu 20 JPG-, PNG- oder WebP-Bilder. Das Werkzeug startet mit 1200×630.
1200×630 / 1200×628
Link-Vorschaubilder auf die Standardfläche 1200×630 oder auf 1200×628 bringen. Lokal zuschneiden oder mit Rändern einpassen und die Vorschau auf der Zielplattform prüfen.
Zuschneiden oder Anpassen mit Rand auswählen
Wählen Sie Zuschneiden für eine randlose Füllung des 1.91:1 Rahmens oder Anpassen mit Rand für transparente oder farbige Seitenleisten.
Exportieren und og:image Tags einbinden
Laden Sie die optimierte Datei herunter und tragen Sie og:image, og:image:width sowie og:image:height im HTML-Head ein.
Open-Graph-Bildgrößen und Bildausschnitt
Dieses Tool bietet Bildflächen mit 1200×630 und 1200×628 für Link-Vorschauen. Ihre Seitenverhältnisse liegen bei ungefähr 1,91:1. Open Graph definiert Bildmetadaten, keine allgemein vorgeschriebene Bildgröße. Prüfen Sie die Darstellung auf der Zielplattform.
Praktische Beispiele
16:9 Banner (1920×1080) auf 1200×630 Open Graph zuschneiden
Eingabe: 1920×1080 JPEG Querformat-Banner (16:9, 2.1 MB)
Ausgabe: 1200×630 JPEG
Der Zuschnitt füllt die Breite aus und schneidet minimale obere und untere Ränder ab, um 1200×630 zu erreichen.
Quadratisches Logo (1000×1000) in 1200×630 mit Rand einbetten
Eingabe: 1000×1000 PNG Logo (1:1 Seitenverhältnis)
Ausgabe: 1200×630 PNG mit zentriertem 630×630 Logo und seitlichen Leisten
Das Logo bleibt vollständig sichtbar; die seitlichen Ränder werden weiß oder in Markenfarbe gefüllt.
1200×628 Link-Karte für Social-Media-Sharing erzeugen
Eingabe: 2400×1256 PNG Grafik (1.91:1 Verhältnis)
Ausgabe: 1200×628 PNG oder WebP Datei
Reduziert die Bildgröße unter Beibehaltung der Kantenschärfe für schnelle Ladezeiten beim Teilen.
Einschränkungen
- Social-Media-Plattformen cachen og:image URLs aggressiv; Aktualisierungen erfordern oft den Einsatz plattformspezifischer Debugging-Tools.
- Transparente Ränder erfordern PNG oder WebP; bei JPEG wird automatisch ein fester Hintergrundfarbton verlangt.
- Ohne erlaubtes Vergrößern bleiben kleine Bilder beim Einpassen in ihrer Originalgröße auf der Zielfläche. Füllen durch Zuschneiden wird bei zu kleiner Vorlage oder zu kleinem Ausschnitt blockiert. Vergrößern muss ausdrücklich erlaubt werden und ergänzt keine fehlenden Details.
Häufige Fragen
Welche Bildgröße wird für Open Graph empfohlen?
Link-Vorschaubilder auf die Standardfläche 1200×630 oder auf 1200×628 bringen. Lokal zuschneiden oder mit Rändern einpassen und die Vorschau auf der Zielplattform prüfen.
Warum sollte man og:image:width und og:image:height angeben?
og:image:width und og:image:height beschreiben die Bildmaße in Pixeln. Sie informieren die Plattform, die die Metadaten liest; eine Vorschau beim ersten Teilen garantieren sie nicht.
Sieht das Bild auf jeder Plattform exakt gleich aus?
Nein. 1200×630 ist eine Voreinstellung dieses Tools. Jede Plattform bestimmt die Vorschau und kann das Bild anders zuschneiden. Prüfen Sie die veröffentlichte Vorschau.
Werden meine Grafiken auf einen externen Server übertragen?
Nein. Sämtliche Berechnungen und Skalierungen erfolgen ausschließlich lokal im Browser über die HTML5 Canvas API.
Maßgebliche Referenzen & Standards
- The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.