Kein Raster
Bildergrößen in Ceres
Dieses Kapitel führt die empfohlenen Bildergrößen für Kategorie- und Artikelbilder im Ceres Webshop auf. Alle auf der Startseite dargestellten Bilder werden mittlerweile über Widgets des ShopBuilders bereitgestellt.
Um eine Skalierbarkeit der Bilder auf vielen unterschiedlichen Endgeräten und Bildschirmgrößen sicherzustellen, sind die Bildergrößen variabel und passen sich, abhängig von der Bildschirmgröße des jeweiligen Endgeräts, in der Höhe an. Daher ist für die Anzahl der Pixel in der Breite-Spalte eine Spanne angegeben, innerhalb welcher die Höhe auf die angegebene Pixelzahl festgelegt ist. Ein Kategoriebild mit einer Breite von 500px hat demnach eine Höhe von 350px.
Die Bilder werden stets zentriert dargestellt. Abhängig von der jeweiligen Bildschirmgröße ist es also möglich, dass Bilder am linken und rechten Rand abgeschnitten werden.
1. Optimale Größen für Kategorie- und Artikelbilder
| Bildschirmbreite | Höhe |
|---|---|
größer als 0px |
300px |
größer als 544px |
350px |
größer als 768px |
400px |
| Bildschirmbreite | Höhe |
|---|---|
größer als 0px |
300px |
größer als 494px |
500px |
größer als 534px |
600px |
größer als 655px |
700px |
2. Optimale Größen für den ShopBuilder
In den ShopBuilder Widgets Bilderbox und Bilderkarussell werden 4 verschiedene Seitenverhältnisse für Bilder verwendet. Diese sind davon abhängig, ob das Widget in voller Größe oder in einem Raster mit 2, 3 oder 4 Spalten eingebunden ist und welche Layout-Einstellung für diese Raster gewählt wurde.
Für Bilder-Widgets, die ohne Raster oder in einem Raster mit 2 Spalten mit der Layout-Option 50%:50% genutzt werden, ist das optimale Seitenverhältnis von Breite zu Höhe 3:1. Bei Änderungen in den Layout-Einstellungen ändert sich das Seitenverhältnis auf 2:1 (für 66,6%) und 1:1 (bei 33,3%).
Bei der Einbindung in ein Raster mit 3 Spalten mit der Layout Option 30%:30%:30% beträgt das optimale Seitenverhältnis von Breite zu Höhe 1,5:1. Je nach Layout-Einstellung ändert sich das Seitenverhältnis wie in der unten aufgeführten Tabelle beschrieben.
Wenn Bilder in einem Raster mit 4 Spalten eingebunden werden sollen, ändert sich das optimale Seitenverhältnis von Breite zu Höhe auf 1:1. Das Layout für dieses Raster kann nicht angepasst werden.
| Anzahl der Rasterspalten | Layout-Einstellung (%) | Seitenverhältnis | Beispielgröße |
|---|---|---|---|
- |
3:1 |
1200x400px |
|
2 |
50% |
3:1 |
1200x400px |
2 |
66,6% |
2:1 |
1200x600px |
2 |
33,3% |
1:1 |
1200x1200px |
3 |
33,3% |
1,5:1 |
1200x800px |
3 |
50% |
2:1 |
1200x600px |
3 |
25% |
1:1 |
1200x1200px |
3 |
66,6% (gestapelt) |
1,5:1 |
1200x800px |
3 |
33,3% (gestapelt) |
1,5:1 |
1200x800px |
4 |
- |
1:1 |
1200x1200px |