Image sizing versus image quality is always a balancing act. To ensure you don't create graphics which are oversized, here are some guidelines based on a maximum site width of 1350px. This is the maximum size the image will reach within each zone with this container sizing. Image height is up to you. Here, heights used are just guides for showcasing common banner sizings.
With the grid system (Front-End UI Grid System), we can generate these sizing examples.
Column Example | Width | Sizing Example (width x height in px) |
|---|---|---|
| 1 | 100% | 1440 x 200
|
| 2 | 50% | 720 x 200
|
| 3 | 33.333% | 480 x 200
|
| 3 | 66.666% | 960 x 200
|
| 4 | 25% | 360 x 200
|
| 4 | 75% | 1080 x 200
|
| 6 | 16.667% | 240 x 200
|
| 8 | 12.5% | 180 x 200
|
| 12 | 8.333% | 120 x 200
|
Related help
