Using the right image dimensions for Empire's features can be tricky, as cropping may occur to fit a particular wrapper or container. Use these dimension recommendations to prepare images for use in Empire's features.
Images may crop
Depending on the device or browser size, minor cropping may occur. This can cause problems by concealing aspects of the image closer to the margins. Considering this, avoid images with added text or subjects near the outer edges.
Recommended image dimensions
| Feature | Dimensions | Format | Notes |
| Logo | 200 x 80px | PNG | |
| Small promo | 50 x 50px | PNG | |
| Slideshow | 1800 x 1000px | JPG | Reduce cropping by selecting Original aspect ratio as the Slideshow height |
| Highlights banner | 50 x 50px | PNG, JPG | |
| Collection list section | 2000 x 2000px | PNG, JPG | |
| Featured collection section | 500 x 750px | JPG | |
| Grid section | 1800 x 1000px | JPG | |
| Image with text overlay section | 1800 x 1000px | JPG | |
| Logo list section | 320 x 320px | PNG | |
| Mosaic section | Images adapt depending on Section height, amount of Promo blocks used, and browser window size. | JPG, PNG | Reduce cropping by selecting Maintain aspect ratio |
| Newsletter section | 320 x 320px | PNG | |
| Map section | 1800 x 1000px | JPG | |
| Search section | 1000 x 300px | PNG, JPG | |
| Menu list | 360 x 360px | PNG, JPG | |
| Video section |
1600 x 900px (16:9) 2100 x 900px (21:9) |
JPG | Cover image dimensions depend on Aspect ratio selected |
Dimensions recommended here can be doubled to optimize for Retina screens. For example, add an image for the Logo that is 400 x 160px, then adjust the maximum width slider to reduce the space it occupies.