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 (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
0 Kommentare