Mit der Nutzung des Divi Themes und insbesondere des Divi Page Builders lassen sich Bilder problemlos an den gewünschten Stellen einfügen. So schön einfach diese Funktion ist, solltest du trotzdem darauf achten die passende Bildgröße zu verwenden.
Warum die Bildgröße wichtig ist?
Die passende Bildgröße ist weder zu klein und führt damit zu einer pixeligen, unscharfen Darstellung des Bildes noch zu groß und sorgt damit für ein langsameres Laden Deiner Website.
Es geht also darum möglichst die ideale Bildgröße zu ermitteln und das gewünschte Bild auf die passende Größe zu bringen.
Wichtige Faktoren
Um die passende Bildgröße zu ermitteln musst Du drei Faktoren berücksichtigen:
- Das Seitenverhältnis (aspect ratio) Deines Bildes ist das Verhältnis der Höhe zur Breite des Bildes.
- Das Spalten Layout (colum layout) bestimmt die maximale angezeigte Breite Deines Bildes
- Responsivness bestimmt die Veränderungen an den Bildmaßen auf verschiedenen Bildschirmgrößen wie Desktop, Tablet oder Smartphone.
Im Folgenden betrachten wir die einzelnen Punkte genauer.
Divi Bilder Formate (aspect ratio)
Das Format eines Bildes wird durch sein Seitenverhältnis bestimmt. D.h. dem Verhältnis der Breite zur Höhe des Bildes. Bekannte Seitenverhältnisse sind 4:3 und 16:9. Alte Fernseher weisen stets ein Seitenverhältnis von 4:3, während neuere Flachbildfernseher meist ein Seitenverhältnis von 16:9 besitzen. Portrait Fotos werden meist im Format 3:4 dargestellt. Wer schon mal Fotos bestellt hat kennt diese Seitenverhältnissen sicherlich auch.
Das Divi Theme wurde so konzipiert, dass genau diese Formate 4:3, 3:4 und 16:9 besonders berücksichtigt wurden. Es können problemlos auch andere Formate verwendet werden, aber diese Standards passen sich in der Regel sehr gut in die Seitenlayouts ein.
Optimieren vor dem Hochladen
Idealerweise sollte die Bilder erst lokal optimiert werden bevor diese in WordPress hochgeladen werden. D.h. der Bildausschnitt und alle Anpassungen sollten erst erfolgen. Dabei solltest Du möglichst darauf achten, dass die Dateigröße der Bilder nicht weit über 200 kb liegt, damit die Ladezeit Deiner Website nicht zu stark beeinträchtigt wird.
Ausnahme für das Divi Beitragsbild (Featured Image)
Nachtrag: Im folgenden Text des Artikels erläutern wir alles Wissenswerte zu den optimalen Bildmaßen für das Divi Theme. Uns selbst ist lange Zeit nicht aufgefallen, dass es eine sehr merkwürdige Ausnahme für das Beitragsbild im Divi Theme existiert. Dies wird erstaunlicherweise nicht im Format 16:9, sondern 16:10dargestellt. Verwendest Du ein Bild im Format 16:9 wird einfach ein wenig vom rechten und linken Rand des Bildes abgeschnitten, um auf das von Divi verwendete 16:10 Format zu kommen. Bei hochformatigen Bildern ist das nicht zu bemerken.
In der Regel fällt das bei den meisten Bildern nicht auf. Falls Du Dir jedoch eine Vorlage erstellen willst, müsstest Du bei einer Bildweite von 1080 px eine Höhe von 675 px verwenden. Eine Formel wie Du bei verschiedenen Anforderungen die passenden Größen berechnen kannst, findest Du weiter unten. Du musst dabei nur die Werte für ein 16:10 Format verwenden.
Es ist etwas erstaunlich, dass Elegant Themes ausgerechnet für die Beitragsbilder dieses ungewöhnliche Format verwendet und dies auch nirgends offiziell mitteilt. Allerdings ist der Unterschied zum 16:9 Format so gering, dass es in den meisten Fällen kaum auffallen wird.
Bildmaße für das Standardlayout des Divi Themes
Anhand folgender Grafik lässt sich die optimale Bildbreite für jedes Spaltenlayout ablesen. Dabei wurde von der Standardeinstellung von Divi mit 1080 Pixel für die Breite der Website ausgegangen. Falls Du die Breite anders angepasst hast, musst Du die Bildbreiten etwas anpassen.
Jetzt weißt Du zwar die ideale Bildbreite, aber was ist mit der passenden Bildhöhe? Die hängt wiederum von dem Format Deines Bildes ab.
Berechnet wird auf Basis der maximalen Spaltenbreite die dann der Bildbreite entspricht. Entsprechend dem Seitenverhältnis lässt sich nun die Bildhöhe Berechnen:
Bildhöhe = Bildbreite : Seitenverhältnis erste Zahl * Seitenverhältnis zweite Zahl
D.h. für 1080 Pixel Bildbreite bei einem 4:3 Format sieht die Berechnung der Bildhöhe folgendermaßen aus:
Bildhöhe = 1080 : 4 * 3 = 810 Pixel
Für die Standeinstellungen in Divi haben wir die entsprechenden Bildhöhen bereits errechnet, falls Du andere Einstellungen nutzt, kannst du mit Hilfe der Formel Deine eigenen idealen Bildhöhen berechnen.
Wichtig: Im Folgenden listen wir die passenden Bildgrößen für die Desktop Ansicht. Bevor Du aber Deine Bilder auf diese optimierst, schau vorher noch unsere Information zum Thema Responsivness. Vermutlich willst Du Deine Bilder gleich auch für kleinere Bildschirmgrößen optimal präsentieren. Dann nutze die Bildgrößen, die wir Dir in dem Abschnitt nennen!
Bildmaße für das 4:3 Format
Die folgende Liste zeigt Dir welches die idealen Bildmaße für ein 4:3 formatiges Bild sind in Bezug auf die verwendete Spaltenbreite.
1 Spalte: 1080 x 810 px
¾ Spalte: 795 x 597 px
⅔ Spalte: 700 x 526 px
½ Spalte: 510 x 384 px
⅓ Spalte: 320 x 241 px
¼ Spalte: 225 x 170 px
Bildmaße für das 16:9 Format
Die folgende Liste zeigt Dir welches die idealen Bildmaße für ein 16:9 formatiges Bild sind in Bezug auf die verwendete Spaltenbreite.
1 Spalte: 1080 x 608 px
¾ Spalte: 795 x 447 px
⅔ Spalte: 700 x 394 px
½ Spalte: 510 x 287 px
⅓ Spalte: 320 x 181 px
¼ Spalte: 225 x 128 px
Bildmaße für das 3:4 Format
Die folgende Liste zeigt Dir welches die idealen Bildmaße für das ein 3:4 formatiges Bild (typisches Portrait Format) sind in Bezug auf die verwendete Spaltenbreite. Hierbei solltest du bedenken, dass gerade bei breiten Spalten die Bildhöhe extrem groß wird und dies in Deinem Layout meist weniger gut aussehen wird. Das 3:4 Format eigenet sich meist besser für ½ Spalten oder kleiner.
1 Spalte: 1080 x 1440 px
¾ Spalte: 795 x 1060 px
⅔ Spalte: 700 x 933 px
½ Spalte: 510 x 680 px
⅓ Spalte: 320 x 427 px
¼ Spalte: 225 x 300 px
Responsivness
Mit diesem Wissen kannst Du Deine Bilder passend vorbereiten. Allerdings kann Dir die eigentlich wünschenswerte automatische Anpassung von Divi an unterschiedliche Bildschirmgrößen wie beim Tablet oder Smartphone einen kleinen Strich durch die Rechnung machen.
Wenn die Bildschirmgröße unter 1080 Pixel liegt, passt Divi seine Anzeige an und macht automatisch aus einem 4 Spalten Layout ein 2 Spalten Layout, damit die Inhalte z.B. auf einem Tablet besser präsentiert werden. Bei Bildern, die Du eigentlich in einer passenden Größe für die Desktopansicht erstellt hast, wirken diese im 2-spaltigen Layout leider etwas klein.
Bei dieser Art der Anzeige ist eine Bildbreite von 370 px ideal. Dann wird der verfügbare Raum besser genutzt.
In der Desktopansicht werden die 370px breiten Bilder dann trotzdem in der 4-spaltigen Ansicht angezeigt, allerdings auf 225 Pixel verkleinert. Das ist eine gute Lösung, denn so bekommst Du auf allen Bildschirmgrößen eine gute Anzeige der Bilder und die Dateigröße bleibt trotzdem noch im Rahmen.
Um also für alle Gerätegrößen ideale Bilder zu erstellen solltest Du folgende Bildgrößen nutzen:
Für 4:3 Formate:
1 Spalte: 1080 x 810 px
⅔ Spalte: 770 x 578 px
¾ Spalte: 770 x 578 px
½ Spalte: 770 x 578 px
⅓ Spalte: 770 x 578 px
¼ Spalte: 370 x 278 px
Für 16:9 Formate:
1 Spalte: 1080 x 608 px
⅔ Spalte: 770 x 433 px
¾ Spalte: 770 x 433 px
½ Spalte: 770 x 433 px
⅓ Spalte: 770 x 433 px
¼ Spalte: 370 x 208 px
Für 3:4 Formate:
1 Spalte: 1080 x 1440 px
⅔ Spalte: 770 x 1027 px
¾ Spalte: 770 x 1027 px
½ Spalte: 770 x 1027 px
⅓ Spalte: 770 x 1027 px
¼ Spalte: 370 x 493 px
Slider Hintergrundbilder
Hintergrundbilder für Slider sollten zumindest die Breite der Spalte besitzen in der sich der Slider befindet. Damit kannst Du einfach die bereits für die verschiedenen Formate aufgeführten Bildgrößen verwenden. Und falls Du auch bei Deinem Slider die Anpassung auf verschiedene Bildschirmgrößen möglichst optimal berücksichtigen willst, dann schaust Du nach den unter der Überschrift Responsivness aufgeführten Bildgrößen.
Allerdings richtet sich die Höhe des Sliders nach den auf dem Slider dargestellten Inhalten, so dass es nötig sein kann, dass es nötig wird die Bildhöhe zu verändern. Her zu diesem Thema findest du in unserem Artikel „Divi Slider Höhe anpassen„.
Hintergrundbilder für vollbreite Slider
Hier empfiehlt sich eine Bildbreite von 1920 Pixel.
Die eigentlich nötige Breite des Bildes richtet sich nach der Breite des genutzten Browserfensters. Für die meisten Besucher wird eine Bildbreite von 1280 Pixel ausreichen, allerdings ist man für größeren Monitoren mit einer Bildbreite von 1920 Pixel optimaler vorbereitet.
Auch hier gilt die Höhe des Sliders richtet sich nach den Inhalten der Folien und so muss die Bildhöhe ggf. angepasst werden.
Bilder auf Sliderfolien
Du kannst auf den einzelnen Folien Deines Sliders auch Bilder anzeigen lassen. Im Gegensatz zu den Hintergrundbildern füllen diese nicht die gesamte Anzeige aus. Diese Bilder werden nur in Slidern angezeigt die sich in ¾ Spalten, ⅔ Spalten oder einer kompletten Spalte befinden. Folgende optimale Bildbreiten passen hier.
1 Spalte: 450 px
¾ Spalte: 330 px
⅔ Spalte: 320 px
Hier braucht man sich nicht um die Responsivness kümmern, da ab dem Umbruchpunkt für Tablets bei 768 Pixel nur noch die Texte und keine Bilder in den Folien angezeigt werden.