Bildgrößen für Social Media, und der eine Ausschnitt, der überall überlebt

Plattformen beschneiden, sie setzen keine Balken

Ein Videoplayer, der die falsche Form bekommt, setzt schwarze Balken darum. Ein Social Feed tut das nicht, denn Balken wirken in einer scrollenden Spalte kaputt und verschwenden das Knappste auf dem Bildschirm. Er füllt stattdessen den Platz, was heißt, dass ein Teil deines Bildes nicht gezeigt wird. Wo der Schnitt fällt, hängt von der Plattform ab: manche beschneiden mittig, manche neigen nach oben in der Annahme, dass dort Gesichter sind, manche nutzen ein Saliency-Modell. Du kontrollierst nicht welche, und du solltest nicht gegen eine einzelne entwerfen.

Das ist das Argument für eine sichere Zone. Liegt dein Motiv — ein Gesicht, eine Schlagzeile, ein Logo, ein Preis — in dem Bereich, der jeden Beschnitt übersteht, dem das Bild begegnet, hört die Wahl der Plattform auf, eine Rolle zu spielen. Bleibt die Frage, wie groß dieser Bereich ist, und sie hat eine Antwort, die sauber genug zum Merken ist.

Die sichere Fläche ist das schmalste Verhältnis geteilt durch das breiteste

Schreibe das Quellseitenverhältnis als Breite durch Höhe und nenne es r. Ein Zielplatz mit Verhältnis t beschneidet es. Ist t breiter als r, behält der Beschnitt die volle Breite und nimmt ein waagerechtes Band der Höhe; der senkrecht überlebende Anteil ist r geteilt durch t. Ist t schmaler als r, behält der Beschnitt die volle Höhe und nimmt ein senkrechtes Band der Breite; der waagerecht überlebende Anteil ist t geteilt durch r. Über einen ganzen Satz Ziele binden nur die Extreme: waagerecht begrenzt dich das schmalste Ziel, senkrecht das breiteste.

Der überlebende Breitenanteil ist also das schmalste Ziel geteilt durch r, und der überlebende Höhenanteil ist r geteilt durch das breiteste Ziel — jeweils bei eins gedeckelt, da ein Beschnitt nicht mehr als das ganze Bild zeigen kann. Multipliziere sie für die Fläche, und das r kürzt sich exakt heraus: Die sichere Fläche ist das schmalste Zielverhältnis geteilt durch das breiteste, und sie hängt überhaupt nicht von der Form der Vorlage ab, solange diese zwischen den beiden Extremen liegt. Das ist das mitnehmenswerte Ergebnis, und es steht nirgends veröffentlicht.

Setz Zahlen ein. Ein realistischer Satz für eine Marke, die in einem vertikalen Videoformat, einem Hochkant-Feed, quadratisch, im Querformat-Video und in einer Link-Vorschau postet, reicht von 9:16 am schmalen bis 1,91:1 am breiten Ende. Das sind 0,5625 geteilt durch 1,91, also 29,45 %. Weniger als drei von zehn Pixeln deines Entwurfs werden garantiert gesehen. Lass das vertikale Videoformat weg, und die Spanne wird 4:5 bis 1,91:1, was 41,88 % ergibt. Gestalte nur für Quadrat und Link-Vorschauen, und du bekommst 52,36 %. Andersherum: Nimm eine 2,35:1-Kinovorlage, breiter als jedes Ziel, und du fällst auf 23,94 %; ein 3:1-Banner fällt auf 18,75 %.

Dasselbe Ergebnis in Pixeln

Auf einer quadratischen Fläche mit 1080 Pixeln Kantenlänge misst der sichere Kasten für die volle Spanne 9:16 bis 1,91:1 608 mal 565 Pixel — 29,45 % der Fläche, genau wie die Formel sagt. Auf einer 4:5-Hochkantfläche von 1080 mal 1350 sind es 759 mal 565. Auf einer Link-Vorschaufläche von 1200 mal 628 sind es 353 mal 628. Auf einer vertikalen Fläche von 1080 mal 1920 sind es 1080 mal 565. Vier verschiedene Flächen, vier verschiedene Kästen und jedes Mal dieselben 29,45 %.

Die wiederkehrenden 565 sind kein Zufall. Die sichere Höhe ist die Flächenbreite geteilt durch das breiteste Zielverhältnis, und 1080 geteilt durch 1,91 ergibt 565,4. Alles, was einen 1,91:1-Beschnitt überstehen soll, muss in einem waagerechten Band von 565 Pixeln Höhe liegen, was du sonst auch tust. Ebenso ist die sichere Breite die Flächenhöhe mal das schmalste Zielverhältnis, weshalb die vertikale Fläche waagerecht überhaupt nichts verliert.

Ein elegantes Korollar: Das Seitenverhältnis des sicheren Kastens selbst ist das schmalste Ziel mal das breiteste, geteilt durch das Quellverhältnis. Setze das gleich eins, und du bekommst genau dann eine quadratische sichere Zone, wenn die Vorlage im geometrischen Mittel der beiden Extreme liegt — die Wurzel aus 0,5625 mal 1,91, also 1,0365 zu 1, im Wesentlichen ein Quadrat. Willst du also die größte quadratische sichere Zone über die breiteste Spanne von Platzierungen, gestalte auf einer Fläche, die ganz leicht breiter als hoch ist.

Upload-Maß, Anzeigemaß und der Retina-Multiplikator

Drei verschiedene Zahlen heißen „die Größe“. Das Upload-Maß ist das, was du sendest. Das Anzeigemaß ist, wie viele CSS-Pixel breit der Platz auf dem Bildschirm des Lesers ist. Das Device Pixel Ratio multipliziert das zweite und ergibt die Zahl echter Pixel, die der Bildschirm bereitstellt. Ein 360 CSS-Pixel breiter Platz braucht 720 Gerätepixel auf einem Zweifach-Display und 1 080 auf einem Dreifach-Display — genau deshalb taucht 1080 in Empfehlungen immer wieder auf, und deshalb erzeugt weniger auf einem modernen Telefon sichtbar Weiches.

Die veröffentlichten Maße, die es gibt, sollte man kennen und datieren. Metas Sharing-Dokumentation empfiehlt Bilder von mindestens 1200 mal 630 Pixeln für hochauflösende Geräte, nennt 200 mal 200 als kleinstes erlaubtes Maß, bittet darum, so nah wie möglich an einem Seitenverhältnis von 1,91:1 zu bleiben, damit das Bild im Feed nicht beschnitten wird, und deckelt die Datei bei 8 MB. Instagrams eigene Hilfe dokumentiert, dass ein Foto zwischen 320 und 1080 Pixeln Breite seine Originalauflösung behält, sofern das Seitenverhältnis zwischen 1,91:1 und 4:5 liegt. Beides ist zum Zeitpunkt des Schreibens aktuell und beides wird sich ändern; die Verhältnisse darin sind der haltbare Teil.

Kompression, und was sie mit Text in einem Bild macht

Jede Plattform kodiert dein Upload neu, mit einer Qualitätseinstellung, die sie nicht veröffentlicht und ohne Ankündigung ändert. Verlustbehaftete Kompression trifft genau den Inhalt am härtesten, den Marketer in Bilder legen: scharfe Kanten zwischen zwei Farbflächen, also Schrift. Ein Foto verliert Details, die du nie angesehen hast; eine Bildunterschrift bekommt einen Halo, den du siehst.

Der Skalierungsschritt verschärft das, und dieser Teil ist Arithmetik statt Vermutung. Zeichne eine 48-Pixel-Bildunterschrift auf einer 1080 breiten Fläche, und sie kommt mit 48 Pixeln an. Zeichne dieselbe 48-Pixel-Unterschrift auf einer 1440 breiten Fläche, und nach dem Herunterskalieren auf 1080 kommt sie mit 36 an. Auf einer 2160 breiten Fläche kommt sie mit 24 an — halb so groß wie gezeichnet und die Größe, bei der ein dünner Schnitt auf einem armlang gehaltenen Telefon aufhört, lesbar zu sein. Sicherheitshalber größer zu arbeiten ist genau das Gegenteil von sicher, wenn die Plattform die Breite normalisiert.

Die Link-Vorschau ist wieder ein anderes Verhältnis

Das Open-Graph-Protokoll selbst definiert die Eigenschaften — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — und gibt überhaupt keine Pixelmaße vor. Die 1,91:1-Form, die heute jeder Vorschaugenerator nutzt, stammt aus Facebooks eigener Sharing-Anleitung, die empfiehlt, so nah wie möglich an diesem Verhältnis zu bleiben und mindestens 1200 mal 630 Pixel zu verwenden. Alles andere hat sie geerbt, weil es leichter war, sich der dominanten Plattform anzupassen, als zu verhandeln.

Für die Berechnung der sicheren Fläche zählt die Link-Vorschau mehr, als ihr Traffic-Anteil nahelegt, denn mit 1,91:1 ist sie in den meisten Sätzen das breiteste Verhältnis, und das breiteste Verhältnis bestimmt die Höhe des sicheren Kastens. Nimm sie heraus, und die ganze Rechnung verbessert sich: Ein Satz von 4:5 bis 16:9 hat eine sichere Fläche von 45,00 % statt 41,88 %, allein weil 16:9 schmaler ist als 1,91:1. Wird dein Vorschaubild getrennt vom Social-Bild erstellt — was es sollte, da das eine eine Karte und das andere ein Post ist —, kannst du 1,91:1 aus dem Satz streichen, den das Social-Bild überstehen muss, und diese eine Entscheidung wiegt mehr als jede noch so sorgfältige Beschnittarbeit.

Häufige Fragen

Welcher Prozentsatz meines Bildes ist garantiert sichtbar?

Das schmalste Seitenverhältnis, in dem es gezeigt wird, geteilt durch das breiteste. Das ist die ganze Antwort, und sie ist unabhängig von der Form, auf der du entworfen hast, solange diese zwischen beiden liegt. Von einer 9:16-Vertikalplatzierung bis zu einer 1,91:1-Link-Vorschau sind es 29,45 %. Von 4:5 bis 1,91:1: 41,88 %. Von quadratisch bis 1,91:1: 52,36 %. Von 4:5 bis 16:9: 45,00 %. Entwirf außerhalb der Spanne, und es wird schlechter statt besser: Eine 2,35:1-Kinovorlage fällt auf 23,94 %, ein 3:1-Banner auf 18,75 %.

Auf welcher Fläche entwerfe ich, wenn ich nur ein Bild machen will?

Jede Form zwischen der schmalsten und der breitesten Platzierung ergibt dieselbe sichere Fläche; die Wahl betrifft also die Richtung, in die der verschenkte Rand läuft, nicht wie viel du behältst. Soll die sichere Zone selbst quadratisch sein, entwirf im geometrischen Mittel deiner Extreme: Für eine Spanne 9:16 bis 1,91:1 ist das 1,0365 zu 1, im Wesentlichen eine quadratische Fläche, die innerhalb von 1080 mal 1080 einen sicheren Kasten von 608 mal 565 ergibt. Sind die meisten Platzierungen hochkant, gibt eine 4:5-Fläche von 1080 mal 1350 einen breiteren sicheren Kasten, 759 mal 565, bei denselben 29,45 %. Verlasse nur nicht die Spanne: breiter als deine breiteste oder schmaler als deine schmalste Platzierung, und du verlierst Fläche für nichts.

Warum ändern sich veröffentlichte Pixelmaße ständig?

Weil sie die Folge einer Produktentscheidung sind, nicht eines Standards. Eine Plattform verbreitert ihre Feed-Spalte, fügt ein Format hinzu, ändert den Umgang mit einem höheren Beschnitt oder zielt auf eine neue Bildschirmdichte — und alle nachgelagerten Empfehlungsgrößen verschieben sich. Deshalb ist ein Artikel, der die Zahlen dieses Jahres festschreibt, binnen eines Jahres veraltet, und deshalb ist dieser auf Verhältnissen gebaut. Wissenswert sind die Maße, die eine Plattform selbst dokumentiert und datiert: Meta verlangt derzeit mindestens 1200 mal 630 bei einem Minimum von 200 mal 200, einer Obergrenze von 8 MB und einer Form so nah wie möglich an 1,91:1; Instagram behält derzeit die Originalauflösung für Breiten zwischen 320 und 1080, wenn das Verhältnis zwischen 1,91:1 und 4:5 liegt. Prüfe beide, bevor du eine davon nutzt.

Soll ich ein größeres Bild als die empfohlene Breite hochladen?

Nur bis zu dem Punkt, an dem die Plattform deine Auflösung nicht mehr behält, und nie wegen Text. Über die Breite hinaus hochzuladen, auf die eine Plattform normalisiert, heißt, sie skaliert herunter, und ein Herunterskalieren verkleinert Schrift exakt proportional: Eine 48-Pixel-Bildunterschrift auf einer 1440 breiten Fläche kommt nach dem Skalieren auf 1080 mit 36 Pixeln an, auf einer 2160 breiten Fläche mit 24. Entwirf in der Breite, die die Plattform bewahrt, bemiss deine Schrift an dieser Breite, und denk daran, dass die Anzeigebreite in CSS-Pixeln nochmals kleiner ist — ein 360-Punkt-Platz auf einem Dreifach-Display verbraucht genau 1080 Gerätepixel, weshalb diese Zahl immer wieder auftaucht.

Kann ich dasselbe Bild für einen Social-Post und eine Link-Vorschau nehmen?

Kannst du, und es kostet dich echte Fläche. Die Link-Vorschau ist in den meisten Sätzen mit 1,91:1 das breiteste Verhältnis, und das breiteste Verhältnis deckelt die Höhe deines sicheren Kastens — 1080 geteilt durch 1,91 ergibt 565 Pixel, daher diese wiederkehrende Zahl. Lass die Link-Vorschau weg, und ein Satz von 4:5 bis 16:9 hat eine sichere Fläche von 45,00 % statt 41,88 %; lass zusätzlich das vertikale Videoformat weg, und quadratisch bis 1,91:1 ergibt 52,36 %. Da eine Vorschaukarte und ein Feed-Post ohnehin verschiedene Aufgaben haben, ist getrenntes Erstellen meist die bessere Antwort — und es verbessert die Geometrie gratis.