Was ist ein Seitenverhältnis von 1:1?

Ein Seitenverhältnis von 1:1 definiert einen quadratischen Rahmen mit gleicher Breite und Höhe. Wird eine Dimension geändert, ohne die andere entsprechend anzupassen, entsteht ein anderes Seitenverhältnis oder der Inhalt wird verzerrt.

Das Seitenverhältnis beschreibt eine Proportion, keine Pixelanzahl. Deshalb haben Bilder mit 300×300 und 2,000×2,000 beide das Seitenverhältnis 1:1. Eine Quelle mit einer anderen Form erreicht 1:1 auf einem von drei Wegen. Beim Zuschneiden wird das Bild skaliert, bis es das Quadrat abdeckt, und der Überstand abgeschnitten. Beim Auffüllen wird das Bild so skaliert, dass es in das Quadrat passt. Die verbleibenden Balken werden mit einer Hintergrundfarbe gefüllt, was auch Letterboxing heißt. Beim Strecken werden Breite und Höhe unabhängig voneinander skaliert. Nur diese Methode verändert die Proportionen des Motivs. Ein mittiger Zuschnitt einer Quelle im Querformat behält einen Breitenanteil entsprechend Höhe geteilt durch Breite: 56,25 % eines Bildes im Format 16:9 und 75 % eines Bildes im Format 4:3. Beim Auffüllen bleibt dieselbe Quelle vollständig erhalten, das Bild füllt jedoch nur diesen Anteil des Quadrats aus. Das Motiv erscheint dadurch kleiner. Die Methodennamen unterscheiden sich je nach Werkzeug: CSS und sharp verwenden cover, contain und fill für Zuschneiden, Auffüllen und Strecken. Dort bedeutet fill also Strecken, während Transloadit dieselben drei Methoden fillcrop, pad und stretch nennt.

Wird ein Bild mit gleicher Pixelbreite und Pixelhöhe immer quadratisch angezeigt? Nur wenn die Pixel selbst quadratisch sind. Videos können ein Pixelseitenverhältnis (SAR) enthalten. FFmpeg definiert das Anzeigeseitenverhältnis als Breite / Höhe × SAR. Ein Stream im Format 720×720, dessen SAR nicht 1:1 beträgt, ist daher für eine nicht quadratische Darstellung vorgesehen. Prüfen Sie das SAR und nicht nur die Bildabmessungen, bevor Sie ein Video als 1:1 bezeichnen.
Was macht ein Browser mit einem nicht quadratischen Bild in einer quadratischen Box? Das hängt davon ab, welche Box quadratisch ist. Wird das Element img selbst quadratisch dimensioniert, wird das Bild gestreckt: Der Anfangswert von object-fit ist fill. Dadurch werden Inhalte verzerrt, deren Seitenverhältnis von dem der Box abweicht. Dagegen schneidet object-fit: cover das Bild zu, während object-fit: contain Balken ergänzt. Ein quadratisches Elternelement allein streckt das Bild nicht: Im normalen Inline-Layout verwendet ein Element img mit automatischer Breite und Höhe die intrinsischen Abmessungen des Bildes. Es behält dadurch seine Form und wird nicht an das Elternelement angepasst. Die Eigenschaft aspect-ratio: 1 bestimmt die Form einer Box nur dann, wenn mindestens eine ihrer Dimensionen automatisch ist. Diese Eigenschaften steuern die Darstellung und lassen die Bilddatei unverändert.
Welcher Bildbereich bleibt bei einem quadratischen Zuschnitt erhalten? Standardmäßig die Mitte: sharp positioniert beispielsweise Zuschnitte mit cover bei centre. Die inhaltsbasierten Strategien attention und entropy bewerten Randbereiche anhand von Helligkeitsfrequenz, Farbsättigung und Hauttönen oder anhand der Shannon-Entropie und verwerfen die Ränder mit der niedrigsten Bewertung. Das sind Heuristiken, keine Motiverkennung. Prüfen Sie daher eine Stichprobe Ihrer eigenen Bilder, bevor Sie eine solche Strategie auf einen ganzen Katalog anwenden.
Was fügt das Auffüllen der Datei hinzu? Die Balken werden zu echten Pixeln in einer Farbe, die Sie wählen müssen. Die Standardwerte unterscheiden sich je nach Werkzeug: sharp füllt Ausgaben im Anpassungsmodus contain mit deckendem Schwarz auf, sofern background nicht gesetzt ist. Transparente Balken benötigen ein Ausgabeformat, das Transparenz unterstützt. JPEG unterstützt sie nicht. Deshalb enthält ein aufgefülltes JPEG immer deckende Balken. Auch transparente Bereiche, die bereits in einer Quelle wie einem PNG-Logo vorhanden sind, können nicht transparent bleiben.

Wählen Sie das Ausgabeformat 1:1 für Avatare, Produkt-Thumbnails oder quadratische Social-Media-Beiträge. Wenn die Quelle nicht quadratisch ist, entscheiden Sie, ob Sie wichtige Inhalte zuschneiden oder Ränder ergänzen möchten.

Der Robot /image/resize von Transloadit gibt ein Quadrat zurück, wenn width und height gleich sind und resize_strategy auf fillcrop (skalieren, dann den Überstand zuschneiden), pad (skalieren, dann den Rest mit background auffüllen) oder stretch (Seitenverhältnis der Quelle ignorieren) gesetzt ist. Die Standardstrategie fit behält dagegen das Seitenverhältnis der Quelle bei. Gleiche Abmessungen allein erzeugen daher kein Quadrat: Im dokumentierten Beispiel wird ein Bild mit 400×300 auf 100×75 skaliert. Bei fillcrop wählt gravity den Bereich aus, der erhalten bleibt. Der Standardwert ist center; außerdem werden die inhaltsbasierten Werte attention und entropy akzeptiert. Ist das Motiv eine Person, kann der Robot /image/facedetect um erkannte Gesichter herum zuschneiden.

Der Hintergrund ist standardmäßig weiß. Er füllt die ergänzten Ränder aus, und auch der Hintergrund transparenter Bilder wird standardmäßig weiß. Laut Dokumentation muss background auf none gesetzt werden, um Transparenz zu erhalten. Das funktioniert nur, wenn das Ausgabeformat Transparenz unterstützt, also nicht bei JPEG. Die Ausgabe behält das Eingabeformat bei, sofern format nicht gesetzt ist. Laut Dokumentation benötigt die inhaltsbasierte Ausrichtung libvips, die Strategie fillcrop sowie width und height. Effekte wie Sepia oder Text und Eingaben wie HEIC können stattdessen mit ImageMagick verarbeitet werden. Dabei wird der Zuschnitt zentriert und der Assembly eine Warnung hinzugefügt.

Entdecken Sie Transloadits Möglichkeiten zur Bildverarbeitung

Was ist ein Seitenverhältnis von 1:1?

So funktionieren Seitenverhältnisse von 1:1

Wichtige Fakten

Wann Seitenverhältnisse von 1:1 wichtig sind

So hilft Transloadit bei Seitenverhältnissen von 1:1

Quellen

Machen Sie aus Medienwissen eine funktionierende Pipeline