Dateiformate für Social Media Bilder: Jgp, jepeg, png oder gif. Das richtige Dateieformat für Facebook, Twitter, Pinterest, Xing, LinkedIn, Instagram

Das richtige Dateiformat für Social Media Bilder

Was ist besser PNG (Portable Network Grafik) oder JPEG (Joint Photographic Experts Group)? Und wann verwendet man/Frau idealerweise GIF (Graphics Interchange Format), um Bilder für Facebook, Xing, LinkedIn, Pinterest, Twitter, … optimal zu sichern?

Es wäre gut, wenn Du Dir überhaupt diese Frage stellst, denn das Dateiformat beeinflusst das Ergebnis, ob die Bilder, die Du auf Social Media Kanäle hochlädst qualitativ gut oder schlecht aussehen.

In diesem Blogbeitrag spreche ich oft über Facebook. Aber die Thematik unterscheidet sich nicht wesentlich zwischen den Social Media Kanälen. Denn es handelt sich im Grunde genommen tatsächlich um die Vor- und Nachteile der einzelnen Dateiformate. Und da ist es egal, ob Du das Bild auf Facebook, Twitter, LinkedIn, Xing, Pinterest, Instagram … hochlädst.

Das optimale Dateiformat für Facebook Titelbilder

Ich speichere meine Dateien als PNG ab, das machen alle so!

Hartnäckig hält sich das Gerücht, das beste Bildformat für Facebook sei generell PNG … Was ist da dran?
Bis vor ca. 5,5 – 6 Jahren gab es anscheinend* den Vorteil, dass Bilder, die als *.png-Dateien gespeichert wurden, nicht (nochmals) von Facebook kleiner gerechnet wurden und daher besser aussahen als *.jpg-Dateien, die nochmals komprimiert wurden… Da ich mich damals noch nicht intensiv mit Facebook beschäftigt habe, habe ich anno dazumal auch keine Testreihen erstellt…

Was sagt Facebook im Jahr 2018 dazu?

Das ist die Herausforderung, es gibt keine genaue Aussage. Es gibt einmal die Bemerkung „Schnellste Ladezeit bei Verwendung als sRGB-JPG-Datei mit einer Abmessung von 851 x 315 Pixel und einer Dateigröße von unter 100 KB“, gefolgt von einer verschwommen Formulierung, die lautet „Bei Profil- und Titelbildern mit deinem Logo oder Text kannst du durch Verwendung einer PNG-Datei möglicherweise die Qualität verbessern.“

Screenshot von dem Facebook Hilfebereich
Screenshot Facebook Hilfebereich, Link s. unten bei Weiterführende Links

Informationen zu den optimalen Abmessungen in Pixel für Titelbilder entnimmst Du bitte NICHT von dem Screenshot, sondern liest Dir idealerweise meinem Blogartikel „Facebook Titelbilder 2018 – Neue Maße in Pixel“ durch.

Also was nun JPEG oder PNG?

Die Antwort: Nutze das Dateiformat JPEG für ALLE Bilder, für Beitragsbilder und/oder für Bildcomposings, Bild & Textkombinationen, die KEINE großen einheitlichen farbigen Flächen haben.

Für Bilder MIT einfarbigen Flächen + Text nutze bevorzugt PNG und zwar eher das Format PNG 8 anstelle von PNG 24. Ganz wichtig: Achte darauf mit Deiner PNG-Datei unter 1 MB Dateigröße zu bleiben. Weitere Details weiter unten bei Das Dateiformat PNG.

Im Vergleich: Oben links das Original, oben rechts die JPG, unten Links eine PNG, unten rechts eine GIF
Oben links das Original, oben rechts eine JPG (378,7 KB), u. l. eine PNG (1.009 MB), u. r. eine GIF (368,7 KB)

Darum das Dateiformat JPG:

  1. Es komprimiert Bilder auf eine relativ kleine Größe im Verhältnis zu einer sehr guten bzw. guten Darstellungsqualität.
  2. Eine PNG-Datei ist meist größer, ohne ein visuell besseres Ergebnis zu liefern!
  3. Und bei einer GIF-Datei erscheinen oft durch die starke Reduktion der Anzahl von Farben unschöne (Farb-)Abrisse in Verläufen.

Finger weg von einfarbigen Hintergründen + Text

Diese Konstellation ist problematisch! Denn das Dateiformat JPEG hat generell Probleme einfarbige „bunte“  Flächen ohne Artefakte (störende pixelige Stukturen darzustellen!

Oben links das Original, o. r. JPEG Qualitätstufe Hoch, u. l. JPEG Qualitätsstufe Mittel & u. r. JPEG Qualitätsstufe Niedrig. So sehen diese Dateien aus BEVOR sie zu Facebook hochgeladen werden. Da Facebook Dateien über 100 kB nochmals komprimiert, wird die Darstellung noch verschlechtert-
Oben links das Original, o. r. JPEG Qualitätsstufe Hoch, u. l. JPEG Qualitätsstufe Mittel & u. r. JPEG Qualitätsstufe Niedrig.

Solche Artefakte erscheinen nicht nur bei der Farbe Rot, sondern bei allen Farben, die stark gesättigt (= „sehr bunt“) sind. Dieses Problem ist Webdesignern schon seit Jahren bekannt. Je stärker das Bild komprimiert wird, umso mehr Artefakte werden sichbar.

Wenn Du das Bild hochlädst, da sieht es noch ganz appetitlich aus….
ABER Facebook und auch die anderen Social Media Kanäle, rechnen das Bild, dass Du hochlädst, nochmals runter! Und dann sind sie da, die häßlichen sichtbaren Artefakte.

Wie man/Frau am besten dieses Problem vermeidet, steht in dem Blogartikel:
Achtung: Problematische Farben für Socal Media.

Wenn ich JPEG verwende, welche Qualität ist dann „die Beste“?

Kurz und knapp: Verwende NIE JPEG in der Qualitätsstufe Niedrig. Das macht Dateien zwar schön klein (von der Datenmenge her), sieht jedoch IMMER schlecht aus!

In der Regel ist bei Bildern mit etwas unscharfen oder unruhigen Hintergründen die Kompressionsstufe Mittel ausreichend. (Anmerkung: ein unruhiger Hintergrund = wenige bzw. keine einfarbige Bereiche, viele kleine Flächen mit Farbabstufungen, z.B. ein Landschaftsbild mit Bäumen und Büschen…).

Bei einem „normalen Bild“, auf dem z.B. eine Person zu sehen ist, verwendest Du als Qualitätsstufe Hoch. Befindet sich in dem (Titel-)Bild zusätzlich noch Text, dann solltest Du als Qualitätsstufe Sehr hoch verwenden.

Achtung: Die Bilder sehen zwar bei Dir, auf Deinem Rechner, VOR dem Hochladen sehr gut aus, aber Facebook komprimiert das Bild in der Regel sowieso noch einmal… Dann sehen die Bilder schon nicht mehr ganz so toll aus, es können Unregelmäßigkeiten erscheinen, die durch die erneute, automatische Jepeg-Kompression entstanden sind…

Oben links das Original, o. r. JPEG Hoch, u. l. JPEG Mittel, u. r. JPEG Niedrig
Oben links das Original, o. r. JPEG Hoch, u. l. JPEG Mittel, u. r. JPEG Niedrig

Das Dateiformat PNG

Es gibt zwei Arten von PNG: PNG 24 und PNG 8. Diese haben verschiedene Eigenschaften und dadurch unterschiedliche Einsatzmöglichkeiten. Um es gleich vorneweg zu nehmen: Facebook mag das Dateiformat PNG 24 nicht sonderlich …

Ein besonderer Vorteil von PNG 24 ist, das es Transparenz & Semitransparenzen unterstützt. Es ist daher ein Top-Dateiformat um z.B. Logos ohne Hintergrund für PowerPoint-Präsentationen abzuspeichern…

Bilder für Facebook benötigen keine Transparenz oder gar Semitransparenz, daher ist dies Dateiformat in der Regel für Bilddateien, die Du hochlädst nicht sinnvoll. – Außer Du hast Titelbilder mit großen farbigen Flächen, kombiniert mit Text … Allerdings ist in solchen Fällen meist das Dateiformat PNG 8 besser geeignet.

PNG 8 kennt „nur“ Transparenz, keine Semitransparenz und ähnelt daher eher dem GIF-Format. Es generiert eine wesentlich geringere Dateigröße als PNG 24, kann aber ebenso sehr gut einfarbige „bunte“ Flächen, mit sich darauf befindendem Text, sichern.
– Ein kleiner Nachteil von PNG 8 zu PNG 24 und auch zu JPG: Es kann, so wie eine GIF-Datei, nur maximal 256 Farben sichern.

PNG 24 und Facebook

Jedes PNG wird von Facebook garantiert in eine JPEG umgewandelt, wenn die Größe 1 MB überschreitet. PNG-Dateien, die unterhalb von 1MB sind, bleiben als PNG erhalten. Da PNG 24 größere Dateien generieren als PNG 8, sind die von Dir gesicherten PNG 24 Dateien ganz schnell größer als 1 MB und werden dadurch „abgestraft“.

Wenn Du also eine PNG mit mehr als 1 MB hochlädst und Facebook generiert sowieso ein JPEG daraus, dann gehen sämtliche Vorteile der PNG-Datei verloren. Der wichtigste Vorteil von dem Dateiformat PNG für Facebook: einfarbige Flächen werden nicht so schnell optisch fragmentiert.

Entscheide Dich (fast) immer für JPEG! Oben links das Original, o.r. PNG 24 (1,238 MB), u.l. PNG 8 (396,7 KB), u. r. JPEG Hoch (197,3 KB)
Entscheide Dich (fast) immer für JPEG! Oben links das Original, o.r. PNG 24 (1,238 MB), u.l. PNG 8 (396,7 KB), u. r. JPEG Hoch (197,3 KB)

In dem Screenshot oben sehen die Fische optisch bei PNG 24 und beim JPEG, gesichert in der Qualitätsstufe Hoch, gleich gut aus.
– Der kleine Unterschied: Die PNG 24 ist 6,3 x größer als die JPEG-Datei. Da die Größe außerdem 1 MB überschreitet, wird sie durch Facebook garantiert in eine JPEG-Datei umgerechnet und verkleinert.
– Die PNG 8-Datei zeigt hingegen an einigen Stellen bereits Farbabrisse, z.B. im dunklen Bereich oberhalb des rechten Fischkopfes. Hier kann der Farbverlauf von Hell zu Dunkel nicht sauber dargestellt werden und wirkt pixelig.

Das Dateiformat GIF

Die Komprimierung von Bilddaten mit dem Dateiformat GIF funktioniert über eine Reduktion der Anzahl von Farben. Eine GIF-Datei kann maximal 256 Farben haben und Transparenz, wie dies auch beim PNG 8 der Fall ist. Semitransparenz, wie es dem PNG 24-Dateiformat möglich ist, kann das GIF-Format nicht darstellen … Durch die starke Farbreduktion können viele Arten von Bildern, z.B. Landschaftsaufnahmen mit einem tollen Sonnenuntergang (viele Farbschattierungen & Verläufe) überhaupt nicht schön dargestellt werden.

Oben links Original, o. r. GIF mit Dithering (155,2 KB), u. l. GIF ohne Dithering (87,14 KB), u. r. PNG 6 ohne Dithering (78,5 KB)

Vorteile von GIF sind: Kleine Dateigrößen & sehr gute Darstellung von Logos & einfarbigen Flächen, generell von Bilder und Grafiken mit wenigen Farben.

GIF gilt als veraltetes Dateiformat, dass relativ selten eingesetzt wird, da beim selben Bildausgangsmaterial das PNG 8 Dateiformat die gleichen optischen Ergebnisse liefert, dabei jedoch kleinere Dateigrößen liefert.

Aber: GIF ist das perfekte Dateiformat für (GIF-)Animationen!

Dieser kleine Tipp für Alle, die an Online-Besprechungen, Konferenzen & Webinaren teilnehmen, habe ich als animiertes GIF gesichert. Der Beitrag ist oft auf Facebook geteilt worden.

Zu der Thematik GIF Animationen werde ich bei Gelegenheit einen extra Blogartikel verfassen. In diesem Blogartikel gehe ich dann auf die unterschiedlichen Typen von GIF-Animationen ein. Ich zeige Dir obendrein die verschiedenen Optionen zum Sichern & Komprimieren und stelle Dir passende Tools vor, mit denen Du Animationen selbst erstellen kannst.

Besonders interessant: GIF Animationen wertet Facebook nicht als Bilder sondern als Videos! Da Facebook Videos in gewissen Bereichen bevorzugt, ist die Thematik GIF Animation besonders interessant. Und GIF Animationen haben noch weitere Vorteile. Unter anderem können sie kostengünstig selbst erstellt werden und erfreuen sich hoher Beliebtheit bei Facebook Nutzern …

Weiterführende Links:

* Ich habe lange recherchiert, um einen Nachweis zu finden, ob es tatsächlich vor 5,5 – 6 Jahren der Fall war, dass das PNG Dateifomat grundsätzlich ideal war, um eine Kompression der Datei durch Facebook zu umgehen. – Ich habe keinen Beweis dafür gefunden. Also kann es sein, dass dies schon immer ein Facebook-Mythos war … Gefunden habe ich bei meiner Recherche einen Blogartikel, der dank Testreihen & Screenshoots nachweist, dass bereits am 05.12.2014 hochgeladene *.png-Dateien stets in *.jpeg-Dateien konvertiert wurden, wenn diese größer als 1 MB waren. Dieses Verhalten ist also schon lange nicht mehr geändert worden.

https://allfacebook.de/allgemeines/pro-tipp-fuer-gute-bildqualitaet-auf-facebook-kommt-es-auch-auf-die-dateigroesse-an – Bitte vergiss nicht beim Lesen, dass dieser Artikel sehr alt ist und einige Angaben nicht mehr gültig sind!

Screenshot, Fundstelle mit Erstellungsdatum. Also schon im Dezember 2014 war das PNG Dateiformat nicht DAS BESTE für Facebook.

Hier findest Du den Satz „Bei Profil- und Titelbildern mit deinem Logo oder Text kannst du durch Verwendung einer PNG-Datei möglicherweise die Qualität verbessern.“: https://www.facebook.com/help/125379114252045

Abonniere meinen Newsletter

Verpasse nicht den kommenden Blogartikel, der in ca. 1-2 Wochen erscheinen wird.

Erhalte von mir Infos, Tipps & Tricks rund um Facebook & Co. und sichere Dir die 3 *.psd Templates für 2019, für das Facebook Titelbild, das Facebook Profilbild und das Twitter Header-Bild, kostenlos! Hier klicken!

Menü