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

[Canonical HTML page](https://gradiently.design/de/guide/aspect-ratios-explained)

Pixelgrößen ändern sich von Plattform zu Plattform, aber es gibt nur eine Handvoll Formen. Lerne sie und die Rechnung, die sie verbindet, und du quetschst nie wieder ein Design.

## The short version

- Ein Seitenverhältnis ist das proportionale Verhältnis zwischen der Breite und der Höhe eines Bildes, geschrieben als Breite:Höhe.
- Um das Seitenverhältnis einer beliebigen Größe zu finden, teilst du beide Zahlen durch ihren größten gemeinsamen Teiler, sodass aus 1920×1080 das Verhältnis 16:9 wird.
- Für eine neue Größe im gleichen Seitenverhältnis multiplizierst du die neue Breite mit der Höhe des Verhältnisses und teilst durch dessen Breite.
- Die wichtigsten Verhältnisse für Social Media sind 1:1, 4:5, 9:16, 16:9 und 1,91:1.
- Ein Bild in ein anderes Seitenverhältnis zu bringen heißt immer zuschneiden, Raum hinzufügen oder das Design neu aufbauen; Strecken verzerrt es.

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

- 1:1 quadratisch: 1080 × 1080
- 4:5 Hochformat: 1080 × 1350
- 2:3 Pin: 1000 × 1500
- 9:16 vertikal: 1080 × 1920
- 4:3 klassisch: 1600 × 1200
- 16:9 Breitbild: 1920 × 1080
- 1,91:1 Linkkarte: 1200 × 630
- 3:1 Header: 1500 × 500

Acht Formen decken fast alles ab, was du gestalten wirst. Maßstabsgetreu gezeichnet, vom Quadrat bis zum schlanken Header.

| Verhältnis | Form | Typische Größe | Verwendet für |
| --- | --- | --- | --- |
| 1:1 | Quadrat | 1080×1080 | Instagram Quadrat, Facebook- und LinkedIn-Beiträge, Playlist-Cover |
| 4:5 | Hochformat | 1080×1350 | Hochformat-Beiträge auf Instagram, Threads, Facebook und X |
| 3:4 | Hochformat | 1080×1440 | So schneidet Instagram Beiträge im Profilraster zu |
| 2:3 | Hohes Hochformat | 1000×1500 | Pinterest Pins |
| 9:16 | Vertikal | 1080×1920 | Stories, Reels, TikTok, Shorts, WhatsApp-Status |
| 4:3 | Klassisches Querformat | 1600×1200 | Ältere Folien, Dribbble Shots, Google Unternehmensprofil-Beiträge in 1200×900 |
| 16:9 | Breitbild | 1920×1080 | YouTube Thumbnails, Folien, Website-Header, Beiträge auf X und Bluesky |
| 1,91:1 | Breite Karte | 1200×630 | Linkvorschauen und Open-Graph-Bilder |
| 3:1 und 4:1 | Banner | 1500×500, 1584×396 | X Header, LinkedIn Banner |

Ein Verhältnis, viele Plattformen. Teilen sich zwei Formate ein Verhältnis, bedient ein Design beide durch Skalieren.

Die exakten Pixelgrößen für jede Plattform stehen in [Bildgrößen für Social Media](https://gradiently.design/de/guide/social-media-image-sizes). 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. **Mit der Größe beginnen** Nehmen wir 1080×1350, einen Instagram Beitrag im Hochformat.
2. **Den größten gemeinsamen Teiler finden** Die größte Zahl, die sowohl 1080 als auch 1350 genau teilt, ist 270.
3. **Beide Seiten teilen** 1080 ÷ 270 = 4 und 1350 ÷ 270 = 5. Das Seitenverhältnis ist 4:5.
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.

```js
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
```

Euklidischer Algorithmus für den Teiler, dann einfaches Skalieren. Füge es in eine beliebige Browserkonsole ein.

## 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.

### Zuschneiden oder strecken

- Schnell, aber die Überschrift wird oft abgeschnitten
- Strecken lässt Schrift gequetscht aussehen
- Logos landen an der falschen Stelle
- Hintergründe verlieren ihre helle Stelle
- Jedes Format wirkt leicht schief

### Neu aufbauen

- Worte fließen passend zur Form um
- Schrift behält ihre wahren Proportionen
- Das Logo sitzt dort, wo jedes Format es erwartet
- Der Hintergrund wird für den Rahmen neu gerendert
- Jedes Format wirkt für seinen Platz gestaltet

Ein 4:5-Hochformat-Beitrag für ein Töpferstudio, der ankündigt, dass die Frühlingskurse geöffnet sind

Das Design in 4:5 für den Feed: gestapelte Worte, Raum darüber und darunter.

Dieselbe Ankündigung des Töpferstudios in einem 16:9-Breitbildrahmen

Dasselbe Design in 16:9 für einen Website-Header: Die Worte verteilen sich breiter, der Hintergrund wird für den Rahmen neu gezeichnet.

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](https://gradiently.design/de/guide/one-look-every-size) 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](https://gradiently.design/de/guide/instagram-post-size) 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](https://gradiently.design/de/guide/pinterest-pin-size) beschrieben.

Für alles, was am Fernseher oder Laptop angesehen wird, ist 16:9 die sichere Wahl, weshalb [YouTube Thumbnails](https://gradiently.design/de/guide/youtube-thumbnail-size) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.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 */
}
```

Schreibe das Verhältnis mit einem Schrägstrich. Kombiniere es bei Bildern mit object-fit: cover, damit sie zugeschnitten statt verzerrt werden.

Verhältnisse spielen auch bei Druck und Video eine Rolle, mit eigenen Konventionen. Für Videoformate siehe [Videogrößen für Social Media](https://gradiently.design/de/guide/social-video-sizes), und dazu, wie Pixelzahlen mit der physischen Größe zusammenhängen, [DPI vs. PPI](https://gradiently.design/de/guide/dpi-vs-ppi).

## FAQ

### Was ist ein Seitenverhältnis?

Es ist die Form eines Bildes, ausgedrückt als Breite im Vergleich zur Höhe, etwa 16:9 oder 4:5. Bilder mit demselben Seitenverhältnis skalieren ineinander, ohne zugeschnitten zu werden.

### Wie berechne ich ein Seitenverhältnis?

Teile Breite und Höhe durch ihren größten gemeinsamen Teiler. Bei 1920×1080 ist der Teiler 120, daraus ergibt sich 16:9.

### Welches Seitenverhältnis hat 1080×1350?

4:5, die Hochformat-Form für Beiträge auf Instagram, Threads, Facebook und X.

### Was ist der Unterschied zwischen 16:9 und 9:16?

Es ist dieselbe Form, auf die Seite gedreht. 16:9 ist Querformat, genutzt für YouTube und Folien; 9:16 ist vertikal, genutzt für Stories, Reels und TikTok.

### Wie ändere ich ein Seitenverhältnis, ohne zu strecken?

Schneide das Bild zu, füge Raum um es herum hinzu oder baue das Design für die neue Form neu auf. Das Umbauen liefert bei Designs mit Text das beste Ergebnis.