Moderne Seiten und Webparts sind so konzipiert, dass sie auf allen Geräten vollständig reaktionsfähig sind, was bedeutet, dass Bilder, die in Webparts verwendet werden, unterschiedlich skaliert werden, je nachdem, wo sie angezeigt werden, welches Layout verwendet wird und auf welchem Gerät sie angezeigt werden. Moderne Seiten sind beispielsweise so konzipiert, dass sie auf mobilen Geräten gut aussehen, und die automatische Bildskalierung trägt dazu bei, ein attraktives Erlebnis zu schaffen.
Welche Bildgrößen funktionieren am besten?
Aufgrund des responsiven Seitendesigns gibt es keine bestimmte Höhe oder Breite in Pixeln, die sicherstellen, dass ein Bild auf allen Geräten und Layouts eine bestimmte Form behält. Die Größe und der Zuschnitt von Bildern werden automatisch geändert, um auf verschiedenen Geräten und in unterschiedlichen Layouts das bestmögliche Ergebnis zu erzielen. Es gibt jedoch einige Richtlinien, mit denen Sie sicherstellen können, dass Ihre Bilder auf Ihren Seiten ansprechend dargestellt werden.
Die Auswahl der optimalen Bildgröße für Ihre Seite hängt von den folgenden Faktoren ab:
- Seitenverhältnis: das Verhältnis zwischen Höhe und Breite von Bildern
- Spaltenlayout: Der Typ und die Anzahl der Spalten auf Ihrer Seite
- Webpartlayout: Das Layout, das Sie für das Webpart auswählen, in dem das Bild verwendet wird
Seitenverhältnis
Ein Seitenverhältnis ist das Verhältnis zwischen Breite und Höhe von Bildern. Sie wird normalerweise als zwei Zahlen ausgedrückt, z. B. 3:2, 4:3 oder 16:9. Die Breite ist immer die erste Zahl. Beispielsweise könnte ein Seitenverhältnis von 16:9 1600 Pixel in der Breite und 900 Pixel in der Höhe betragen. Oder es könnten 1920 x 1080, 1280 x 720 oder andere Breiten-/Höhenkombinationen sein, die auf 16:9 berechnet werden können. Sie finden Seitenverhältnisrechner online und in einigen Fotobearbeitungstools, mit denen Sie die Seitenverhältnisse Ihrer Bilder bestimmen können.
In den meisten Fällen funktionieren Bilder in modernen Webparts auf Layouts und Geräten am besten, wenn sie je nach Layout ein Seitenverhältnis von 16:9 oder 4:3 aufweisen.
Spaltenlayouts
Eine Seite kann mit Abschnitten gestaltet werden, die unterschiedliche Spaltentypen und -layouts enthalten, z. B. Spalten mit voller Breite, eine Spalte, zwei Spalten, drei Spalten, ein Drittel linke und ein Drittel rechte Spalten. Eine allgemeine Regel für Bilder, von denen erwartet wird, dass sie die Breite einer Spalte ausfüllen, ist, dass sie mindestens so breit sein müssen wie die Spalte, in der sie platziert werden. Beispielsweise sollte ein Bild in einem Bildwebpart in einer Spalte mindestens 1204 Pixel breit sein.
Es folgen die Breitenrichtlinien für die einzelnen Spaltenlayouts:
| 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 die linke Spalte; 792 für rechte Spalte |
| Ein Drittel rechte Spalte | 792 für die linke Spalte; 380 für rechte Spalte |
Aufgrund der reaktionsfähigen Natur von Seiten werden Bilder in Spalten mit voller Breite immer in voller Breite des Bildschirms angezeigt, mit einer automatischen Höhe basierend auf der Bildschirmgröße.
Die Höhe von Bildern, die in anderen Spaltenlayouts platziert werden, hängt vom Seitenverhältnis ab. Hier finden Sie Höhen-/Breitenrichtlinien für die Seitenverhältnisse 16:9 und 4:3 (aufgerundet auf das nächste Pixel). Dies ist hilfreich, um Ihre Bilder in einer Breite und Höhe zu halten, die für mobile Geräte geeignet sind, z. B.:
| 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 rechte 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 |
Webpartlayouts
Die Layouts in den von Ihnen verwendeten Webparts wirken sich auch auf die Skalierung Ihrer Bilder aus. Die folgenden Beispiele zeigen verschiedene Webparts und einige der Optionen und Seitenverhältnisse, die Sie verwenden können.
| Webpart | Seitenverhältnisse |
|---|---|
| Hero-Webpart | Die folgenden Seitenverhältnisse für die Layouts "Kacheln" und "Ebenen" sind:
|
| Webpart mit hervorgehobenem Inhalt | 16:9 ist das Seitenverhältnis für Karussell-, Filmstreifen- und Rasterlayouts. Hier ist ein Beispiel für das Seitenverhältnis 16:9. Das erste Bild zeigt das Filmstreifen-Layout, das zweite zeigt das Raster-Layout: 
|
| Bildwebpart | Bilder werden auf die Breite des Abschnitts erweitert, der das Webpart enthält. Hier ist ein Beispiel für ein Bild im Bildwebpart, das das Seitenverhältnis 16:9 verwendet. 
Sie haben auch die Möglichkeit, das Seitenverhältnis zu ändern oder Ihr Bild mit dem Bildbearbeitungstool freihändig zuzuschneiden oder die Ziehpunkte zu verwenden, um Ihr Bild größer oder kleiner zu machen. 
|
| Bildergalerie-Webpart | Die folgenden Seitenverhältnisse können in verschiedenen Layouts verwendet werden:
|
| News-Webpart | Je nach Layout können Bilder im News-Webpart 4:3, 16:9 oder 21:9 sein. Hier sehen Sie ein Beispiel für Bilder in einem Top-Stockwerk und einem Karussell-Layout: 
|
| Seitentitelbereich | Bilder sehen am besten aus, wenn sie im Querformat oder im Seitenverhältnis 16:9 oder höher vorliegen und eine Größe von mindestens 1 MB aufweisen. Achten Sie auch darauf, einen Fokuspunkt festzulegen, um den wichtigsten Teil des Bilds im Blick zu behalten, insbesondere, wenn das Bild in Miniaturansichten, Nachrichtenlayouts und Suchergebnissen verwendet wird. Beispiel (Originalbild 16:9) mit Brennpunkt auf dem Lautsprecher: 
|
| Miniaturansicht der Seite | Seitenminiaturansichten werden an Stellen wie Suchergebnissen, Ergebnissen hervorgehobener Inhalte, Newsbeiträgen und mehr angezeigt. Standardmäßig stammt die Miniaturansicht aus dem Seitentitelbereich oder aus dem Webpart in erster Reihenfolge auf der Seite (z. B. oben links in einem Seitenlayout). Sie können die Standardeinstellung außer Kraft setzen und die Seitenminiaturansicht ändern. Wenn Sie dies tun, verwenden Sie am besten ein Bild mit einem Seitenverhältnis von 16:9. Beispiel (Originalbild 16:9): 
|
| Quicklinks-Webpart | Das Quicklinks-Webpart verfügt über sechs verschiedene Layouts. Dies sind die voreingestellten Seitenverhältnisse:
|
Tipp
Wenn Sie ein Bild zu einem Seitentitelbereich oder Hero-Webpart hinzufügen, empfiehlt es sich außerdem, den Fokuspunkt in dem Bereich des Bilds festzulegen, den Sie immer anzeigen möchten. Weitere Informationen zum Festlegen eines Schwerpunkts für diese beiden Szenarien finden Sie unter Verwenden des Hero-Webparts und Erstellen und Verwenden von modernen Seiten auf einer SharePoint-Website.
Empfehlungen für Websiteheaderbilder
Zusätzlich zu Seiten können Sie auch benutzerdefinierte Logos oder Bilder in einem erweiterten Layout hinzufügen. Hier finden Sie Größenempfehlungen für diese Elemente.
| Element | Beschreibung | Empfehlung Breite x Höhe in Pixel |
|---|---|---|
| Websitelogo | Größeres Logo, das je nach hochgeladenem Design nicht quadratisch und transparent sein kann. | 192 x 64 Format: PNG, JPEG, SVG (SVG ist auf mit Gruppen verbundenen Websites nicht zulässig) |
| Miniaturansicht des Websitelogos | Eine quadratische Logo-Miniaturansicht, die verwendet wird, wenn kein Websitelogo hochgeladen wird oder an Stellen, an denen ein quadratisches Format erforderlich ist. Dieses Element ist erforderlich. |
64 x 64 Format: PNG, JPEG, SVG (SVG ist auf mit Gruppen verbundenen Websites nicht zulässig) |
| Erweitertes Layout Websitelogo | Das erweiterte Kopfzeilenlayout weist eine erweiterte Websitelogobreite auf. | 300 x 64 Format: JPEG, PNG, SVG |
| Hintergrundbild des erweiterten Layouts | Ein neues Hintergrundbild, das mit dem erweiterten Header verwendet werden kann. | 2560 x 164 Format: JPEG, PNG |