Seitenverhältnisse verstehen

Tipps zum Ändern der Bildgröße auf deiner Website.

Zuletzt aktualisiert: 22. Dezember 2024

Ein Seitenverhältnis ist das proportionale Verhältnis zwischen der Höhe und Breite eines Bildes. Im Wesentlichen beschreibt es die Form eines Bildes.

Seitenverhältnisse werden als Formel aus Breite zu Höhe geschrieben, zum Beispiel: 3:2.

Ein quadratisches Bild hat beispielsweise ein Seitenverhältnis von 1:1, da Höhe und Breite gleich sind. Das Bild könnte 500 px × 500 px oder 1500 px × 1500 px groß sein, und das Seitenverhältnis wäre immer 1:1.

Als weiteres Beispiel kann ein Hochformatbild ein Verhältnis von 2:3 haben. Mit diesem Seitenverhältnis ist die Höhe 1,5 mal größer als die Breite. So könnte das Bild 500 px × 750 px, 1500 px × 2250 px etc. groß sein.

Ein Video anschauen

Seitenverhältnisse und Squarespace

Bei vielen Stil-Optionen kannst du Seitenverhältnisse für verschiedene Bildtypen auswählen, z. B. ausgewählte Bilder von Blogeinträgen, Galerie-Bilder oder Produkte.

  • Wenn du beispielsweise ein Seitenverhältnis von 3:2 für ausgewählte Bilder von Blogeinträgen festlegst, werden alle ausgewählten Bilder der Blogeinträge auf deiner Blog-Seite auf dieses Format zugeschnitten.
  • Da die Bilder entsprechend der unterschiedlichen Browser-Breiten vergrößert oder verkleinert werden, haben sie keine exakten Abmessungen (wie 750 px × 500 px), sondern immer das gleiche Format.
  • Wenn Sie mit Bildern beginnen, die das gleiche Seitenverhältnis haben, können Sie besser vorwegnehmen, wie diese beschnitten werden.
  • Du kannst die Höhe einiger Bild-Blöcke mit dem Zuschneidewerkzeug ändern. Weitere Informationen zum Zuschneiden deiner Bilder findest du unter Fehlerbehebung beim Zuschneiden.

Die genauen Optionen für das Seitenverhältnis hängen von deiner Version und deinem Template ab. Hier ist ein Beispiel für die Blog-Seite im Brine-Template:

brine-blog-example.png

brine-blog-example.png

Einige Stil-Anpassungen geben dir die Möglichkeit, Seitenverhältnisse zu ignorieren. In diesen Fällen behalten deine Bilder ihr ursprüngliches Format. Auf der Blog-Seite des Templates Skye kannst du beispielsweise Bildbeschneidung: Keine auswählen.

skye-blog-example.png

skye-blog-example.png

Auf ein Seitenverhältnis zuschneiden

Neben der Verwendung von integrierten Stil-Optionen kannst du ein Bild auch manuell auf ein bestimmtes Seitenverhältnis zuschneiden. Wenn du beispielsweise Produktbilder mit gleichem Seitenverhältnis verwendest, werden sie auf deiner Website alle auf die gleiche Weise zugeschnitten.

Option 1 – Auf eine voreingestellte Form zuschneiden

Verwenden Sie den integrierten Bild-Editor, um Bilder auf ein bestimmtes Format zuzuschneiden. Verwenden Sie nach dem Öffnen des Editors das Zuschneiden-Tool, um aus voreingestellten Seitenverhältnissen auszuwählen.

Tipp

Wenn Sie dies vor dem Hochladen des Bildes tun möchten, haben einige Tools von Drittanbietern voreingestellte Seitenverhältnisoptionen.

Option 2 – Benutzerdefinierte Abmessungen

Um Bilder auf ein benutzerdefiniertes Seitenverhältnis zuzuschneiden, das nicht von unserem integrierten Bild-Editor angeboten wird, verwenden Sie einen Editor eines Drittanbieters.

Da Bilder nicht die gleichen Abmessungen haben müssen, um das gleiche Seitenverhältnis zu haben, ist es besser, sie auf ein bestimmtes Verhältnis zuzuschneiden, als zu versuchen, ihre genauen Abmessungen anzupassen. Beschneiden Sie für optimale Resultate die kürzere Seite auf Grundlage der längeren Seite.

  • Wenn Ihr Bild beispielsweise 1500 px × 1200 px groß ist und Sie ein Seitenverhältnis von 3:1 möchten, beschneiden Sie die kürzere Seite, um das Bild auf eine Größe von 1500 px × 500 px zu bringen.
  • Vergrößern Sie nicht die längere Seite. Dadurch kann das Bild unscharf werden.

Um herauszufinden, wie lang die kürzere Seite sein muss, verwenden Sie einen Seitenverhältnisrechner wie diesen hier. Beachten Sie, dass es sich dabei um eine Drittanbieteranwendung handelt, die nicht in den Zuständigkeitsbereich des Squarespace-Suppotts fällt.

  1. Finden Sie die Abmessungen des Bildes auf Ihrem Computer.
  2. Geben Sie im Seitenverhältnis-Rechner die W1 (Breite 1) und H1 (Höhe 1) auf der linken Seite ein, um das aktuelle Seitenverhältnis zu ermitteln.
  3. Passen Sie die kürzere Seite an, bis Sie das gewünschte Verhältnis finden.

Seiten Banner

Seiten-Banner haben keine voreingestellten Seitenverhältnisse oder Abmessungen. Dies liegt daran, dass sie sich strecken lassen und ihre Form ändern, um einer Vielzahl von Browsern gerecht zu werden. Denke daran:

Seitenverhältnisse für Produktbilder

Es ist wichtig, dass deine Produktbilder potenzielle Kunden ansprechen. Um dies zu erleichtern, kannst du das Seitenverhältnis für deine Produktbilder auf den Shop-Seiten und Produktdetailseiten festlegen. Um zu erfahren, wie du deine Produktbilder gestalten kannst, besuche Produktbilder.

Wenn deine Produktbilder abgeschnitten wirken, besuche Fehlerbehebung beim Zuschneiden.

Seitenverhältnisse für Videos

Bei Videos, die du direkt auf deine Website hochlädst, entspricht das Seitenverhältnis des Videos dem Seitenverhältnis der hochgeladenen Datei. Die meisten hochgeladenen Videos werden in einem Player mit einem Seitenverhältnis von 16:9 angezeigt, sodass schwarze Balken oder Leerräume an der Seite von Videos mit anderen Seitenverhältnissen angezeigt werden können. In Abschnittshintergründe hochgeladene Videos werden zugeschnitten und gezoomt, um die Größe des Hintergrunds zu füllen.

Bei eingebetteten Videos bestimmt das Vorschaubild deines Video-Hosting-Dienstes das Seitenverhältnis deines Videos. Wenn du Video-Blöcke in Zeilen platzierst oder Raster-Galerien verwendest, können die Zeilen ungleichmäßig sein.

Wenn du Galerie-Blöcke und Galerie-Seiten (nur Version 7.0) verwendest und die Videos nicht korrekt angezeigt werden, ändere den Website-Stil:

  • Aktiviere für Galerie-Blöcke die Option Bilder zuschneiden, um ein einheitliches Seitenverhältnis für die Videos festzulegen.
  • Wähle für Galerie-Seiten beim Seitenverhältnis eine beliebige Option mit Ausnahme von Auto.

Seitenverhältnisse als Prozentsätze

Für Index-Raster-Galerien in der Template-Gruppe Brine wird das Seitenverhältnis als Prozentsatz angezeigt, den Sie mit einem Schieberegler anpassen können.

  • Der Schieberegler zeigt Werte von 0–160 an.
  • Wenn Sie ihn auf 100 einstellen, werden quadratische Bilder erzeugt.
  • Werte unter 100 sind im Querformat.
  • Werte über 100 sind im Hochformat.

Um ein genaues Seitenverhältnis zu erhalten, teilen Sie die Höhe durch die Breite. Zum Beispiel:

  • Seitenverhältnis 2:3: 3 ÷ 2 = 1,5, also ziehen Sie den Schieberegler auf 150.
  • Seitenverhältnis 3:2: 2 ÷ 3 = 0,667, also würden Sie 66,7 neben dem Schieberegler eingeben.

Beispiele für Seitenverhältnisse

Hier sehen Sie einige gängige Seitenverhältnisse und wie diese aussehen.

1-1.png
2-3.png
3-2.png
4-3.png
16-9.png
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.