Seitenverhältnisse erklärt: 1:1, 4:5, 9:16, 16:9 und mehr

Ein Seitenverhältnis ist die Form eines Bildes: seine Breite im Vergleich zur Höhe, geschrieben als zwei Zahlen wie 16:9. Ein Video in 1920×1080 und ein Thumbnail in 1280×720 haben unterschiedliche Größen, aber dasselbe Seitenverhältnis 16:9, also skaliert das eine ohne Zuschnitt ins andere. Die meisten Designprobleme mit der „falschen Größe“ sind in Wahrheit Probleme mit der falschen Form.

Die gängigen Seitenverhältnisse und wofür sie genutzt werden

Die exakten Pixelgrößen für jede Plattform stehen in Bildgrößen für Social Media. Beachte, wie wenige Formen es gibt: Wenn du in 1:1, 4:5, 9:16 und 16:9 gut gestalten kannst, deckst du den Großteil des Social-Media-Auftritts einer Marke ab.

So rechnest du ein Seitenverhältnis aus

Nimm Breite und Höhe und teile beide durch die größte Zahl, die in beide genau hineinpasst, den größten gemeinsamen Teiler. Was übrig bleibt, ist das Verhältnis in einfachster Form.

1. 1

   Mit der Größe beginnen

   Nehmen wir 1080×1350, einen Instagram Beitrag im Hochformat.

2. 2

   Den größten gemeinsamen Teiler finden

   Die größte Zahl, die sowohl 1080 als auch 1350 genau teilt, ist 270.

3. 3

   Beide Seiten teilen

   1080 ÷ 270 = 4 und 1350 ÷ 270 = 5. Das Seitenverhältnis ist 4:5.

4. 4

   Oder eine Dezimalzahl nutzen

   Teile die Breite durch die Höhe: 1080 ÷ 1350 = 0,8. Dezimalzahlen sind praktisch bei sperrigen Formen wie 1200×630, das etwa 1,91 ergibt, daher 1,91:1.

Wenn du es nicht von Hand rechnen möchtest, erledigen diese paar Zeilen JavaScript dasselbe in einer Browserkonsole.

const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720

Größen umrechnen, ohne die Form zu ändern

Um ein Bild zu skalieren und sein Seitenverhältnis zu behalten, nutzt du eine Formel: neue Höhe = neue Breite × Höhe des Verhältnisses ÷ Breite des Verhältnisses. Für einen 16:9-Rahmen mit 1280 Pixel Breite sind das 1280 × 9 ÷ 16 = 720. Für einen 4:5-Rahmen mit 1600 Pixel Breite sind es 1600 × 5 ÷ 4 = 2000.

Umgekehrt ist es genauso einfach: neue Breite = neue Höhe × Breite des Verhältnisses ÷ Höhe des Verhältnisses. Ein 9:16-Video, das 1280 hoch sein muss, ist 1280 × 9 ÷ 16 = 720 breit. Kommt eine Dezimalzahl heraus, runde auf das nächste ganze Pixel; der Unterschied ist unsichtbar.

Was passiert, wenn du das Seitenverhältnis änderst

Skalieren behält die Form. Das Verhältnis zu ändern nicht, und du hast nur drei ehrliche Möglichkeiten: einen Teil des Bildes abschneiden, Raum um es herum hinzufügen oder das Design für die neue Form umbauen. Die vierte Möglichkeit, Strecken, verzerrt jeden Buchstaben und jeden Kreis, und das fällt sofort auf.

Das macht die Größenanpassung in Gradiently mit Pro: Wähle die gewünschten Größen, und jede Kopie wird für ihre Form neu gesetzt, während der Mark dahinter in jedem Verhältnis frisch gerendert statt aus einem Bild zugeschnitten wird. Ein Look, jede Größe führt dich durch den Ablauf.

Welches Seitenverhältnis du für einen Beitrag wählst

Akzeptiert eine Plattform mehrere Formen, nimm die, die auf einem Handybildschirm am meisten Platz einnimmt. Auf Instagram ist das 4:5, höher als ein Quadrat und mit dem besten Stand beim Zuschnitt im Profilraster; Instagram Beitragsgröße erklärt warum. Auf Pinterest ist ein 2:3-Pin der Standard; längere Pins gibt es, doch sie können im Feed abgeschnitten werden, wie in Pinterest Pin Größe beschrieben.

Für alles, was am Fernseher oder Laptop angesehen wird, ist 16:9 die sichere Wahl, weshalb YouTube Thumbnails und Folien es nutzen. Für alles, was im Vollbild auf dem Handy läuft, ist 9:16 die einzige Form, die es füllt. Im Zweifel gestaltest du zuerst die vertikale und die Breitbild-Version: Quadrat und Hochformat liegen bequem dazwischen.

Seitenverhältnis in CSS

Im Web hält die CSS-Eigenschaft aspect-ratio eine Box bei jeder Breite in Form, was verhindert, dass Layouts springen, während Bilder und Videos laden. Sie wird von allen aktuellen Browsern unterstützt; siehe die aspect-ratio-Referenz von MDN.

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}

Verhältnisse spielen auch bei Druck und Video eine Rolle, mit eigenen Konventionen. Für Videoformate siehe Videogrößen für Social Media, und dazu, wie Pixelzahlen mit der physischen Größe zusammenhängen, DPI vs. PPI.