Pro-Tipp: Für gute Bildqualität auf Facebook kommt es auch auf die Dateigröße an

Pro-Tipp: Für gute Bildqualität auf Facebook kommt es auch auf die Dateigröße an


Ein Beitrag in der Facebook-Gruppe „Fanpage Admins“ hat uns letzten Monat aufhorchen lassen. Dort fragte Sascha Pfeiffer, ab welcher Dateigröße bei PNGs die Artefakte bei Facebook anfangen. Unter Artefakten versteht man dabei eine Verschlechterungen in der Bildqualität, welche aufgrund der Bild-Komprimierung entstehen. Ihr kennt das vielleicht von JPG-Bildern, bei denen ihr beim Speichern über einen Schieberegler die Bildqualität (und damit die Dateigröße) einstellen könnt. Diese Frage war aber deshalb so interessant, weil das PNG-Dateiformat lediglich eine verlustfreie Komprimierung anbietet. Einen Schieberegler für die Dateigröße gibt es also nicht. In der Theorie kann es bei einem PNG-Bild nie zu einer schlechteren Bildqualität kommen.

Also haben wir unser eigenes kleines Testszenario gebaut, um das Ganze zu überprüfen. Redaktionsintern nennen wir diese Artefakte gerne den „Coca Cola-Effekt“, da er bei Facebook besonders stark bei rotem Hintergrund mit weißem Muster sichtbar wird. Genauso wie beim Coca Cola-Logo. Unser Testobjekt sieht dann auch entsprechend aus: Ein 800 x 800 Pixel PNG-Bild mit rotem Hintergrund und weißer Schrift. Dieses haben wir in Photoshop unkomprimiert gespeichert. Das Ergebnis: Eine 2,6 MB große PNG-Datei (links). Nach dem Upload auf eine Facebook Page erhielten wir dann das Bild rechts:

[column lg=“6″ ] allfacebook
[/column] [column lg=“6″ ] 10806456_890393384327044_3067957018721991147_n
[/column]

Für eine große Version der Bilder bitte klicken.

Das Ergebnis überrascht auf gleich mehreren Ebenen:

  • Die große rote Fläche hat einen minimal anderen Farbton (#fe0002) gegenüber dem Original (#ff0000)
  • Auch das Weiß ist jetzt etwas verwaschen (#f3faff). Im Original war es ein Reinweiß (#ffffff)
  • Die Komprimierungsartefakte (grauer Schleier) rund um die Schrift werden klar erkennbar
  • Statt einem PNG bekommen wir jetzt von Facebook eine JPG-Datei zurück. Facebook hat das Bild also erst konvertiert und dann komprimiert.

Dieses Vorgehen von Facebook ist deshalb sehr merkwürdig, da (zumindest in unserem Beispiel) die verlustbehaftete JPG-Komprimierung des Testbildes noch eine größere Datei erzeugt, als es bei einer verlustfreien PNG-Komprimierung der Fall gewesen wäre. Das Testbild wird also bei Facebook in schlechter Qualität mit 24 Kilobyte Dateigröße abgespeichert, obwohl es auch mit einer PNG-Komprimierung in Originalqualität in gerade einmal 8 Kilobyte gepasst hätte.

Wir haben dann unser Testbild schrittweise kleiner gemacht (über die Kantenlänge des Bildes) und geschaut, ob dies immer der Fall ist. Und tatsächlich gibt es, wie in der Facebook-Gruppe vermutet, eine Veränderung bei einer Dateigröße von einem Megabyte (1024 Kilobyte). Ist die Dateigröße geringer, wendet Facebook wie erwartet die verlustfrei PNG-Komprimierung an.

All dies kann man alleine dadurch umgehen, die Bilder direkt mit einer PNG-Komprimierung zu speichern. Dazu nutzt man in Photoshop zum Beispiel die Funktion „Fürs Web speichern“ oder aber einfach ein Tool, wie das kostenlose ImageOptim, um die PNG-Datei verlustfrei kleinzuschrumpfen. Es lohnt bei jedem Upload also der Blick auf Dateiformat und Dateigröße.

Zusätzlich empfehlen wir euch auch einen Blick in unseren Beitrag zum perfekten Profilbild und Coverfoto aus dem November 2013. Die dort gemachten Angaben zu Profilbildern und Coverphotos stimmen so noch immer.

[panel style=“panel-primary“] [panel-header] Das wichtigste in Kürze
[/panel-header] [panel-content] Wer bei Fotos auf der Facebook Page keine bösen Überraschungen erleben möchte, speichert das Bild am besten als PNG-Datei mit Komprimierung und achtet auf eine Dateigröße von unter einem Megabyte.
[/panel-content] [/panel]

ImageCredits: avtor painter @ shutterstock.com

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone

Es gibt 17 Kommentare

Deinen hinzufügen
  1. 3
    Andreas

    Gut zu wissen, wo der Schwellenwert genau liegt. Danke!

    Kleine Anmerkung:
    Im zweiten Absatz hat sich ein kleiner Fehler eingeschlichen. Bei „Das Ergebnis: Eine 2,6 MB große PNG Datei (rechts)“ müsste „(links)“ stehen. ;)

  2. 5
    D. Koch

    Hallo,
    eine Frage: Gilt die Tatsache, dass png-Bilder unter 1024kb keine Bildqualität beim Hochladen verlieren nur bei Facebook-SEITEN oder auch bei Privaten Profilen??
    Ich ärgere mich nämlich ständig bei meinem Privatprofil, dass vor allem Text in Bildern nach dem Hochladen schrecklich artefaktmäßig aussieht, obwohl er im Originalbild perfekt ist :-(

    • 7
      Alex

      Macht es leider sehr wohl :(
      Fotos die ich auf meiner Seite hochlade sind in 70% der Fälle top. Außer FB hat schlechte Laune.
      Zum Beispiel in Gruppen hochgeladen wird das gleiche Bild zur Cola Flasche. Auf dem privaten Profil sowieso.
      Gruß, Alex

  3. 8
    Frank Steinseifer

    Ist bei der Verwendung von Photoshop CC das Abspeichern als jpg.-Datei und kleiner Dateigröße nicht sinnvoller und vor allem als Stapelfunktion nicht einfacher?
    Gilt Eure Empfehlung auch bei der Veröffentlichung von Fotos bei WORDPRESS?

    P.S.: Im letzten Abschnitt steckt ein kleiner Rechtschreibfehler „Prodilbild“ soll sicher Profilbild heißen!

  4. 10
    Yoram Blumenberg

    Anmerkung: Das ausgewählte Motiv wäre schon als 8-Bit PNG mit 659 KB (no compression) bzw. 27 KB (compressed) deutlich kleiner gewesen.

    Wer nicht über Photoshop verfügt und auch nicht extra Software (z. B. ImageOptim) installieren möchte, kann online sich seine PNGs in optimierte (8-Bit-)PNGs mit TinyPNG umwandeln lassen.

    Hier noch mal eine Liste der verschiedenen Optimierungsmethoden und Dateigrößen zur Übersicht:

    Save as PNG, incl. cs profile (no compression) 2563974 bytes (≈ 2.6 MB)
    Save as PNG, incl. cs profile (no compression) + ImageOptim (cs profile striped) 8177 bytes (≈ 8 KB)
    Save as PNG, incl. cs profile (no compression) + TinyPNG (PNG-8, cs profile striped) 7769 bytes (≈ 7.8 KB)

    Indexed 8-Bit, Save as PNG (no compression) 659375 bytes (≈ 659 KB)
    Indexed 8-Bit, Save as PNG (compressed) 27307 bytes (≈ 27 KB)

    Save as PNG, incl. cs profile (compressed) 40659 bytes (≈ 40 KB)
    Save as PNG, no cs profile (compressed) 37940 bytes (≈ 38 KB)

    Save for Web (PNG-24) 21509 bytes (≈ 21 KB)
    Save for Web (PNG-24) + ImageOptim 7632 bytes (≈ 7.6 KB)
    Save for Web (PNG-24) + TinyPNG (PNG-8) 7769 bytes (≈ 7.8 KB)

    Save for Web (PNG-8) 8922 bytes (≈ 9 KB)
    Save for Web (PNG-8) + ImageOptim 7633 bytes (≈ 7.6 KB)
    Save for Web (PNG-8) + TinyPNG (PNG-8) 7769 bytes (≈ 7.8 KB)

  5. 12
    Yoram Blumenberg

    Die Frage ist, ob Facebook nach Dateigröße (KB) ODER Bildgröße (px) bestimmt, ob ein Bild konvertiert werden muss. Viele CMS (z. B. WordPress) konvertieren Bilder mit ImageMagick oder ähnlichen serverseitigen Tools, wenn ein Bild von den Abmaßen (px) zu groß ist — und leider dann nur zu JPEG mit mittlerer Qualität. Gerade bei sehr grafischen Bildern, wie das obige Beispiel, leidet dann die Qualität sichtbar in großen Farbflächen (Artefakte).

    Ich vermute auch, das Facebook (noch) nicht gebrauch von HiDPI/Retina Bildern macht.

  6. 13
    Alvina

    Ich kann leider nicht bestätigen, dass es mit diesen Empfehlungen hier funktioniert. Mein Testbild ist sogar unter 100 kB und im PNG-Format und es gibt gaaanz arge Artefakte. Habs mit unterschiedlichen dpi-Werten versucht, unterschiedlicher Dateigröße (auch mal über 1 MB) und unterschiedlichen Bildgrößen (Pixel). Das ergebnis sieht immer annähernd gleich aus, siehe: https://www.facebook.com/photo.php?fbid=891913764203485&set=gm.748213491963531&type=1&theater
    Wer hat eine Lösung, die funktioniert?

  7. 15
    Till

    Hab auch rot/weiß versucht und es sieht ganz schlimm aus – als JPG oder PNG in den von Facebook empfohlenen Maßen für Bilderposts – macht keinen Unterschied, auch wenn das PNG unter 100 KB ist. Hier: http://i.imgur.com/VRkgVAS.jpg

    Gibt es da denn keine Lösung? Oder gibt es vielleicht für Unternehmen Bezahlmethoden um unkomprimierte Bilder hochladen zu können?

+ Hinterlasse einen Kommentar