Empire's image features make use of the Responsive Images system (RIMG for short), so the largest, high-resolution images you have available will work best for balancing visual quality and page speed.
However, cropping may occur to fit a particular wrapper or container. If this is the case, consider these recommendations to reduce cropping with Empire's features
To get the best results, avoid portrait-oriented images, include images that can be cropped, and use our recommended image dimensions.
Use our recommended image dimensions
| Feature | Dimensions | Format | Notes |
| Logo | 200 x 80px | PNG | |
| Small promo | 50 x 50px | PNG | |
| Slideshow (desktop) |
Small 2880 x 800px Medium 2880 x 1000px Large 2880 x 1200px Fit screen 2880 x 2880px |
JPG | Reduce cropping by selecting Original aspect ratio as the Slideshow height |
| Slideshow (mobile image) |
Small 600 x 500px Medium 600 x 600px Large 600 x 700px Extra large 600 x 800px |
JPG | Square or portrait-oriented images work best for maintaining an image's focal point on mobile |
| 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 section | 360 x 360px | PNG, JPG | |
|
Shoppable image section |
Half 600 x 600px Two thirds 800 x 600px Full width 1200 x 600px |
PNG, JPG | |
| Video section |
1600 x 900px (16:9) 2100 x 900px (21:9) |
JPG | Cover image dimensions depend on the selected Aspect ratio setting |
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.
Avoid portrait-oriented images
Generally, Empire's features work best with images that are landscape in orientation (larger width, lower height). Image containers in the theme often have a maximum height in the styling. This design reduces vertical scrolling time for customers, especially for mobile devices.
On larger screens, however, the width will continue to expand to fill the allowed space. Cropping on the top and bottom of the image will occur.
Include images that can be cropped
Depending on the device or browser size, minor cropping may occur. If the container is concealing aspects of the image closer to the margins, avoid images with added text or subjects near the outer edges. Aim to include images that you are comfortable with cropping near the margins.
Share your experience with Empire
Your feedback is crucial! Help make Empire better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Empire?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!