Darstellung von Bildern in der neuen Facebook-Timeline („Chronik“)

Seit Facebook die User und seit Kurzem auch die Seiten auf das neue „Timeline“-Format (deutsch: „Chronik“) umstellt habe ich mich über die furchtbare Darstellung von Fotos gewundert und geärgert. Nachdem ich keine Informationen gefunden habe, wie man das optimieren könnte, habe ich mich hingesetzt und selbst ausprobiert. Vermutlich folgt das alles ohnehin einem einfachen Algorithmus, der sich mir nur noch nicht erschlossen hat, daher veröffentliche ich hier mal die Einzelergebnisse und freue mich über erfolgreiche Systematisierungsversuche!

Zusammenfassung:

Damit Fotos in allen Darstellungsformen (Timeline, „Highlight“ über beide Spalten und Newsfeed der User) gut aussehen, sollten folgende Regeln beachtet werden:

• Quadratische Fotos sollten nicht kleiner als 403*403 und nicht größer als 478*478 Pixel sein.
• Hochformatige Fotos sollten vermieden werden, denn selbst wenn sie nicht beschnitten werden, sehen sie in den verschiedenen Darstellungen eher klein und verloren aus. Wenn sie aber beschnitten werden sind sie üblicherweise völlig unbrauchbar, da wesentliche Teile des Fotos fehlen.
• Querformatige Fotos sollten mindestens 843 Pixel breit sein und ein Seitenverhältnis von mindestens 1:2,1 haben (also zum Beispiel 500*1050 Pixel).

Timeline:

Die (einspaltige) Darstellung der Fotos in der Timeline ist maximal 403 Pixel breit und maximal 403 Pixel hoch.

Wenn ein Foto quadratisch und größer ist, wird es proportional auf diese Werte verkleinert und nicht beschnitten.

Ist ein Foto aber kleiner als 403*403 Pixel wird es auf dieses Format aufgeblasen, das ist natürlich unschön, da das Bild dann auspixelt. Quadratische Fotos sollten daher immer mindestens 403 Pixel Kantenlänge haben.

Hochformatige Bilder werden zunächst auf eine Breite von 403 Pixel vergrößert bzw. verkleinert, und dann wird – in der Default-Ansicht – der untere Teil weggeschnitten um auf die maximale Höhe von 403 Pixel zu kommen.

Kleine hochformatige Bilder, die maximal 403 Pixel hoch sind, werden nicht beschnitten, sehen aber etwas verloren aus.

Querformatige Bilder werden zunächst auf eine Höhe von 403 Pixel vergrößert bzw. verkleinert, dann werden sie rechts und links symmetrisch beschnitten, was oft auch nicht besonders hübsch ist.

Kleine querformatige Bilder, die nicht breiter als 478 Pixel sind, werden proportional auf eine Breite von 403 Pixel verkleinert und nicht beschnitten.

Stark querformatige Bilder (Seitenverhältnis 1:2,1 oder größer) werden in jeder Größe nur proportional auf 403 Pixel Breite verkleinert und nicht beschnitten!

„Highlight“-Modus in der Timeline:

Noch komplizierter wird es, wenn man die Fotos im „Highlight“-Format quer über beide Spalten darstellen will (das ist das Stern-Symbol in der rechten oberen Ecke eines Fotos). Diese Darstellungsform ist jedenfalls übersichtlicher als das zweispaltige Layout, es spricht also nichts dagegen, davon ausgiebig Gebrauch zu machen!

Prinzipiell sind die Highlight-Bilder 843*403 Pixel groß, der Teufel sitzt aber im Detail:

Quadratische Bilder werden nur bis zum Format von einschließlich 478*478 Pixel auch tatsächlich quadratisch dargestellt und proportional auf 403 Pixel Kantenlänge verkleinert.

Größere quadratische Bilder werden auf die volle Breite von 843 Pixel vergrößert bzw. verkleinert und in der Default-Ansicht hauptsächlich im unteren Teil beschnitten (wobei anscheinend ganz oben auch ein paar Pixel verloren gehen).

Kleine hochformatige Bilder bis zu einer Breite von 478 Pixel werden proportional auf eine Höhe von 403 Pixel verkleinert und nicht beschnitten.

Breitere Hochformatige Bilder werden auf die volle Breite von 843 Pixel vergrößert bzw. verkleinert und hauptsächlich im unteren Teil beschnitten, ein Teil des oberen Randes geht aber auch immer weg.

Querformatige Bilder werden auf 843 Pixel Breite vergrößert bzw. verkleinert und dann von unten auf 403 Pixel beschnitten.

Kleine querformatige Bilder, die nicht breiter als 478 Pixel sind, werden in ihrer Originalgröße dargestellt.

Stark querformatige Bilder, die ein Seitenverhältmnis von mindestens 1:2,1 haben, werden proportional auf 843 Pixel Breite vergrößert bzw. verkleinert und nicht beschnitten.

„Reposition Photo“

Wurde ein Foto automatisch beschnitten kann man mit „Reposition Photo“ (rechts oben im Menü des jeweiligen Bildes) nachträglich den gezeigten Ausschnitt ändern. Das ändert aber nichts daran, daß das Foto beschnitten wurde und ist sozusagen nur eine Notlösung für Bilder, deren Format für die Veröffentlichung nicht geändert werden kann (zum Beispiel, weil die Lizenz des Bildes keine Bearbeitung erlaubt).

Darstellung im Newsfeed:

Für die Darstellung im Newsfeed der User gelten wieder ganz andere Regeln, hier werden alle Fotos proportional verkleinert (und nie beschnitten!) Die maximale Höhe beträgt 225 Pixel, die maximale Breite 300 Pixel. Hier sind also querformatige Bilder leicht im Vorteil, quadratische und hochformatige werden etwas benachteiligt. Zur Darstellung im Newsfeed wäre also ein Seitenverhältnis von 1:1,33 optimal, aber ich denke, daß die Darstellung in der Timeline wichtiger ist, da sie viel länger angezeigt wird.

Das Cover Foto:

Das Cover Foto am oberen Rand sollte exakt 850*315 Pixel groß sein (manche Quellen sprechen von 851*315 Pixel).

Sonstiges:

Gewisse Sonderfälle (z.B. wenn mehrere Fotos auf einmal gepostet werden) habe ich jetzt noch nicht untersucht. Auch die Darstellung der Bilder von verlinkten Webseiten hat sich geändert und wurde noch nicht berücksichtigt. Für Hinweise dazu und für sonstige Erweiterungsvorschläge und Korrekturen bin ich mehr als dankbar! Bitte diese als Kommentare zu diesem Artikel posten!

Nachtrag: Die Bilder bei den Links

Facebook änderte mit der Einführung der Timeline auch die Darstellung der Bilder (Thumbnails), die mit externen Links (z.B. auf Blog-Artikel) abgespeichert werden. Facebook verwendet zur Illustration eines solchen Links in der Timeline ein Bild, das es auf derselben Seite findet, in manchen Fällen kann man auch aus mehreren Bildern wählen. Will man die Kontrolle darüber haben, welches Bild von Facebook verwendet wird, so kann man das in seinem Blog mit dem Tag „og:image“ festlegen.

Diese Bilder sind nun einheitlich (hochformatig) im Format 99*116 Pixel (Seitenverhältnis ca. 1:0,85). Weicht das Format davon ab, so wird das Bild beschnitten, was naturgemäß vor allem bei Logos und querformatigen Bildern nicht besonders gut aussieht. Größere Bilder im selben Seitenverhältnis werden proportional verkleinert und ebenfalls nicht beschnitten. Es empfiehlt sich also, ein Bild in diesen Proportionen über og:image zu definieren, wobei es durchaus von Vorteil ist, wenn man ein größeres nimmt, denn andere Services, die ebenfalls diesen Tag verwenden, haben unter Umständen eine größere Darstellung dieser Thumbnails (zum Beispiel Google+). Ich habe zum Beispiel mit 119*139 Pixel gute Erfahrungen gemacht. (Siehe mein neuestes Posting dazu!)

Nachtrag zum Nachtrag

Facebook verlangt mittlerweile für die im Nachtrag angeführten Bilder bei den Links, dass diese eine minimale Seitenlänge von 200 Pixel aufweisen, sonst werden sie nicht angezeigt. Nach meinen bisherigen Tests ist z.B. 255*300 Pixel ein gutes Format, die oben angegebenen Formate sind jedenfalls neuerdings zu klein.