Die richtige Bildgröße auswählen auf deiner Divi Webseite

Bildgröße in Divi Wordpress Webseite

Feb 16, 2021

Auf die Größe kommt es doch nicht an! Oder etwa doch?

Bei der Auswahl der Bilder auf deiner Webseite solltest du die Größe auf jeden Fall immer im Auge haben. So gehört die Auswahl der Bildgröße zum Optimieren deiner Bilder fürs Web dazu.

Hier solltest du immer drei Faktoren beachten:

  1. Das Seitenverhältnis – das Verhältnis zwischen Höhe und Breite des Bildes
  2. Das Spaltenlayout – die maximale Breite des Bildes
  3. Responsiveness – die Änderungen der Bilder auf verschiedenen Displaygrößen, z.B. Desktop, Tablet und Handy

Das Seitenverhältnis drückt das Verhältnis zwischen Höhe und Breite eines Bildes aus. Üblicherweise nutzen wir die Seitenverhältnisse 16:9, 4:3 und 3:4.

Die zwei üblichsten Verhältnisse, die man von Monitoren oder Fernsehern kennt, sind 16:9 und 4:3, wobei 16:9 etwas länglicher und 4:3 etwas “boxartiger” ist – dies war früher die Standardgröße für Fernseher und Bildschirme, wobei heutzutage 16:9 üblicher ist.

3:4 eignet sich hervorragend für Bilder im Hochformat.

Es gibt in vielen Bildbearbeitungsprogrammen Voreinstellungen für das Seitenverhältnis, um die Bilder entsprechend zu beschneiden.

Ansonsten gibt es auch einen praktischen Rechner online, um den Wert auszurechnen, zwar auf Englisch, dafür aber eigentlich selbsterklärend.

Die Bildbreite nach dem Verwendungsort des Bildes und die Spaltenstruktur in Divi gibt uns die Breite vor. Hier ist eine praktische Übersicht von Elegantthemes:

image sizes builder

Die Höhe richtet sich nach dem Seitenverhältnis, also 4:3 oder 16:9

Hier eine Übersicht der üblichen Größen:

4:316:9
1 Spalte: 1080 x 810
¾ Spalte: 795 x 597
⅔ Spalte: 700 x 526
½ Spalte: 510 x 384
⅓ Spalte: 320 x 241
¼ Spalte: 225 x 170
1 Spalte: 1080 x 608
¾ Spalte: 795 x 447
⅔ Spalte: 700 x 394
½ Spalte: 510 x 287
⅓ Spalte: 320 x 181
¼ Spalte: 225 x 128

Headerbilder

Eine Besonderheit sind die Headerbilder. 1920 Pixel entspricht der Vollbildbreite. Die Höhe ist beim Headerbild variabel und richtet sich nach dem Inhalt. Da wir aber aufpassen müssen, dass die Bilder nicht zu groß werden, schlage ich ein Format von 16:5 vor, also 1920px x 600px.

Beitragsbild auf Beitragsseiten

Falls eine Seitenleiste vorhanden ist: ⅔ Spalte = 700px

Falls keine Seitenleiste vorhanden ist: 1 Spalte = 1080px

Bildergrößen für die Envira Galerie

Da wir bei der Galerie das Lightbox Feature verwenden, empfiehlt es sich etwas größere Bilder zu verwenden. 

Hier bietet sich eine Breite von 1000 – 1200px an – diese sieht auch auf größeren Monitoren gut aus.

Produktfoto auf WooCommerce

800x800px

Hier findest du die Infos auch als Video

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Beliebte Beiträge

5 schnelle Wege, dein Ranking zu verbessern

1. Veröffentliche Inhalte, die für deine Nutzer relevant sind und die dich als Experte:in positionieren. Nutze dabei spezifische Keywords und Phrasen, die ein Interessent nutzen würde. 2. Überarbeite deine Inhalte regelmäßig Reguläre Updates signalisieren, dass deine...

mehr lesen

Tool Empfehlung: Google Search Console

Auch wenn du ein blutiger Anfänger in Sachen Website bist, solltest du dir auf jeden Fall das Google Search Console Tool installieren. Mit diesem Tool kannst du die Präsenz deiner Website in den Google-Suchergebnisse beobachten sowie eventuelle Fehler entdecken und...

mehr lesen

Mehr Wissen

Klicken Sie auf den unteren Button, um den Inhalt von embeds.beehiiv.com zu laden.

Inhalt laden

Vielleicht auch für dich interessant…

0 Kommentare

Einen Kommentar abschicken

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

19 − 1 =