Für die meisten Websites ist JPG bei 1200 × 630 px unter 300 KB das beste Open-Graph-Bildformat. Es lädt schnell für Crawler, wirkt scharf in Link-Karten und funktioniert auf jeder Plattform, die og:image ausliest.
PNG und WebP haben klare Einsatzgebiete. Dieser Guide vergleicht alle drei, damit du einmal die richtige Wahl triffst.
Kurzvergleich
| Format | Ideal für | Typische Größe bei 1200×630 | Plattform-Support |
|---|---|---|---|
| JPG | Fotos, Verläufe, die meisten OG-Bilder | 80-250 KB | Universal |
| PNG | Logos, Text-Overlays, Flat Graphics | 200 KB-1 MB+ | Universal |
| WebP | Moderne Stacks, kleinere Dateien | 50-180 KB | Gut, nicht überall garantiert |
JPG: die Standardwahl
JPEG-Kompression verarbeitet Fotos und weiche Verläufe gut. Social Crawler holen dein Bild beim Scrape übers Netzwerk. Ein 150 KB JPG antwortet schneller als ein 900 KB PNG - weniger Timeout-Risiko.
Wann JPG nutzen
- Blog-Hero-Bilder
- Produktfotos
- Jedes OG-Bild mit fotografischem Inhalt
- Wenn Dateigröße zählt und keine Transparenz nötig ist
JPG-Einstellungen die funktionieren
Export bei Qualität 80-85 in Photoshop, Figma oder Squoosh. Maße: 1200 × 630 px. Ziel: unter 300 KB, hartes Limit 1 MB.
<meta property="og:image" content="https://example.com/og.jpg"><meta property="og:image:type" content="image/jpeg">JPG-Nachteile
Keine Transparenz. Harte Kanten und kleiner Text zeigen Artefakte bei zu niedriger Qualität. Für textlastige Graphics ist PNG sicherer.
PNG: wenn Text scharf bleiben muss
PNG nutzt verlustfreie Kompression. Logos, Typografie und Flat-Color-Designs bleiben crisp. Der Preis ist Dateigröße, besonders bei komplexen Motiven.
Wann PNG nutzen
- OG-Templates mit großer Headline
- Brand-Grafiken auf Vollflächen
- Screenshots mit UI-Text
- Designs mit Transparenz (selten für OG, aber möglich)
PNG-Einstellungen die funktionieren
Export als PNG-24 bei 1200 × 630 px. Durch TinyPNG o. ä. jagen, wenn die Datei 500 KB überschreitet. Kein PNG für Full-Bleed-Fotos.
<meta property="og:image" content="https://example.com/og.png"><meta property="og:image:type" content="image/png">PNG-Nachteile
Große Dateien verlangsamen Crawler-Fetches. Manche Plattformen lehnen Bilder ab, die zu lange laden. Über 1 MB? Wechsel zu JPG oder optimiere aggressiv.
WebP: kleinere Dateien, breiter Support heute
WebP liefert bei ähnlicher Qualität bessere Kompression als JPG und PNG. Die meisten modernen Crawler akzeptieren es - aber „meiste" ist nicht „alle".
Wann WebP nutzen
- Du kontrollierst den ganzen Stack (Next.js, Vercel, eigene CDN)
- Dateigröße ist kritisch und du hast Fallback-Tests
- Dein CDN liefert WebP mit korrektem
Content-Type: image/webp
WebP-Einstellungen die funktionieren
Export bei Qualität 80-85, 1200 × 630 px. Response-Header prüfen und Bild im Inkognito-Tab öffnen.
<meta property="og:image" content="https://example.com/og.webp"><meta property="og:image:type" content="image/webp">WebP-Nachteile
Ältere Tools und manche Enterprise-Crawler handhaben WebP nicht. Immer mit OpenGraph Check testen, bevor du WebP in Produktion setzt. Im Zweifel: JPG.
Was Plattformen wirklich akzeptieren
Facebook, LinkedIn, X, WhatsApp, Discord und Slack holen og:image per HTTP. JPG und PNG funktionieren 2026 ohne Probleme. WebP klappt auf den meisten, ist aber nicht überall dokumentiert.
Der Content-Type-Header muss zur Datei passen. Eine .jpg mit Content-Type: text/html killt die Vorschau. Gleiches gilt für falsche Extensions am CDN.
In 30 Sekunden entscheiden
- Foto oder weiches Motiv? → JPG
- Fetter Text und Flat Colors? → PNG (Dateigröße optimieren)
- Moderne App, auf allen Zielen getestet? → WebP, optional JPG-Fallback
- Unsicher? → JPG bei 1200 × 630, unter 300 KB
Falsches Format aus Versehen
CDN Content Negotiation
Manche CDNs liefern Browsern WebP, Bots JPG - oder umgekehrt. Crawler bekommen ein anderes Format als erwartet. Prüfe die echte Response mit curl -I https://yoursite.com/og.jpg.
Doppelte Extension
og.jpg.webp oder falsch gelabelte Dateien verwirren Validatoren. Saubere Extension, die zu den Bytes passt.
SVG wird nicht unterstützt
Zeig og:image nicht auf SVG. Social Crawler erwarten Rasterformate. Export nach PNG oder JPG.
Format und Maße zusammen
Format ersetzt keine korrekten Maße. Kombiniere dein Format mit 1200 × 630 px aus dem Plattform-Größen-Guide oder dem allgemeinen Größen-Leitfaden.
Optimierungs-Workflow
- Design bei 1200 × 630 px in Figma, Canva oder im OG-Bild-Generator.
- Export JPG (Standard) oder PNG (textlastig).
- Komprimieren mit Squoosh, TinyPNG oder ImageOptim.
- Upload ans CDN mit langen Cache-Headern.
og:imageauf absolute HTTPS-URL setzen.- Mit OpenGraph Check scannen und Bild-URL im Inkognito-Tab öffnen.
Lädt das Bild trotz richtigem Format nicht, liegt es oft am Server oder CDN. Siehe OG-Bild lädt nicht, nicht Fehlendes OG-Bild beheben (der Artikel behandelt fehlende Tags).
FAQ
Soll og:image PNG oder JPG sein?
JPG für die meisten Sites. PNG, wenn großer Text, Logos oder Flat Graphics JPG-Kompression verschmieren würde.
Unterstützt LinkedIn WebP für og:image?
LinkedIn verarbeitet WebP meist, aber JPG bleibt die sicherste Wahl für maximale Kompatibilität.
Was ist die maximale OG-Bild-Dateigröße?
Unter 1 MB bleiben. 100-300 KB anstreben, damit Crawler vor Timeout fertig sind.
Kann ich AVIF für Open Graph nutzen?
AVIF-Support bei Social Crawlern ist uneinheitlich. Nicht für og:image nutzen, bis du jede Zielplattform verifiziert hast.
Beeinflusst das Dateiformat die Bildmaße?
Nein. Maße sind unabhängig. Immer 1200 × 630 exportieren, egal ob JPG, PNG oder WebP.
Warum sieht mein PNG og:image lokal gut aus, scheitert aber beim Teilen?
Datei zu groß oder CDN liefert Bots einen Fehler. HTTP-Status, Response-Zeit und Content-Type prüfen. Mit OpenGraph Check testen.
Soll ich og:image:type setzen?
Optional, aber hilfreich. Sagt Crawlern das Format vor dem Download. Muss zum echten Dateityp passen.
Fazit
Standard: JPG bei 1200 × 630 px, unter 300 KB. PNG, wenn Text messerscharf bleiben muss. WebP erst nach Bestätigung auf allen relevanten Plattformen. Live-URL mit OpenGraph Check scannen, bevor du teilst.
