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.