Bild-Seitenverhältnis prüfen
Analysieren Sie exakte Seitenverhältnisse, Dezimalproportionen, Social-Media-Formate und CSS aspect-ratio-Code direkt in Ihrem Browser.
Bild hierher ziehen und ablegen oder zum Durchsuchen klicken
Erkennen Sie vereinfachte Brüche, prüfen Sie Social-Media-Kompatibilität, skalieren Sie Abmessungen und generieren Sie CSS-Code ohne Server-Upload
Unterstützt JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO und TIFF • Einfügen mit Strg+V
Was ist das Seitenverhältnis eines Bildes und warum ist es wichtig?
Das Seitenverhältnis (Aspect Ratio) beschreibt das proportionale Verhältnis zwischen Breite und Höhe eines Bildes, ausgedrückt durch zwei durch einen Doppelpunkt getrennte Zahlen (wie 16:9, 4:3 oder 1:1). Anders als die Pixelabmessungen, welche die Gesamtauflösung beziffern (z. B. 1920 × 1080 Pixel), definiert das Seitenverhältnis die grundlegende geometrische Form des Bildes, unabhängig von der Anzeigegröße.
Das Verständnis von Seitenverhältnissen ist für Grafikdesigner, Fotografen und Webentwickler unerlässlich. Falsche Verhältnisse führen zu unschönen automatischen Bildschnitten oder schwarzen Balken. Der ImgFeel-Rechner ermittelt Ihre Bildproportionen sofort und ohne Server-Uploads.
Verhältnis & Dezimalwert sofort
Berechnet gekürzte Brüche (16:9, 4:3, 1:1) und exakte Dezimalfaktoren.
Social-Media-Abgleich
Überprüft die Eignung für Instagram, YouTube, TikTok, Facebook, X und LinkedIn.
Fertiger CSS-Code
Erzeugt CSS aspect-ratio-Regeln und responsive HTML-Image-Tags.
100% Sicher im Browser
Alle Berechnungen laufen lokal in JavaScript ohne Dateitransfer an Server.
Wie das Seitenverhältnis berechnet wird (Die mathematische Methode)
Um ein Seitenverhältnis mathematisch zu berechnen, ermittelt man den größten gemeinsamen Teiler (ggT) aus Pixelbreite und Pixelhöhe und teilt beide Werte durch diesen Teiler. Bei einem Bild mit 3840 × 2160 Pixeln beträgt der ggT beispielsweise 240. 3840 geteilt durch 240 ergibt 16, und 2160 geteilt durch 240 ergibt 9 – woraus das 16:9-Verhältnis resultiert.
Alternativ ergibt das Teilen der Breite durch die Höhe das Dezimalverhältnis (3840 ÷ 2160 = 1.778). Folgende Formeln fassen beide Wege zusammen:
Simplified Aspect Ratio = (Width ÷ GCD(Width, Height)) : (Height ÷ GCD(Width, Height)) Decimal Aspect Ratio = Width ÷ Height : 1 CSS Padding-Top Hack % = (Height ÷ Width) × 100% Example: For a 1920 × 1080 Full HD image, GCD is 120. (1920 ÷ 120) : (1080 ÷ 120) = 16:9 (1.78:1 decimal, 56.25% CSS height). Seitenverhältnis vs. Bildauflösung: Wo liegt der Unterschied?
Seitenverhältnis und Bildauflösung werden häufig verwechselt. Die Auflösung bezieht sich auf die Gesamtmenge aller Pixel (Breite in Pixeln × Höhe in Pixeln oder Megapixel). Das Seitenverhältnis betrifft ausschließlich die proportionale Form.
Bilder mit 1280 × 720 (0.92 MP), 1920 × 1080 (2.07 MP) und 3840 × 2160 (8.29 MP) besitzen stark unterschiedliche Auflösungen und Dateigrößen, teilen sich jedoch exakt dasselbe 16:9-Seitenverhältnis. Die folgende Tabelle verdeutlicht die Unterschiede:
| Concept | What It Measures | Standard Units | Example Values |
|---|---|---|---|
| Aspect Ratio | Proportional relationship between width & height | Ratio string (W:H) or decimal | 16:9, 4:3, 1:1, 9:16, 1.78:1 |
| Image Resolution | Total number of pixels in the digital image grid | Pixels (W × H) and Megapixels | 1920 × 1080 px (2.07 MP), 3840 × 2160 px (8.29 MP) |
| Print Density (DPI) | Physical ink dots per linear inch on printed media | Dots Per Inch (DPI) | 300 DPI (Fine photo), 150 DPI (Flyer) |
| Display Density (PPI) | Physical hardware pixel density of a screen panel | Pixels Per Inch (PPI) | 460 PPI (iPhone Super Retina), 163 PPI (4K Monitor) |
Übersicht gängiger Standard-Seitenverhältnisse
Verschiedene Displays, Kameras und soziale Netzwerke setzen auf feste Standards für eine saubere Darstellung:
| Ratio | Decimal | Standard Name | Primary Application | Common Resolutions |
|---|---|---|---|---|
| 16:9 | 1.78:1 | Widescreen (HD/4K) | YouTube videos, TVs, PC monitors, PowerPoint | 1920×1080, 2560×1440, 3840×2160 |
| 9:16 | 0.56:1 | Vertical Story / Reel | TikTok, Instagram Reels, YouTube Shorts, Snapchat | 1080×1920, 720×1280 |
| 1:1 | 1.00:1 | Square | Instagram feed, profile photos, product thumbnails | 1080×1080, 1200×1200, 500×500 |
| 4:5 | 0.80:1 | Social Portrait | Instagram feed portrait (maximum screen real estate) | 1080×1350 |
| 4:3 | 1.33:1 | Classic Standard | iPad displays, Micro Four Thirds cameras, CRT TV | 1024×768, 2048×1536 |
| 3:2 | 1.50:1 | Classic 35mm DSLR | Full-frame cameras, 4×6 photo prints, Surface laptops | 6000×4000, 3000×2000 |
| 21:9 | 2.33:1 | Ultrawide Cinema | Anamorphic cinema movies, curved ultrawide monitors | 2560×1080, 3440×1440, 5120×2160 |
| 1.91:1 | 1.91:1 | Social Landscape | Facebook feed link previews, Twitter / X summary cards | 1200×628, 1200×630 |
Seitenverhältnisse für Social Media (Instagram, YouTube, TikTok & mehr)
Jede Plattform optimiert ihre Feeds für spezifische Maße. Instagram nutzt 1:1 für quadratische Posts, 4:5 für vertikale Porträts und 9:16 für Stories und Reels. YouTube verwendet 16:9 für Standardvideos und Thumbnails sowie 9:16 für Shorts. TikTok benötigt 9:16 im Vollbild. Das Einhalten der Vorgaben verhindert automatische Abschneidungen.
Moderne Webentwicklung: Die CSS aspect-ratio Eigenschaft & CLS-Vermeidung
Im modernen Webdesign erlaubt die CSS-Eigenschaft `aspect-ratio` dem Browser, den exakten Platzhalterbereich für Bilder vorab zu reservieren, bevor die Datei geladen ist. Dies verhindert störende Layout-Verschiebungen (Cumulative Layout Shift oder CLS) und verbessert die Core Web Vitals von Google.
Früher nutzte man prozentuales Padding (`padding-top: 56.25%` für 16:9). Heute reicht einfach `aspect-ratio: 16 / 9;` direkt auf dem Container oder `<img>`-Element.
Zuschneiden vs. Skalieren vs. Balken einfügen (Letterboxing)
Beim Anpassen eines Bildes an ein anderes Verhältnis gibt es drei Methoden: (1) Zuschneiden entfernt Randpixel bei voller Bildschärfe; (2) Freies Skalieren ohne Proportionen verzerrt das Bild; (3) Letterboxing fügt neutrale Balken an den Rändern hinzu, ohne den Originalausschnitt zu verändern.
Seitenverhältnis auf Windows, Mac, iOS und Android ermitteln
Um Abmessungen und Seitenverhältnisse ohne Zusatzsoftware auf Ihrem Gerät zu prüfen:
Windows
Right-click image > Properties > Details. Check Dimensions (e.g. 1920 × 1080) and divide Width by Height.
macOS
Select image and press Cmd + I or open in Preview and press Cmd + I to inspect pixel dimensions.
iPhone / iOS
Open image in Photos app and tap the (i) Info button to inspect resolution and proportions.
Android
Open image in Google Photos or Gallery, swipe up to view technical details, dimensions, and Megapixels.
Häufig gestellte Fragen (FAQ)
Wie prüfe ich das Seitenverhältnis eines Bildes kostenlos online?
Ziehen Sie Ihr Bild oben in die ImgFeel-Box oder wählen Sie eine Datei aus. Sie können Bilder auch mit Strg+V einfügen. Das Tool berechnet sofort das gekürzte Verhältnis (16:9, 4:3, 1:1), den Dezimalwert, die Social-Media-Eignung und den CSS-Code.
Was ist das gängigste Seitenverhältnis für Fotos und Videos?
16:9 ist der weltweite Standard für Widescreen-Videos, Fernseher und Computermonitore. Für Smartphones und Feeds sind 9:16 und 4:5 am beliebtesten. Bei DSLR-Spiegelreflexkameras ist 3:2 der klassische Standard.
Verschlechtert das Ändern des Seitenverhältnisses die Bildqualität?
Das Zuschneiden eines Bildes entfernt äußere Pixel, wodurch sich die Gesamtzahl der Pixel verringert, die restlichen Pixel aber gestochen scharf bleiben. Unproportionales Strecken verzerrt das Motiv.
Wie berechnet man das Seitenverhältnis aus Breite und Höhe?
Teilen Sie Breite und Höhe durch ihren größten gemeinsamen Teiler (ggT). Bei 1920 × 1080 ergibt das Teilen durch 120 das Verhältnis 16:9. Die Division von 1920 durch 1080 (1.78) liefert das Dezimalverhältnis.
Welches Seitenverhältnis eignet sich am besten für Instagram?
Für vertikale Feed-Beiträge bietet 4:5 (1080 × 1350 px) die größte Bildschirmfläche. Quadratische Beiträge nutzen 1:1 (1080 × 1080 px) und Stories/Reels nutzen 9:16 (1080 × 1920 px).
Was ist die CSS-Eigenschaft aspect-ratio?
Es ist eine moderne CSS-Eigenschaft, die ein bevorzugtes Seitenverhältnis für Elemente festlegt (z. B. `aspect-ratio: 16 / 9;`), wodurch Layout-Sprünge beim Laden von Bildern vermieden werden.
Werden meine Bilder bei der Analyse auf einen Server hochgeladen?
Nein. Alle Berechnungen zum Seitenverhältnis und den Bildmaßen finden zu 100% lokal in Ihrem Webbrowser per JavaScript statt. Ihre Dateien verlassen Ihr Gerät zu keinem Zeitpunkt.