Pagebuilder Divi

Welche Bildgrößen sind bei Divi optimal?

von | 6.Nov 2021 | Pagebuilder-Divi | 0 Kommentare

Bilder spielen auf jeder Website eine große Rolle. Die Bilder so einzubinden, dass sie auf allen Geräten gut dargestellt werden, ist dabei (manchmal) ein Akt 🙈

Okay, die richtige Vorbereitung ist bei Bildern ganz wichtig. Auf die folgenden Dinge solltest Du achten:

  • die Dimensionen = Breite px * Höhe px und Ratio = 4:3, 3:4, 16:9, 1:1…
  • die Dateigröße = alles kleiner als 300kb
  • das Dateiformat = jpg, png…

Was ich definitiv nicht empfehle, ist die Bildbearbeitung mit WordPress. Ja, man kann damit Bilder zuschneiden, vergrößern & verkleinern, aber WordPress erstellt dann eine neue Datei mit dem Zusatz “…cropped” oder Ähnlichem. Die Original-Datei verbleibt auf dem Server, aber in der Mediathek siehst Du dann nur noch die bearbeitete Datei. Das führt dazu, dass der Server, auf dem die Installation liegt, mehr Speicherplatz benötigt.

Als ich mit Divi begonnen hatte,…

…da half mir ein Blog-Beitrag über die Divi-Bildgrößen (siehe Links), um meine Bilder entsprechend vorzubereiten. In diesem Beitrag geht’s allerdings kompliziert zu, denn je nachdem, bei welcher Spaltenbreite ein Bild eingesetzt wird, sollte man auch das Bild passend dimensionieren. Für mich war das nicht praktikabel, denn manch ein Bild möchte ich vielleicht an unterschiedlichen Stellen einbinden und dafür jedes Mal Rücksicht auf die Spaltenbreite nehmen? Ich stellte mir auch die Frage, ob das dann mit der Ansicht auf Mobil-Geräten noch so passt.

Mittlerweile bin ich der Ansicht, dass Querformat-Bilder immer mit 1920px*1080px (Ratio 16:9) dimensioniert sein sollten. Bisher bin ich damit gut gefahren 😉

Für Hochkant-Bilder sieht das anders aus…einfach die Dimensionen für Querformat-Bilder umdrehen? Na ja, das kommt wohl aufs Bild an. 1080px*1920px (Ratio 9:16) passt fürs Smartphone, kann aber auf der Website merkwürdig aussehen…wirkt oft zu schmal. Mit 1080px*1440px (Ratio 3:4) siehts meist besser aus.

Natürlich kannst Du auch quadratische Bilder verwenden. Diese machen sich meistens für Testimonials ganz gut. Manchmal steht dabei, dass eine bestimmte Bildgröße – z.B. 600px*600px – erwünscht ist. Meine Empfehlung: Mit 1080px*1080px (Ratio 1:1, klassisches Instagram-Format) liegst Du nahezu immer richtig.

Bei Divi gibts ein Sonderformat fürs Blog-Beitragsbild mit der Ratio 16:10 = 1920px*1200px. Bilder mit einer Ratio von 16:9 funktionieren auch, es wird ein wenig am rechten und linken Rand abgeschnitten…fällt oftmals nicht so auf, außer Du platzierst Text direkt am Rand. Bei Blog-Beitragsbildern empfehle ich grundsätzlich die Platzierung von Text in der Mitte des Bildes. Gerade Blog-Beitragsbilder werden auf die unterschiedlichste Weise verwendet…z.B. in der Kategorie-Ansicht…und dementsprechend beschnitten (engl. cropped).

Bei Divi gibts ein Sonderformat….

…fürs Blog-Beitragsbild (auch für den Header verwendbar)mit der Ratio 16:10 = 1920px*1200px.

Bilder mit einer Ratio von 16:9 funktionieren auch, es wird ein wenig am rechten und linken Rand abgeschnitten…fällt oftmals nicht so auf, außer Du platzierst Text direkt am Rand. Bei Blog-Beitragsbildern empfehle ich grundsätzlich die Platzierung von Text in der Mitte des Bildes. Gerade Blog-Beitragsbilder werden auf die unterschiedlichste Weise verwendet…z.B. in der Kategorie-Ansicht…und dementsprechend beschnitten (engl. cropped).

“Meine” Lieblings-Bildgrößen

Eine kleine Übersicht

16:10

Header-Bild

1920px * 1200px

Blog-Beitrags-Bild

1920px * 1200px

Standard Querformat

Standard Hochformat

Standard Quadrat

16:9

Header-Bild

1920px * 1080px

Blog-Beitrags-Bild

1920px * 1080px

Standard Querformat

1920px * 1080px

Standard Hochformat

Standard Quadrat

9:16

Header-Bild

Blog-Beitrags-Bild

Standard Querformat

Standard Hochformat

1080px * 1920px

Standard Quadrat

4:3

Header-Bild

Blog-Beitrags-Bild

Standard Querformat

1080px * 810px

Standard Hochformat

Standard Quadrat

3:4

Header-Bild

Blog-Beitrags-Bild

Standard Querformat

Standard Hochformat

1080px * 1440px

Standard Quadrat

1:1

Header-Bild

Blog-Beitrags-Bild

Standard Querformat

Standard Hochformat

Standard Quadrat

1080px * 1080px
Selbst nutze ich die Ratio-Formate 9:16 und 4:3 nur im Ausnahmefall bzw. wenn es das Design erfordert.

Schlagwort-Liste

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden. Datenschutzerklärung

DigitalFreak-Newsletter

Hol Dir meinen Newsletter mit Infos über WordPress, Divi und noch viel mehr ;-)