Twitter Header Bild 2021 – Optimale Größe, Breite x Höhe in Pixel

Twitter Header 2021 – Größe, Breite × Höhe in Pixel

Welche Pixelmaße sind 2021 ideal für Dein Twitter Titelbild bzw. Header? 1500 × 500 px wie 2020, 2019 … oder hat sich da was geändert? 🤔

Das Header-Bild, auch profile banner genannt, ist die größte kostenlose Werbefläche, die Dir Twitter zur Verfügung stellt. Im Gegensatz zu dem Profilbild, das Du nicht allzu häufig ändern solltest (wegen der Wiedererkennbarkeit), kannst Du ruhig immer mal wieder den Header aktualisieren.

Hier könntest Du beispielsweise auf ein Freebie hinweisen, ein Produkt prominent zeigen, ein Event promoten, ein Keyvisual platzieren … 😏

1. Einleitung – wie Du diesen Blogartikel liest

  • Möchtest Du gleich einen neuen Header erstellen und Dich interessieren nur die optimalen Pixelmaße für 2021, dann lies die Zusammenfassung. Da findest Du die wichtigsten Infos, um gleich „zur Tat zu schreiten“ …
  • Für Professionals: Als Social Media Expertin, (Online-)Marketer, Designer oder Mediengestalterin interessiert Du Dich garantiert für die sichtbaren Bereiche 2021:

    Du willst wissen wie Dein Bild auf einem Desktop- bzw. Laptop-Bildschirm, einem Tablet im Hoch- & Querformat und einem Smartphone angezeigt wird… Dann solltest Du weiterlesen! 😃
  • Du gehörst zu den Crazy ones. Du bist eine Bildbearbeitungsexpertin, ein Pixelschubser oder gehörst zu denen, welche die volle Dröhnung brauchen? – Dann liest Du den Artikel sowieso bis zum Ende, um kein einziges Detail zu verpassen. 😎

2. Die Zusammenfassung

Wenn Du nur die aktuellen Maße benötigst, kannst Du gleich aufhören zu lesen: Ja, die Breite beträgt immer noch 1500 Pixel und die Höhe ist bei 500 Pixel geblieben. An der optimalen Größe hat sich in den vergangenen Monaten nichts getan!

ABER die Bereiche, die jeweils von dem Profilbild verdeckt werden, haben sich geändert!

Rosita Fraguela
Twitter Header Bild 2021 – Optimale Größe, Breite x Höhe in Pixel

Twitter Header Bild 2021 – Optimale Größe, Breite x Höhe in Pixel, inklusive sichtbare Bereiche und unterschiedliche Positionen vom Profilbild

2.1 Was ist 2021 neu bei Twitter ?

• Die Twitter Benutzeroberfläche wurde aktualisiert!

Das Twitter Userinterface für Desktop- & Laptop-Rechner und für Smartphones wurde in den vergangenen Monaten dezent optimiert. Die Änderungen sind so gerinfügig, dass man nicht von einem Redesign oder Relaunch sprechen kann, noch nicht mal als Soft-Relaunch würde ich diese kleinen Aktualisierungen bezeichnen.

Das Unserinterface der Twitter-App für Tablets wurde hingegen stärker geändert. Hier hat Twitter den Look an die bisherige Desktop- & Laptop-Browserdarstellung angepasst. Es gibt hier nun links eine Navigationsspalte.

Mehr Infos zu den Änderungen der Twitter Benutzeroberfläche findest Du weiter unten bei 4. Twitter & responsives Design 2021

Der Header wird zum Teil nun viel kleiner angezeigt, dadurch haben sich die Positionen des Profilbildes jeweils geändert. Es werden jetzt also andere Bildbereiche verdeckt, als es noch 2020 der Fall war.

2.2 Twitter Header 2021

Das Wichtigste: Geändert haben sich die Bereiche, die Du NICHT für wichtige Text- bzw. visuelle Inhalte nutzen solltest. Die Pixelbereiche, die von Deinem Profilbild verdeckt werden.

Twitter Header Bild von 2020 Vergleich zu 2021 – Optimale Größe, Breite x Höhe in Pixel – Positionen Profilbild

Header von 2020 Vergleich zu 2021 – gleiche Breite x Höhe in Pixel – unterschiedliche Positionen des Profilbild

2.3 Das neue Header-Bild „in Aktion“

Möchtest Du das neue Twitter Header-Bild „in Aktion“ sehen, schau Dir meinen Twitter-Account an: twitter.com/RositaFraguela

Da kannst Du Dir das responsive Verhalten des Headers gleich Live auf Deinem Desktop-Rechner oder Deinem Laptop, auf Deinem Tablet sowie Smartphone ansehen.

Bei der Gelegenheit folgst Du mir am besten auch gleich bei Twitter. 😇

3. Twitter & responsives Design 2021

Die Darstellung ändert sich, je nachdem, wo Du Dir das Twitter Profil ansiehst!

Schaust Du Dir ein Profil auf einem Rechner bzw. Laptop, auf einem Tablet im Quer- & Hochformat oder auf einem Smartphone an, stellst Du fest:

Die Größendarstellung des Titelbildes sowie die Position des Profilbildes ist nicht gleich!

4.1 Darstellung Desktop / Laptop (Browser)

Twitter Titelbild 2021 – Header und Profilbild 2020 im Vergleich zu 2021


Twitter Header und Profilbild 2021 im Vergleich zu 2020

Geändert haben sich ein wenig die Abstände der Icons in der linken Navigationsspalte (hier in der minimierten Breite). Und es gibt nun als Profilsymbol nicht mehr ein kleines Vorschaubild des eigenen Profilbildes, sondern ein kleines standardisiertes Portrait-Icon.

Das Profilbild wird 2021 geringfügig kleiner angezeigt. Auf den Screenshot rechts (Browser Firefox 86.0, 64 Bit) beträgt der Unterschied lediglich 2 Pixel.

Ist das Browserfenster breit genug, wird die linke Navigationsspalte komplett angezeigt. Dann stehen rechts neben den Icons die passenden Begriffe. Das ist jedoch nicht neu, das war bereits 2020 der Fall.

Userinterface Twitter 2021 Header Profilbild Interface


In der Desktop-Ansicht, wird das Bild nicht mit den Abmessungen 1500 x 500 px dargestellt, sondern wesentlich kleiner, z. B. nur knapp halb so groß (748 x 250 px) gezeigt. Erst wenn Du darauf klickst, wird es größer dargestellt!

Die Darstellungsgröße ist abhängig von der Breite des Browserfensters. Es wird die volle Breite des Browserfensters genutzt. Das Bild kann also auch viel größer als 1500 x 50 px angezeigt werden!

Twitter Header-Bild 2021 rmaximiert, esponsives Design, UserInterfes, UI, Design, Photoshop Template


Desktop/Laptop: Klickst Du auf das Titelbild, wird es maximiert, der Hintergrund wird abgedunkelt.

3.2 Darstellung Tablet (Twitter App)

Auf Tablets bietet die Twitter App gibt zwei Darstellungsoptionen: Einmal das Hoch- und einmal das Querformat.

3.2.1 Tablet Hochformat

Twitter App auf dem Tablet, im Hochformat: Das Titelbild wird komplett dargestellt, das Profilbild ist sehr klein und befindet sich an einer anderen Position, als im Querformat.

Twitter App iOS Profil 2021 – Design User Interface Header Titelbild Breit Höhe Training Social Media


Links siehst Du die Twitter App Tablet Benutzeroberfläche von 2020. Hier gibt noch nicht die linke Navigationsspalte wie 2021. Dafür gibt es einen kleinen zentrieren Navigationsbereich am unteren Tablet-Rand. Das Header-Bild nutzt oben die volle Breite vom Tablet.

Der rechte Screenshot ist von 2021. Hier gibt es nun links die Navigationsspalte, dem Header-Bild steht entspechend weniger Platz zur Verfügung.

In der Navigationsspalte ist, nicht wie in der Desktop- bzw. Laptop-Browser-Version von 2021, ein kleines standardisiertes Portrait-Icon zu sehen, sondern ein kleines Vorschaubild (Thumbnail) des Profilbildes.

So wie dies im Jahr zuvor noch für die Browser-Version üblich war. Sieht also so aus, als wäre für die Twitter App 2021 das Look- & Feel von der Desktop-Oberfläche von 2020 übernommen worden.

Twitter App iOS Profil 2021 – responsives Design User Interface Header Titelbild Training Social Media


Twitter App, Tablet (gilt für das Hoch- und das Querformat) – Scrollst Du in der Timeline, wird das Titelbild stark minimiert. Es wird nur noch ein sehr schmaler Streifen davon oben gezeigt. Dieser Ausschnitt ist zudem stark weichgezeichnet.

Twitter App auf Tablet im Hochformat Darstellung komplettes Titelbild 2021 – Training für Marketer bzw. Marketing Professionals


Twitter App auf Tablet im Hochformat Darstellung komplettes Titelbild 2021

Analog zu der Browser-Version: Tippst Du auf das Titelbild wird es komplett, größtmöglich auf der vollen Breite des Tablets angezeigt, der Hintergrund wird abgedunkelt. Dies gilt für das Tablet Hoch- und Querformat.

3.2.2 Tablet Querformat

Tablet Querformat Twitter App 2021 Header-Bild Titelbild


Ansicht des Profils in der Twitter App 2021, Tablet Querformat.

Das Profilbild befindet sich im Querformat an einer anderen Position auf dem Header, als im Hochformat. Alles andere (Navigationsspalte links, wesentlich kleinere Darstellung des Header-Bildes usw.) ist wie bei der hochformatigen Tablet-Ansicht, siehe 4.2.1 Tablet Hochformat.

3.3 Darstellung Smartphone (Twitter App)

Das Titelbild ist auf der vollen Breite des Displays komplett sichtbar.

Twitter App iOS für Smartphone Profil 2021 neu Profilbild Titelbild banner


In der Twitter iOS Smartphone-App hat sich nicht viel getan. Das Profilbild wurde um knapp 7% vergrößert, die (Haupt-)Navigation befindet sich nach wie vor unten.

Smartphone Twitter Profil 2021, Header-Bild minimiert & maximiert
Smartphone Ansicht Twitter Profil 2021, Header-Bild minimiert und maximiert


Twitter App auf dem Smartphone – Links: Scrollst Du in der Timeline, wird nur noch ein weichgezeichneter Bereich von dem Bild angezeigt. Rechts: Tipps Du auf das Titelbild wird es isoliert angezeigt, der Hintergrund hingegen abgedunkelt. – Dies ist identisch mit dem Verhalten von 2020 und 2019.

4. Warum überhaupt 1500 x 500 Pixel?

Yes, es gibt viele Blogartikel, Listen, Zusammenfassungen, Übersichten usw. wo die Pixelwerte für verschiedene Social Media Bilder kommuniziert werden. – Ich verrate Dir etwas: Ich traue denen nicht! Denn oft wird da nur Copy & Paste betrieben und die Werte stimmen meistens nicht!

Warum ist das so? Entweder jemand kopiert von irgendwo her Pixelwerte, ohne sie zu überprüfen, promotet sie dennoch als aktuell, selbst wenn sie bereits veraltet sind… Oder es werden von irgendeiner Hilfe-Seite, von dem entsprechenden Social-Media-Kanal, Mindestwerte übernommen. ABER: Mindestwerte liefern keine optimalen visuellen Ergebnisse!

Ich empfehle nur Bildgrößen, die ich zuvor selbst auf „Herz und Nieren“ getestet habe!

Rosita Fraguela

5.1 So findest Du die Pixelmaße

Firefox Inspektor Twitter profile banner 2021 Breite size Designer Designerin Webdesign

Am liebsten nutze ich im Browser Firefox den sogenannten Inspektor. Du findest ihn über das Flyout-Menü ganz rechts oben.

Klicke auf die drei kleinen waagerechten Striche, dann im Flyoutmenü klickst Du auf Web-Entwickler: Es erscheint ein Untermenü, hier findest Du den Inspektor.

Fährst Du nun mit dem Mauszeiger über das Twitter Profil, werden die HTML-Container, in denen sich Layoutelemente, Texte, Bilder … befinden, farbig hervorgehoben.

Gleichzeitig öffnet sich unten das Inspektor-Fenster. Dort erhälst Du quasi alle Informationen, die Du benötigst…

Achtung Denkfehler: Fährst Du nun mit Deinem Mauszeiger einfach auf den Header erscheint als Größenangabe jetzt 1080 × 360 px, nicht die erwarteten 1500 × 500 px!
Twitter profile banner 2021 perfect size template


1080 × 360 px, so groß ist das Header-Bild, dass in dieser Darstellung angezeigt wird. Twitter errechnet aus dem Orignal-Titelbild diese kleine Größe, um Datenvolumen beim Laden zu sparen…

Um die größte verwendete Größe, also die optimale Bildgröße in Erfahrung zu bringen, klickst Du auf das Header-Bild. Es erscheint nun die Header-Bild-Version mit den größen Pixelmaßen. Und das sind eben 1500 × 500 px.

Twitter profile banner 2021 perfect size template photoshop visual content

4.2 Was Du beachten solltest …

Mit dem Firefox-Inspektor erhälst Du Zugriff auf den Quellcode: Hier findet man/Frau u. a. die Abmessungen in Pixel sowie die Bild-Url. Ich lade Bilder, die ich teste, zusätzlich stets runter und nehme sie noch genauer unter die Lupe …

Ganz so easy ist das mit dem Testen von Social-Media-Bildern eben nicht. Um zuverlässige Ergebnisse zu bekommen, kannst Du Dir nicht einfach ein Bild auf dem jeweiligen Social-Media-Kanal ansehen.

Du musst zuvor nämlich mehrere Bilder mit unterschiedlichen Pixelwerten, mit größeren und kleineren Breiten & Höhen in Pixel hochgeladen haben!

Anschließend kannst Du beurteilen, was der jeweilige Social-Media-Kanal mit den Bildern „angestellt hat“. Du siehst das erst, wenn Du die hochgeladenen Bilder mit den runtergeladenen Bilder vergleichst!

Dann erkennst Du, ob das Bild automatisiert auf eine bestimmte Größe in Pixel runter- oder hochgerechnet wurde. Ob die Dateigröße reduziert wurde (ist fast immer der Fall). Wie stark die Dateigröße reduziert wurden usw.

Hier siehst Du ein kleine Auswahl von meinen Testbildern, die ich als Versuchskaninchen verwende:
Social Media Bilder testen Weiterbildung für Designer Designerinnen und Marketer bzw. Marketing Professional


Wenn Du auf meinen Social-Media-Kanälen diese oder ähnliche Bilder siehst, die teilweise identisch aussehen, dann weißt Du, dass ich mal wieder am Testen bin. 😁

Die Bilder haben unterschiedliche Größen, Seitenverhältnisse, Dateiformate (JPEG, PNG, GIF) und Dateiqualitäten (z. B. JPEG gesichert mit mittlerer, hoher, sehr hoher, maximaler Qualität).

4.3 Probleme mit dem Twitter-Header?

Was macht Twitter eigentlich mit Deinem Bild?

Twitter bringt jedes Bild, das Du als Header hochlädst, auf 1500 x 500 Pixel. Egal wie groß bzw. klein es vorher war!

Rosita Fraguela

Auch die vorherigen Seitenverhältnisse interessiert Twitter überhaupt nicht. Es wird ein Ausschnitt mit dem Seitenverhältinis 3:1 definiert und dieser Ausschnitt wird auf 1500 x 500 px gebracht. Punkt.

Ein Bild zu liefert, das größer als die späteren Pixelmaße ist, gilt als unproblematisch. Denn da leidet nicht die visuelle Darstellung darunter.

Ganz schlecht ist es hingegen, wenn Du ein Bild verwendest, dass kleiner als die optimalen Pixelwerte 1500 x 500 px ist. Denn dann skaliert Twitter das Bild „mit Gewalt“.

Die Folge: Das Bild wird unscharf aussehen. Im schlimmsten Fall, wenn das Bild zuvor sehr klein war, wirkt es pixelig und verschwommen zugleich. Das ist quasi der visuelle Worst Case. 😱

Profil bearbeiten: Twitter bringt die Bilder automatisch auf 1500 x 500 Pixel, daher lade nicht zu kleine Bilder hoch!


Profil bearbeiten: Twitter bringt Header-Bilder automatisch auf 1500 x 500 Pixel, daher lade auf keinen Fall zu kleine Bilder hoch!

Keine gute Idee ist außerdem, wenn Du ein Bild mit den eigentlich optimalen 1500 x 500 px hochlädst, aber dann das Bild im Dialog doch noch per Schieberegler vergrößerst… Mach das nicht, das führt zu den gleichen miserablen Ergebnissen, wie ein viel zu kleines Bild hoch zu laden… 👎

5. Die Test-Geräte & Browser

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

5.1 Laptop (Desktop-PC)

Macbook Pro (16 Zoll, 2019), Betriebssysteme Mac iOS und Win 10 (über Bootcamp), stets die aktuellsten Betriebssystem-Versionen.

  • Monitor des Macbooks: 3072 × 1920 Pixel bei 226 ppi, 16″ (40,65 cm Diagonale).
  • „Externer“, zusätzlicher Monitor: NEC MultiSync PA301W, 29,8″ (30″, 75,6 cm Diagonale).

5.2 Tablet

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

5.3 Smartphones

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

7. Versionen/Aktualisierungen

Stand 27.02.2021

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.