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