SharePoint Online: Optimale Bildgrößen für Seiten (Teil 1)

Bilder sind ein wichtiger Faktor für einen gelungenen Web-Auftritt. Richtig eingesetzt sorgen Bilder für eine professionelle Darstellung des Inhalts. Konsumenten von Webseiten sind eher motiviert - auch längere Texte zu lesen - wenn ein passendes Bildmaterial die Inhalte zusätzlich transportiert.

Dies gilt nicht nur für Internet-Webseiten - auch im Intranet sorgen professionelle Bilder dafür, dass Mitarbeiter eher motiviert sind, das Intranet zu verwenden. Zwar stehen im Intranet eher funktionale sowie inhaltliche Aspekte im Vordergrund, aber ein professionell eingesetztes Bildmaterial fördert die Verwendung des Intranets zusätzlich.

SharePoint Online stellt mit der modernen Benutzeroberfläche, im Gegensatz zu der veralteten klassischen Ansicht, eine neue Version zur Verfügung, die so konzipiert ist, dass sie auf allen Geräten vollständig flexibel reagiert (fully responsive website). Die Inhalte werden dynamisch je nach verfügbarer Bildschirmgröße optimiert ausgegeben.

Vereinfacht ausgedrückt werden Bilder je nach Gerät und verwendeten Layout automatisch angepasst und skaliert. Das Skalieren und Zuschneiden erfolgen automatisch und auf diesen Prozess kann kein direkter Einfluss genommen werden.

Es gibt jedoch einige Regeln und Faktoren, die man einhalten sollte, damit der automatische Skalierungsprozess optimale Bilder für jede Ausgebgröße produzieren kann:

  • die Breite und Höhe der Bilder mit enstprechenden Seitenverhältnis ist zu beachten
  • der Layout-Typ und die Anzahl der damit verbundenen Spalten der Seite
  • für welches WebPart das Bild verwendet wird

Im folgenden Post widmen wir uns zunächst der Darstellung von Bildern auf Seiten.

Layout der Seite

In SharePoint stehen für moderne Seiten verschiedene Layout-Varianten mit unterschiedlichen Abschnitten zur Verfügung. Je nach ausgewähltem Layout ergeben sich unterschiedliche Platzverhältnisse in den Abschnitten. Es stehen z. B. Layouts mit voller Spaltenbreite, einer zentrierten Spalte, zwei zentrierten Spalten, drei zentrierten Spalten, eine dritte Spalte links und eine dritte Spalte rechts zur Auswahl bereit. Zunächst sollte darauf geachtet werden, dass Bilder, die sich über eine gesamte Spaltenbreite erstrecken, mindestens so breit sind wie die Spalte, in der sie platziert werden. Die folgende Tabelle zeigt die Größen je nach Spalten-Layout.

Layout

Breite in Pixeln

Spalte mit voller Breite

1920

Eine Spalte

1204

Zwei Spalten

586 pro Spalte

Drei Spalten

380 pro Spalte

Ein Drittel der linken Spalte

380 für linke Spalte; 792 für rechte Spalte

Ein Drittel der rechten Spalte

792 für linke Spalte; 380 für die rechte Spalte

Ändert sich die Größe der Seite, entweder durch Größenänderung des Browsers oder durch die Verwendung eines mobilen Gerätes, werden Bilder automatisch skaliert. Die Höhe der Bilder, die in anderen Spaltenlayouts platziert sind, hängt vom Seitenverhältnis ab. Die folgende Tabelle gibt eine entsprechende Übersicht der optimalen Bildgrößen.

SEITENVERHÄLTNIS

LAYOUT

16 x 9

Breite x Höhe in Pixel

4 x 3

Breite x Höhe in Pixel

Eine Spalte

1204 x 677

1204 x 903

Zwei Spalten

586 x 330

586 x 439

Drei Spalten

380 x 214

380 x 285

Ein Drittel der linken Spalte

380 x 446 für linke Spalte; 792 x 446 für rechte Spalte

380 x 594 für linke Spalte; 792 x 594 für rechte Spalte

Ein Drittel der rechten Spalte

792 x 446 für linke Spalte; 380 x 446 für rechte Spalte

792 x 594 für linke Spalte; 380 x 594 für rechte Spalte

Das folgende Beispiel zeigt die Darstellung bei der Verwendung korrekter Bildmaße.

Im nächsten Blog-Artikel werden die optimalsten Maße für Bilder in unterschiedlichen WebParts beschrieben.

Kommentare

Beliebte Posts aus diesem Blog

Connect-SPOService: The remote server returned an error: (400) Bad Request

Exchange Online: Schutzregel für E-Mail Weiterleitung