In der Version 3 des “Diakonie im Internet”-Projektes gibt es keine vorgeschriebenen Bildgrößen, welche eingehalten werden müssen. Es empfiehlt sich jedoch, bestimmte Faustregeln für ein optimales Darstellungsergebnis einzuhalten.
Seitenverhältnis
Auch welches Seitenverhältnis Ihre Bilder haben, ist Ihnen überlassen. Sie können Bilder mit den unterschiedlichsten Seitenverhältnissen auf Ihren Seiten einbinden. Für eine harmonische Gesamtwirkung empfehlen wir jedoch, dass Bilder kontext- oder seitenbezogen im gleichen Seitenverhältnis eingefügt werden.
Beispiel: Sie möchten mehrere Bilder in einem Slider darstellen, oder eines der Spaltenlayouts aus unseren Vorlagen nutzen?Dann ist es sinnvoll, dass die genutzten Bilder innerhalb des Sliders oder des Spaltenlayouts gleich groß sind und dasselbe Seitenverhältnis besitzen.
Tipp: Wenn Sie die mehrspaltige Vorlage nutzen, sehen quadratische Bilder am besten aus – wie zu sehen auf Beispielseite 1.
Die Größen in Pixel
Grundsätzlich orientiert sich die Bildgröße an folgenden Dingen:
- verfügbare Breite
- Anteil an der verfügbaren Breite
Die verfügbare Breite
Die verfügbare Breite ergibt sich daraus, ob der Inhalt der Seite oder des Blocks über den gesamten Bildschirm erstreckt, oder sich nur innerhalb des “Containers” bewegt. Im letzteren Fall beträgt die verfügbare Breite 1200 Pixel.
Sofern der Inhalt einer Seite oder eines Block, in dem die Bilder platziert sind, sich über den gesamten Bildschirm erstreckt, empfehlen wir von einer Breite von 1900 Pixeln auszugehen.
Die konkreten Bildgrößen – Anteil an der verfügbaren Breite
Die konkreten Bildgrößen ergeben sich immer aus dem Anteil an der verfügbaren Breite.
Beispiel: Sie haben einen Spaltenblock mit zwei Spalten (Verhältnis 2:1) platziert. In die größere Spalte soll nun ein Bild platziert werden. In dem Fall sollte das Bild eine Größe von 2/3 der verfügbaren Breite haben.
Befindet sich der Spaltenblock innerhalb des Containers (verfügbare Breite = 1200 Pixel), ergibt das für die Bildgröße eine Breite von ca. 800 Pixeln.
| Anteil an der Gesamtbreite | Pixelgröße |
|---|---|
| 1/4 25% | 300 |
| 1/3 33,33% | 400 |
| 1/2 50% | 600 |
| 2/3 66,66% | 800 |
| 100% | 1200 |