Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Seitenverhältnisse verstehen

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.

Seitenverhältnisse und Squarespace

Viele Stil-Anpassungen ermöglichen es dir, das Seitenverhältnis für verschiedene Arten von Bildern auszuwählen, wie z. B. Vorschaubilder für Blogeinträge, Galerie-Bilder oder Produkte.

  • Wenn Sie beispielsweise ein Seitenverhältnis von 3:2 für Vorschaubilder für Blogeinträge auswählen, werden alle Vorschaubilder für Blogeinträge auf Ihrer Blog-Seite auf dieses Format beschnitten.
  • 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

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

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. Denken Sie 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

Das Vorschaubild deines Video-Hosting-Dienstes bestimmt das Seitenverhältnis deines Videos. Wenn du Video-Blöcke in Zeilen platzierst oder Raster-Galerien verwendest, sind die Zeilen möglicherweise ungleichmäßig. Bei Video-Blöcken ist es nicht möglich, dies zu ändern.

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

War dieser Beitrag hilfreich?
264 von 412 fanden dies hilfreich