Neue Größen 2019 – Bilder im Facebook Feed

Die Herausforderung: Welche Größe in Pixel ist die beste, um ein Bild in den Facebook Feed hochzuladen? Mit Google findest Du Blogartikel und viele „Cheat-Sheets“, „Spickzettel“ …

Ja, die sehen professionell aus, nur leider haben die alle ein „kleines Problem“: Die darin empfohlen Größen, liefern keine guten Resultate. Bilder sehen verschwommen oder verpixelt aus … Texte, die in die Bilder plaziert wurden, sehen schrecklich aus … und Du weisst nicht warum!

1. Einleitung – Wie Du diesen Blogartikel liest

Du kannst nur die Ergebnisse lesen und anschließend gleich „ins Tun kommen“ und Deine Facebook Beiträge verbessern.

Lese mehr, wenn Du genau wissen willst, warum die von mir vorgeschlagenen Maße in Pixel für Dein Facebook Marketing optimal sind…

Du bist ein/e Bildbearbeitungs-Profi und/oder auf der Suche nach der ultimativen Wahrheit? – Dann lese diesen Artikel bis zum Ende. Weiter unten findest Du technische Spezifikationen und Test-Details.

2. Die Ergebnisse: 3 optimale Größen, die wichtigsten Informationen

Es gibt nicht nur eine Bildgröße. Es ist sinnvoll, je nach Ausrichtung, 3 verschiedene Bildgrößen zu verwenden: Eine für querformatige, eine für hochformatige und eine für quadratische Bilder …

2.1 Bild Querformat („landscape format“)

• Breite: 1920 Pixel, Höhe 1080 Pixel
• Seitenverhältnis: 16:9
• Dateiformat: JPEG, Qualität „Sehr Hoch“ (= 80)
• Auflösung in Pixel per Inch: 72 ppi

2.2 Bild Hochformat („upright format“)

• Breite: 1512 Pixel, Höhe 1890 Pixel
• Seitenverhältnis: 4:5
• Dateiformat: JPEG, Qualität „Sehr Hoch“ (= 80)
• Auflösung in Pixel per Inch: 72 ppi

Die von mir empfohlene Mindestgröße für hochformatige Bilder mit dem Seitenverhältnis 4:5 ist: 1200 x 1500 px.
– Natürlich sieht es etwas schlechter aus, als mit den optimalen Pixelmaßen 1512 x 1890 px, aber ist eine echte Alternative, wenn Dein Bild einfach zu klein ist.

2.3 Bild Quadrat („square format“)

• Breite: 1920 Pixel, Höhe 1920 Pixel
• Seitenverhältnis: 1:1
• Dateiformat: JPEG, Qualität „Sehr Hoch“ (= 80)
• Auflösung in Pixel per Inch: 72 ppi

3. Warum sind die von mir empfohlenen Größen optimal?

Ich verrate Dir ein Geheimnis: Die Größen, die Du normalerweise im WWW findest, sind suboptimal. Das sind nur Mindestangaben… So wirst Du nie großartige visuelle Ergebnisse erzielen!

Derzeit (ende März 2019) gibt es keine Liste, kein „Cheat-Sheet“, keinen Blogartikel, der eine gute Empfehlung für den Upload von Facebook-Bildern hat. Ich muss mir nur die entsprechenden Seiten ansehen, deren Links ich sammle. Das ist schnell erledigt, denn beim Überfliegen sehe ich: Sie alle schreiben das Gleiche.

Entweder sie kommunizieren „alte Zahlen“ (1200 x 1200 Pixel), die man/Frau früher in der Facebook Hilfe finden konnte. Oder sie kommunizieren die „neuen Zahlen“ (1080 x 1080 px), die Du derzeit auf den Seiten von facebook business: https://www.facebook.com/business/ads-guide/image findest, wenn Du Anzeigen schalten möchtest. Die „alten“ und die „neuen Zahlen“ haben etwas gemeinsam: Das waren noch nie optimale Größen, es sind nur Mindestgrößen!

Oben: Facebook macht keine genauen Angaben für die optimale Größe, für die Breite und Höhe in Pixel. Es gibt weiter unten lediglich eine konkrete Empfehlung für die Mindestgröße eines Bildes. Ja, „ mind.“ ist die Abkürzung für „mindestens“!

• facebook business: https://www.facebook.com/business/ads-guide/image

Bei der Auswahl der Formate orientiere ich mich an die von Facebook empfohlen Seitenverhältnisse, nicht an deren Mindestangaben zu Bildgrößen. Die Seitenverhältnisse, für die ich mich letztendlich, z.T. auch erst nach einigen Tests, entschieden habe: 16:9 „Full Landscape“, 1:1 „Square“ und 4:5 „Vertical (Instagram & Facebook Feed)“.

• facebook business: Best Practices für Seitenverhältnisse https://www.facebook.com/business/help/103816146375741

Facebook leistet echte Hilfestellung bei der Wahl von den bestmöglichen Seitenverhältnissen für Anzeigen (Ads).

Was die genauen Pixelmaße und die Bildqualität betrifft: Ich erstelle eigene Testdateien und führe aufwendige Testreihen durch. Wenn Du hierzu weitere Informationen haben möchtest, lese einfach weiter…

4. Details für Bildbearbeitungsexperten/innen & Wahrheitssuchende

Die folgenden, sehr detaillierten Informationen sind für Leser/innen gedacht, die mindestens über Bildbearbeitungs-Grundkenntnisse verfügen.

4.1. Die Voraussetzungen

Facebook hat seine eigenen Regeln. Diese folgen gr0ßteils dem „gängigen Verhalten“ von Bildern im Internet, den Regeln des „responsive Design“. Doch Facebook bringt zusätzliche Parameter „ins Spiel“. Diese können „die Spielregeln“ völlig verändern…

Die Art und Weise, wie Facebook tatsächlich mit Bildern „umgeht“, ist so mysteriös wie der Google Algorithmus!

Rosita Fraguela

Facebook macht viele Dinge mit den Bildern: Es verschlechtert in der Regel die Dateiqualität, damit das Bild weniger Speicherplatz benötigt; es belohnt und/oder bestraft Dateigrößen in KB bzw. MB; es bevorzugt und/oder benachteiligt manche Bildtypen … Und damit noch nicht genug:

Bilder müssen für die drei wichtigen Gerätetypen passend geliefert werden: Desktop PC (Win & Mac), Tablet (Quer- & Hochformat) und Smartphone (Nachrichten- & Seitendarstellung im Hochformat sowie komplettes Bild im Quer- & Hochformat).

4.2. Warum „agiles Testing“?

Einfache lineare Tests („Wasserfallmethode“) funktionieren nicht, um das responsive Verhalten von Bildern in der Facebook-Umgebung zu testen. Ich führe agile Tests in „Sprints“ durch. Die einzelnen Sprints werden wie Schleifen in eine (nicht immer) lineare Reihenfolge gebracht.

Sie haben stets eine sehr ähnliche Abfolge. Nachdem ein Sprint absolviert ist, liefert mir die Auswertung neue Erkenntnisse. Diese arbeite ich in die nächste Schleife ein… So verwandeln die (Sprint-)Schleifen die Tests in eine Kette der Evolution.

4.3. Analyse und Überlegungen vor dem Testen

Am Anfang der Realitäts-Check: Wie sehen Bilder in Facebook aus? Ich schaue in den Newsfeed und suche nach wirklich schlechten und nach wirklich gut aussehenden Bildern.

Nein, ich meine jetzt nicht, dass ich nach dem Standpunkt eines/einer Designers/Designerin schaue: Ich beurteile nicht ob das Bild orginell und/oder stylisch ist… Ich achte auf die Qualität: Sieht das Bild brillant aus? Oder ist es verschwommen, unscharf oder gar verpixelt?

Ich lade die besten und die schlechtesten Bilder, die ich finde, herunter, analysiere und vergleiche sie, zuerst mit Adobe Bridge: Ich betrachte zunächst die Abmessungen, die Breite & Höhe in Pixelund kontrolliere die Dateigröße.

Dann öffne ich die Dateien in Adobe Photoshop, um die Bilder in 100% Darstellungsgröße anzuzeigen, um so eine genaue visuelle Kontrolle machen zu können.

Diese Übersicht, die ich von der Analyse von 4-8 Bildern erhalte, hilft mir, die Praxis mit der Theorie zu vergleichen.

Nun komme ich zu dem Punkt tief in die Facebook-Hilfe einzutauchen: Ich schaue, was sie ihrem „normalen Benutzern“ empfehlen.

• Facebook Hilfebereich – „Fotos hochladen und bearbeiten“ : https://www.facebook.com/help/www/1703757313215897/?helpref=hc_fnav

Die Angaben zu Bildgrößen, Abmessungen und Dateiformaten, die Facebook „normalen Benutzern“ empfiehlt, sind mangelhaft!

Anschließend lese ich, was sie ihren „Geschäftskunden“ vorschlagen (z.B. Empfehlung für Facebook-Anzeigen, „Facebook-Ads“).

• facebook business: https://www.facebook.com/business/ads-guide/image

Spezifikatione für Geschäftskunden & Webdesigner, die Ads schalten möchten: Die Informationen und Angaben werden genauer, sind aber noch nicht optimal …

Bild Facebook-Feed, bei Design-Empfehlungen steht „Empfohlene Auflösung: Lade das Bild mit der höchsten Auflösung hoch“. Bei „Mit Link“ steht „Empfohlene Auflösung: mind. 1.080 x 1.080 Pixel.“

Nun, mind. ist die Abkürzung für mindestens, nicht für optimal! Fährt man/Frau mit der Maus über das kleine „i“ im Kreis, für Information, erscheint ein Hover-Over. Da steht „Lade das Bild hoch, das dem geforderten Seitenverhältnis entspricht und die höchste Auflösung hat. Es gibt keine Beschränkung der maximalen Auflösung.“

Hier gibt es aber ebenfalls keinen Hinweis, was denn eine/die optimale Bildgröße ist!

Danach suche nach weiteren Informationen, die Facebook (Software-)Entwickler/innen bereit stellen.

• facebook for developers: https://developers.facebook.com/
• „Hochladen von Fotos und Veröffentlichen von Foto…“ https://developers.facebook.com/docs/graph-api/photo-uploads/

Hinweise: Bildformate, maximale Auflösung von PNG, die sonst „abgestraft“ werden.

• facebook for developers: „Image Crops (Bild-Beschnitt)“ https://developers.facebook.com/docs/marketing-api/image-crops/

Bilder werden von Facebook auf Standard-Größen beschnitten

Ein bestimmter Teil des Bildes, ein Ausschnitt wird angezeigt, wenn der Entwickler keine eigenen Größenspezifikationen definiert. Der Rückschluss: Dies gilt vermutlich nicht nur für einige Bilder, das ist wahrscheinlich ein „normales Verhalten“ (Fallback Verhalten) von Facebook, was generell den Umgang mit Bildern betrifft…

4.4. Die Test-Bilder

Ich entwickle Testbilder („Versuchskaninchen“) mit speziellen Indikatoren, die mir helfen, Bilder leichter beurteilen und vergleichen zu können. Ich füge z.B. Farbfelder mit hoher Sättigung, das Gesicht einer Person, einen Verlauf, ein Kreisraster von Linien in Schwarz und ein wenig Text hinzu.

Testbild, quadratsiches Format, für den Facebook Newsfeed bzw. Seitenfeed.

4.4.1 Farbfelder

Farbfelder mit hoher Sättigung sind ein guter Indikator für die Qualität der JPEG-Kompression. Je mehr sie nach dem Upload fragmentiert sind (je mehr Störungen sie aufweisen), desto stärker wurde das Bild komprimiert.

Einfarbige „bunte“ Farbfelder helfen bei der Ermittlung der (Bild-)Qualität.

4.4.2 Portrait einer Person

Das Gesicht einer Person hat mehrere Vorteile: Es ist eine normale Fotografie mit vielen ähnlichen Farbtönen. Ich könnte stattdessen ein Bild von einem Sonnenuntergang verwenden, aber das hat keine natürlichen Hauttöne…. Und das ist auch ein wichtiges Kriterium: Wird es Farbverschiebungen geben oder nicht? Das merkt man sehr schnell bei der Porträtansicht einer Person. Wenn die Person hinterher „krank aussieht“, gab es eine Farbverschiebung 😉

Okay, das ist ein kleiner Scherz, das mit dem krank aussehen… Ich kann die Farben später mit passenden Werkzeugen in Adobe Photoshop messen. Aber zuerst ist es tatsächlich hilfreich nur „einen kurzen Blick“ darauf zu werden… Das hilft mir bei der Entscheidung, ob ich Messwerkzeuge wie das Pipette-Werkzeug verwenden muss oder nicht. Wenn ich keinen Unterschied „auf dem ersten Blick“ sehe, messe ich aus Zeitgründen auch keine Farbwerte.

4.4.3 Verlauf

Der Verlauf hat zwei Vorteile für die Prüfung: 1. Wie bei den einfarbigen Farbfeldern sind Störungen durch extreme Kompression zu erkennen. 2. Die visuellen Ergebnisse sind „empfindlicher“ (genauer). Es kann u.a. einen sogenannten „Banding-Effekt“ geben (der Verlauf wird dann „streifig“), wenn das Bild auf andere Pixelgrößen verkleinert wird und die Interpolation (Neuberechung des Bildes) nicht in angemessener Qualität erfolgt.

Aufbau eines Testbildes: Die Ebenen in Adobe Photoshop mit eingeblendetem Farbverlauf.

4.4.4 Kreisförmiges Raster (Kreisraster)

Das Raster mit den dünnen schwarzen Linien hat mehrere Vorteile:

a). Es ist ein perfekte Konstruktion, um die Schärfe eines Bildes zu kontrollieren. Du kannst dafür einfach in die Mitte schauen… – Dateien zur Kontrolle der Druckerqualität verwenden oft mehrere Arten von Rastern, rechteckige und kreisförmige. Auch Testfotos, die für die Prüfung von Kameraobjektiven gemacht werden, haben irgendwo ein schwarz-weißes Raster integriert….

b). Darüber hinaus ist es ein großartiger Qualitätstest für die JPEG-Kompression und/oder das Runterrechnen („downsizing“) des Bildes (Breite & Höhe). – Ja, Facebook verwendet eine (starke) Kompression oder eine masse Verkleinerung, alternativ kombiniert es beide Möglichkeiten, um ein Bild „kleiner“ zu machen (weniger Größe in KB/MB).

c). Textplatzhalter: Das Kreisraster ist ein wunderbarer Platzhalter für Text, der mit einem sehr dünnen Schriftschnitt gesetzt wurde (z.B. light oder ultralight …). – Wenn die dünnen schwarzen Linien später unschön angezeigt werden, wird der Text, den Du auf dem Bild platziert hast, im gleichen Kontext, ebenfalls suboptimal aussehen

Das Kreisraster mit den dünnen Linien, das ich für meine Tests verwende, habe ich mit Adobe Illustrator selbst erstellt. Es handelt sich um eine spezielle Variante des „Siemens-Sterns“. https://en.wikipedia.org/wiki/Siemens_star. Mit seinen sehr dünnen Linien ist er äußerst präzise und zeigt sehr schnell Pixelverschiebungen.

Da ich das Kreisraster als Vektorobjekt gespeichert habe, kann ich es als „Smart Object“ in den Adobe Photoshop-Dateien platzieren, die ich als Original-Testdateien verwende.

Den abgewandelten „Siemens-Stern“, mit der kreisformigen Aussparung, kann ich bei Bedarf ohne Qualitätsverlust vergrößern bzw.verkleinern .

4.4.5 Text

Links unten integriere ich weißen Text: Ich benenne die Bilder passend und nummeriere sie durch, um den Überblick zu behalten. Der weiße Text ist darüber hinaus ein sehr guter Indikator für die (Bild-)Schärfe, wie das Kreisraster. Der Text ist eine Art „weißes Gegenstück“.

4.5 Test-Vorbereitungen für den 1. Sprint

Ich teste zuerst das quadratische Format. So bekomme ich zunächst Informationen, die relativ orientierungs-unabhängig (Quer- & Hochformat) sind.

Es ist wichtig, für die Durchführung der Tests kein (privates) Profil zu verwenden. Profile sind für den persönlichen Gebrauch bestimmt. Facebook benachteiligt private Profile teilweise... Du kannst das selbst beobachten, indem Du z.B. die Vorschau der Titelbilder für (private) Profile mit Titelbildern für Facebook-Seiten vergleichst… Ich erzähle Dir ein anders Mal mehr darüber …

Ich wähle 3 Größen in Pixel:

• a) 1080 x 1080 Pixel – Die „neue“ Empfehlung findest du auf den Facebook-Hilfeseiten. Ich weiß schon jetzt, dass diese Pixelgröße kein Optimum sondern nur ein Minimum ist. Ich brauche diese Dateien als Referenz, um alle anderen Dateien zu vergleichen.
  • Ich speichere 3 verschiedene JPEG-Dateien mit diesen Eigenschaften: „Maximal“ (= Qualität 100), „Hoch“ (= Qualität 60) und „Mittel“ (= Qualität 30) und lade sie auf einer Facebook-Seite hoch.
• b) 2160 x 2160 Pixel – Das sind die von Facebook empfohlenen Pixelmessungen 1080 x 1080 Pixel mit dem Faktor 2 multipliziert. Das ist eine häufig genutzte Webdesign-Methode zur Bildoptimierung für HD-Displays. Als Qualitätsfaktor verwendet man/Frau x 2 .
  • Ich speichere 3 verschiedene JPEG-Dateien mit diesen Eigenschaften: „Maximal“ (= Qualität 100), „Hoch“ (= Qualität 60) und „Mittel“ (= Qualität 30) und lade sie auf einer Facebook-Seite hoch.
• c) 1920 x 1920 Pixel – Ich verwende 1920 Pixel im Quadrat, weil 1920 für viele Bildformate „eine magische Zahl“ ist. 1920 x 1080 ist zum Beispiel „Full HD“ (Full High Definition) für eine Vielzahl von Geräten, wie TV, einige Computerbildschirme, DVD-Player, Videokameras, etliche Smartphones…
  • Ich speichere 3 verschiedene JPEG-Dateien mit diesen Eigenschaften: „Maximal“ (= Qualität 100), „Hoch“ (= Qualität 60) und „Mittel“ (= Qualität 30) und lade sie auf einer Facebook-Seite hoch.

Es ist kein Zufall, dass Facebook die 1080 x 1080 px empfiehlt. Es ist „die magische 1080“ von 1920 x 1080 px, vermute ich…

Übersicht der quadratischen Bilder, mit verschiedenen Pixelmaßen und JPEG-Qualitäten.

4.6. Der 1. Test Sprint

Ich lade die drei 2160 x 2160 px Bilder mit den unterschiedlichen JPEG-Qualtitäten auf eine Facebook Seite hoch.

Dann lade ich die Bilder von Facebook über einen (Desktop-) Internetbrowser herunter. Ich liebe es, Firefox zu benutzen, wegen der praktischen Entwickler-Tools, die es bietet. Aber der Browser ist in dieser Testumgebung nicht wirklich relevant…Dann mache ich umfangreiche Screenshot-Serien: Alle Bilder müssen systematisch als Screenshot gesichert werden. Auf allen 3 Typen von relevanten Geräten: PC-Bildschirm (Win oder Mac), Tablet (Hoch- und Querformat), Smartphone (Hochformat).

Smartphone: Screenshots der Facebook Beiträge mit den integrierten quadratischen Bildern.

Informationen über die von mir verwendeten Test-Geräte, findest Du im Abschnitt 5. Die Test-Geräte („test devices“).

Sämtliche Screenshots, die ich mache, zeigen zuerst das Bild innerhalb des News- und/oder Seitenfeeds, dann klicke/tippe ich auf die Bilder, um den „Vollbildmodus“ anzuzeigen (Bild wird komplett angezeigt) und wieder Screenshots zu machen…

Smartphone: Screenshots der Bilder in der „Vollansicht“, wenn man/Frau auf das Bild klickt bzw. tippt.

Zusammenfassung:

• Ich lade 3 Bilder hoch, alle 3 haben die gleiche Größe in Pixel, aber unterschiedliche JPEG-Qualitäten, sie haben alle 72 dpi als Auflösung.
• Ich habe alle 3 Bilder heruntergeladen, um zu sehen, was Facebook mit ihnen gemacht hat…..
• Ich mache alle Arten von Screenshots auf meinen repräsentativen Testgeräten.

Der Abschluss des ersten Testsprints: Nach dem Vergleich der hochgeladenen Bildern mit den untergeladenen Bildern sowie mit den Screenshots, sehe ich, dass die JPEG-Qualität „Mittel“ (= Qualität 30) IMMER schlecht aussieht. – In den Screenshots des Seitenfeeds sehe ich einen „Rauscheffekt“ in den Bildern. Ich sehe auch Pixelfraktale in den Farbfeldern oben und „Banding“ (Streifenbildung) im Verlauf.

Bild mit „Streifenbildung“ im Verlauf: Die JPEG-Qualität bzw. Bildqualität ist zu gering.

Die interessanteste(n) Entdeckung(en):

• Die 2160 x 2160 px Bilder werden automatisch auf 1890 x 1890 Pixel verkleinert! (vermutlich „Fallback-Größe“, siehe „4.3. Analyse und Überlegungen vor dem Testen“)
• Die Dateigröße wird stets reduziert und variiert zwischen 600 und 400 KB. Die Uploads waren 2,63 MB, 797 KB und 719 KB groß.

4.7. Der 2. Test Sprint

Von nun an fange ich an die „Mittlere Qualität“ JPEGs zu ignorieren. Da sie einfach eine zu schlechte visuelle Qualität liefern.

• Eigentlich wusste ich aus Erfahrung bereits vorher, dass „Mittlere“ Qualität keine optimale Qualität sein kann. Aber da Facebook Bilder nach dem Hochladen z.T. sehr stark komprimiert, gab es die Möglichkeit, dass der Unterschied zwischen „Hoher“ und „Mittlerer“ Qualität sich nicht so stark bemerkbar machen würde… – Aber es ist definitiv so, dass die mittlere Qualität nach der nochmaligen Runterrechnung ein Ergebnis wie „Niedrige“ Qualität liefert. – Die „Niedrige“ Qualität teste ich grundsätzlich nicht, denn da hat man/Frau eine 100%ige Wahrscheinlichkeit, dass das Bild gräßlich aussieht!

Diese 4 Bilder werden hochgeladen, runter geladen und ausgewertet…

Ich lade 4 quadratische Bilder hoch: Zwei mit 1920 x 1920 px und zwei mit 1080 x 1080 px, jetzt nur noch in zwei verschiedenen Qualitäten: „Maximal“ (= Qualität 100) und „Hoch“ (= Qualität 60).

Ich möchte sehen, ob ihre Pixelmaße auch in der (Pixel-)Größe verändert werden… – Sie werden übrigens nicht in der Größe verändert, sie behalten ihre Abmessungen bei.

Was mir auffällt: Dass die Dateigröße der heruntergeladenen Dateien sehr nahe beinander sind: 364 kB und 379 KB. Das gilt für die beiden 1920 x 1920 Pixel Bilder. Zuvor gab es einen großen Unterschied (1,84 MB und 580 KB für die beiden Versionen).

Wie erwartet sehen die Bilder mit 1080 x 1080 px schrecklich aus. Sie weisen einen massiven Qualitätsverlust auf, man/Frau sieht überall Pixelfraktale. Die Zwischenräume zwischen dem Kreisraster, in dem sich der Verlauf befindet, sehen furchtbar aus…

Die Bilder mit den größeren Pixelmaßen 1920 x 1920 px sehen viel, viel besser aus. Aber: Facebook bestraft das größte Bild von allen! Die Qualität „Maximum“ wird stärker komprimiert als die Qualität „Hoch“. Diese „Benachteiligung“ ist nicht extrem, aber messbar!

Ich frage mich, ob Facebook Dateigrößen in KB/MB bestraft, die 1 MB überschreiten…? Das muss ich testen!

4.8. Der 3. Test Sprint

Jetzt konzentriere ich mich mehr auf die Dateigrößen in KB/MB. Und ich erstelle neue Testbilder:
a) 1890 x 1890 Pixel – Das quadratische Bild. 1890 px, die Pixelmessung, in die Facebook das größte Bild vom ersten Test-Sprint reduziert hat. 1890 px wird nun für mich zu einer „besonderen Zahl“!
b) 1080 x 1920 Pixel – Das Hochformat. Ja, ich möchte diese „magischen Zahlen“ in der vertikalen Ausrichtung testen.
c) 1920 x 1080 Pixel – Das Querformat. Wenn Du den Text weiter oben gelesen hast, muss ich Dir nicht erklären, warum ich diese „magischen Zahlen“ auch im Querformat verwende.

Ich speichere die drei Bildformate in 3 JPEG-Qualitäten. – Nicht alle auf eine „fixe Qualitätsstufe“, sondern je nach Dateigröße… So ist immer eine Version etwas größer als 1 MB und die zweite Version etwas kleiner als 1 MB, z.B. 911 KB… Die dritte Version hat stets die Qualität „Hoch“ (= Qualität 60), um eine Referenznummer zu haben.

Nach dem Hochladen, Herunterladen, Auswerten…

Ich habe herausgefunden, dass die Dateigrößen, die sich nahe beieinander befinden, nicht den gleichen Effekt wie im 2. Sprint zeigen. Meine Vermutung: Es ist vielleicht eine Toleranz implementiert. Facebook liebt es, mit Toleranzen in Prozent zu arbeiten. Ich vermute es, denn ich habe das irgendwann in der Hilfe für Entwickler/innen gelesen…

Okay, ich werde das für die nächsten Testbilder im Auge behalten! Möglicherweise, wenn die Größen stärker differenzieren, sich viel mehr unter oder über 1 MB bewegen, erhalte ich die Resultate, die ich zuvor im zweiten (Test-)Sprint gesehen habe.

Das quadratische Format: 1890 x 1890 px liefert wirklich gute Ergebnisse. Ich mache eine A/B-Testreihe zwischen dem 1920 x 1920 px und dem 1890 x 1890 pxFormat.

Der A/B-Test auf visuelle Unterschiede der heruntergeladenen Dateien ist so gering, dass ich weitere Parameter hinzufügen muss, um zu einer Entscheidung zu kommen: Ich vergleiche nun die Screenshot der beiden quadratischen Formate miteinander…

• Der Vergleich beider Formate, der Smartphone Screenshots (Ansicht im Seitenfeed sowie erweiterte Ansicht im Hochformat) zeigt, dass eines der 1920 x 1920 px Bilder in der erweiterten (Hochformat-) Ansicht ein sehr unscharfes Ergebnis liefert. Dieses Bild ist „raus aus dem Spiel“ für weitere Tests.
• Nun ein Vergleich der restlichen Bilder von den Tablet Screenshots – Ansicht im Seitenfeed (Hoch- & Querformat); erweiterte Ansicht (Hoch- & Querformat): Es gibt keine wirklichen visuellen Unterschiede.
• Kontrolle: Ein Vergleich der Screenshots des Desktops (einige Ansichten des Newsfeeds, alle Ansichten im Seitenfeed + jeweils erweiterte Ansicht): Diesmal sehen die 1920 x 1920 px Bilder im Newsfeed viel besser aus als die 1890 x 1890 Pixel. – Der Unterschied ist offensichtlich! Jetzt habe ich die perfekten Maße in Pixel für quadratische Bilder: 1920 x 1920 px!

Zeit, eine Test-Serie für die passende JPEG-Kompression(en) und entsprechende Dateigrößen zu erstellen, um hier die beste Empfehlung zu finden.

Das optimale Querformat

Facebook Feed – Bild quer: Die ideale Größe in Pixel für Bilder im Querformat.

Die Bilder mit den Pixelmaßen 1920 x 1080 px liefern sehr gute Ergebnisse. Optimal: Das Testchart e) mit der Jpeg-Kompression „Sehr Hoch“ (Qualität = 80). Ich werde hier keine weiteren Tests mehr vornehmen, denn das Format hat viele Vorteile:

Es besitzt das Seitenverhältnis 16:9 („Full Landscape“) und lässt sich für mehrere Social Media Kanäle bzw. Plazierungen verwenden. So ist es u.a. das ideale Format für Facebook Titelbilder für (private) Profile, Seiten und Gruppen… Siehe meinen Blogartikel Facebook Titelbilder 2018 – Neue Maße in Pixel lesen. Die darin beschriebenen Größen, Breite & Höhe in Pixel und weitere Spezifikationen sind immer noch gültig.

4.9. Der 4. Test Sprint

Um das beste quadratische Bild, inkl. Empfehlung zur Dateigröße und JEPG-Kompresion zu definieren, mache ich Test mit unterschiedlichen 1920 x 1920 px Bildern.

Ich habe diese Bilder hochgeladen:

Testchart A: „Maximale“ JPEG Qualität (= Qualität 100) = 1,92 MB.Testchart B: Gespeichert bei genau 1 MB, mit benutzerdefinierter Qualität.Testchart C: Knapp unter 1 MB = 995 KB, mit benutzerdefinierter Qualität.Testchart D: „Hohe“ JPEG-Qualität (= Qualität 60) = 634 KB.

Die heruntergeladenen Bilder haben später: A 397 KB B 398 KB C 397 KB D 409 KB

Jetzt untersuche ich ihre visuelle Qualität:

• Alle heruntergeladenen Bilder sehen fast gleich aus. Ja, ich kann insgesamt Qualitätsverluste sehen, aber sie haben alle in etwa das gleiche Aussehen.
• Tablet „Hochformatansicht“: A, B, C, D sehen gleich aus.
• Tablet „erweiterte Ansicht“: A, B, C, D sehen gleich aus.
• Smartphone „Hochformatansicht“: A, B, C, D sehen gleich aus.
• Smartphone „erweiterte Ansicht“: A, B, C, D sehen gleich aus.
• Auf dem Desktop, im Seitenfeed: A, B, C, D sehen gleich aus. Leider weisen alle eine ziemlich schlechte Bildqualität auf.Ich sehe, dass auf dem Desktop die Bilder im Seitenfeed eine wesentlich schlechtere Qualität in der Voransicht haben, als in allen anderen Ansichts-Modi!
• Auf dem Desktop, die erweiterten Bilder: A, B, C, D sehen gleich aus.

Das Ergebnis – Die optimalen Vorgaben, um quadratische Formate für Facebook zu speichern:

1920 x 1920 px in einer besseren Qualität als „Mittel“ (= Qualität 30). Du kannst z.B. „Hohe“ JPEG-Qualität (= Qualität 60) verwenden. Um auf der sicheren Seite zu sein, achte beim Hochladen des Bildes darauf, dass die Bildgröße unter 1 MB liegt. Denn Bilder können „bestraft“ werden, wenn sie eine größere Dateigröße haben, siehe 3. (Test-)sprint.

4.10. Der 5. Test Sprint

Double-check, die Überprüfung: Die „neue“ Facebook-Bildempfehlung lautet 1080 x 1080 Pixel. Die „alte“ Empfehlung war 1200 x 1200 px. – Ich weiß, dass es eine Mindestempfehlung ist/war. So sah ich nicht die Notwendigkeit, diese zu testen… Aber da es so viele „Cheats Cheats“, also „Spickzettel“, Infografiken und Blogartikel gibt, die 1200 x 1200 px immer noch empfehlen, führe ich ein kleine eine A/B-Testreihe durch …

Ich erstelle ein 1200 x 1200 px Bild, mit einem „doppelten Verlauf“ auf der linken Seite.

Ich habe mich für diese Verbesserung der Tests entschieden, um mehr Unterschiede zwischen Farben zu sehen, die hoch gesättigt sind und anderen, die eine niedrige Sättigung haben… Dann kann ich größere Unterschiede sehen, wenn die JPEG-Qualität reduziert wird.

Ich habe diese Bilder hochgeladen:

Testchart E: „Maximale“ JPEG-Qualität (= Qualität 100) = 993 KBTestchart F: „Sehr hohe“ JPEG-Qualität (= Qualität 80) = 490 KBTestchart G: „Hohe“ JPEG-Qualität (= Qualität 60) = 305 KB

Die heruntergeladenen Bilder haben anschließend: E 190 KB F 190 KB G 196 KB

Jetzt betrachte ich ihre visuelle Qualität:

• Alle heruntergeladenen Bilder sehen fast gleich aus. Sicher, ich kann insgesamt Qualitätsverluste sehen, aber sie haben alle das gleiche Aussehen. Das ist kein Wunder, denn Facebook hat sämtliche Dateigrößen mehr oder weniger auf 190 KB Dateigröße gebracht
• Ich überspringe die Thematik der gleichen Größe und Qualität, da sie nach dem Hochladen alle gleich aussehen… – Es ist interessanter einen Vergleich zwischen den 1080 x 1080 px, den 1200 x 1200 px und den 1920 x 1920 px Bildern zu machen.– Nun, die „alte“ Größe 1200 x 1200 px sieht in jeder Hinsicht besser aus als die „neue“ Größe 1080 x 1080 Pixel.– Das überrascht mich nicht. Denn je weniger Pixel das Bild hat, umso eher wird es durch die Neuberechnung von Facebook qualitativ nochmals verschlechtert.– Ganz zu Schweigen davon, dass ein Bild mit relativ geringer Pixelanzahl, in einer erweiterten Ansicht (egal ob auf Desktop, Tablet oder Smartphone), einfach im Nachteil ist. Denn je mehr Pixel, desto mehr Details und Schärfe!
• Und ja: 1920 x 1920 px sieht wesentlich besser aus als 1200 x 1200 px! So kann ich ohne zu zögern 1920 x 1920 px als „die beste Größe“ für quadratische Facebook-Bilder empfehlen.

4.11. Der 6. Test Sprint

Das Hochformat muss überarbeitet werden. Das in Abschnitt 4.8 Der 3 .Test Sprint erstellte Bild, das 1080 x 1920 Pixel groß ist, liefert keine guten Ergebnisse im Tablet-Hochformat und im Smartphone-Modus:Es ist oben und unten beschnitten, in der normalen Feed-Ansicht muss man/Frau scrollen. – In der erweiterten Ansicht sieht es gut aus, aber das hilft nicht wirklich. Ich möchte eine Empfehlung für ein Hochformat geben, welches in sämtlichen Ansichtsmodi gut aussieht und das eben, wenn möglich, ohne zu scrollen.

Tablet, Hochformat-Ansicht: Das Bild wird oben & unten bechnitten UND man/Frau muss scrollen. Das ist suboptimal!

Jetzt wird das Seitenverhältnis immer wichtiger. Ich muss das Verhältnis 9:16 von 1080 x 1920 px ändern, auf ein anderes Verhältnis, das hoffentlich besser passt

Hierfür sehe ich mir genau die Ratschlägen von Facebook aus dem „Hilfebereich für Werbung“ an…

• facebook business: Grundlagen Tipps zur Anzeigengestaltunghttps://www.facebook.com/business/help/68265549543525

Nach der Ansicht der oben gezeigten Übersicht, kommen als mögliche Seitenverhältisse für das Hochformat in Betracht: 2:3 und 4:5. Schaue ich mir allerdings folgende Seite an, sortiere ich 2:3 gleich aus, denn 4:5 ist viel interessanter, da es für Instagram und den Facebook Feed geeignet ist.

• facebook business: Best Practices für Seitenverhältnisse https://www.facebook.com/business/help/103816146375741

Für das Hochformat werde ich also 4:5 nutzen und erstelle folgende Testdateien:

• Breite 1080 px x Höhe 1350 px: 1080 px ist einer der Werte von dem „legendären“ 16:9 Format 1980 x 1080px und gleichzeitig ist 1080 x 1080 px die empfohlende Mindestgröße für quadratische Bilder von Facebook…
• Breite 1200 px x Höhe 1500 px: 1200 x 1200 px war die „alte“ empfohlende Mindestgröße für quadratische Bilder von Facebook…
• Breite 1512 px x Höhe 1890 px: 1890 px ist ein vermutlich ein „Fallback-Pixel-Wert“ von Facebook, wenn Bilddateien sehr groß sind, siehe „4.3. Analyse und Überlegungen vor dem Testen“ und „4.6. Der 1. Test Sprint“.

Die „passenden Gegenstücke“ zu den „magischen Zahlenwerten“, passend für das 4:5 Format, ich über den Aspect Ratio Calculator errechnet:

JPEG-Kompression: Ich speichere folgende JPEG-Qualitäten ab: „Hoch“, „Sehr hoch“ und „Maximal“. Eigentlich weiss ich schon, dass „Sehr hoch“ tatsächlich eine erheblich bessere Qualität als „Hoch“ liefert, trotz oder gerade wegen der Neuberechnung von Facebook. – Ich erstelle diese Dateien dennoch, der Vollständigkeit halber, für zukünftige Tests mit Instagram, …

Hochladen werde ich daher von jeder Größe 2 Dateien („Sehr hoch“ und „Maximal“). Es sind derzeit also 6 Versuchskaninchen im Rennen.

Ein Vergleich der heruntergeladenen Dateien ergibt, dass beide JPEG-Qualitäten quasi auf die gleiche Dateigröße von Facebook runtergerechnet werden. Z.B. hat das Testbild „Testchart 0“ (Qualität „Sehr Hoch“) 839 KB vor dem Hochladen, nach dem Runterladen nur noch 315 KB. Das Bild „Testchart P“ (Qualität „Maximal“) hat vor dem Hochladen 1,61 MB, nach dem Runterladen nur noch 313 KB.

Wie zu erwarten liefern die beiden Bilder mit der größten Pixelbreite (1512 x 1890 px) das beste visuelle „Endresultat“: Sie haben die geringste sichtbare Jpeg-Fragmentierung und das geringste Banding (Streifenbildung im zweifarbeigen Verlauf).

Aber da gib es etwas, was viel wichtiger ist: Wie sehen die Bilder im Facebook Feed auf den mobilen Endgeräten, dem Tablet und dem Smartphone aus? Die Bildgröße, die hier am besten „rüberkommt“ , wird das „Rennen gewinnen“…

Smartphone Facebook Feed: Okay, nun wird es spannend, ich sehe mir die Bilder in der normalen Beitragsansicht im an. Und auch die „Komplettansicht“ betrachte ich mir in Ruhe…

Da die beiden Bilder Testchart O und Testchart P visuell so nahe beieinander sind, entscheide ich mich für Testchart O mit der Jpeg-Qualität „Sehr Hoch“. Hier kannst Du Dir das Bild direkt im Facebook Beitrag ansehen: Hochformat-Facebook

Das 4:5 Finale: 1512 x 1890 px gegen 1536 x 1920 px

Jetzt fehlt nur noch der direkte Vergleich von dem Testchart O und dem neu erstellten Testchart Q (1584 x 1980 px, Jpeg-Qualität „Sehr Hoch“).

Ich erstelle auch noch ein Testchart R (1584 x 1980, Jpeg-Qualität „Maximal“). Da dieses Bild beim Hochladen deutlich mehr als 1 MB hat, nämlich 1,63 MB besteht die Möglichkeit, dass es von Facebook „abgestraft wird“…

Da kommt keine Freude auf: Ich habe beide Bilder hochgeladen und der Anblick in der normalen Desktop-Ansicht sieht schlimm aus: Links oben der Verlauf sieht sehr fragmentiert aus…
Hier kannst Du Dir das Testchart Q, mit dem problematischen blauen Verlauf, direkt im Facebook Beitrag ansehen: Blau-Facebook

Ich muss die Farben des Verlaufs ändern. Ich nehme gleich den identischen Farbverlauf wie für das Testchart P und O.

Herausforderung Farben & Verläufe: Es gibt Farben, die massive Probleme bereiten. Einige Leute denken, dass sei nur bei der Farbe Rot der Fall, aber so einfach ist es nicht… Bei Interesse, kannt Du Dir sehr gerne folgenden Blogartikel durchlesen: Achtung: Problematische Farben für Social Media

Ja, es liegt tatsächlich an dem Verlauf, … Das Testchart S sieht besser aus.

Fazit: Zwischen den Bildern mit der Auflösung von 1512 x 1890 px und 1536 x 1920 px gibt es quasi keinen Unterschied. Daher empfehle ich das etwas kleinere Format 1512 x 1890 px.

Als Alternative bietet sich das Format 1200 x 1500 px. Es sieht zwar etwas schlechter aus, aber ist wunderbar geeignet, wenn man/Frau eben kein so großes Bild zur Verfügung hat.

5. Die Test-Geräte

Für die Kategorien Desktop-PC, Tablet und Smartphone verwende ich Test-Geräte („test-devices“). Ich verwende die Geräte als „Muster-Exemplare“, zwecks Kategorisierung. – Es sind quasi „Arche-Typen“, da die Geräte verschiedene Auflösungen & Seitenverhältnisse haben. Dadurch passen sich die Bilder auch etwas unterschiedlich responsive an…

5.1 Desktop-PC

Macbook Pro (15 Zoll, 2017), Betriebssysteme Mac iOS und Win 10 (über Bootcamp), stets die aktuellsten Betriebssysten-Versionen.

• Monitor des Macbooks: 2880 x 1800 Pixel bei 220 ppi, 15,4 “ (39,11 cm Diagonale).
• „Externer“, zusätzlicher Monitor: NEC MultiSync PA301W, 29,8″ (30″, 75,6 cm Diagonale) .

5.2 Tablet

iPad Mini 4 – 2048 x 1536 Pixeln bei 326 ppi, 7,9″ Multi-Touch Display (20,1 cm Diagonale.

5.3 Smartphone

iPhone 7 – 1334 x 750 Pixel bei 326 ppi, Retina HD Display, 4,7″ Widescreen LCD Multi-Touch Display (11,94 cm Diagonale).

6. Versionen/Aktualisierungen

Ich aktualisiere diesen Blogartikel, falls es Änderungen geben sollte. Stand aktuell 28.03.2019

Wenn Dich diese Thematik Bildformate für Facebook interessiert, kannst Du den Blogartikel Facebook Titelbilder 2018 – Neue Maße in Pixel lesen. Auch wenn hier noch die Jahreszahl 2018 enthalten ist, an der Titelbildgröße für Facebook Profile, Seiten & Gruppen hat sich in den letzten Monaten nichts geändert.