Image sizes in plentyShop LTS
This chapter lists the recommended image sizes for category and item images for plentyShops. All images displayed on the homepage of the store are currently integrated via ShopBuilder widgets.
In order to ensure scalability of images on many different end devices and for various screen sizes, the image sizes are variable and adapt in height to the corresponding screen sizes. Therefore, the number of pixels in the width column is described as a margin, within which the height of the image is set to the described number of pixels. Therefore, a category image with a width of 500px has a height of 350px.
Images are always centered. Depending on the particular screen size, it is possible that images are cut off on the left or the right side.
1. Optimal sizes for category and item images
| Screen width | Height |
|---|---|
larger than 0px |
300px |
larger than 544px |
350px |
larger than 768px |
400px |
| Screen width | Height |
|---|---|
larger than 0px |
300px |
larger than 494px |
500px |
larger than 534px |
600px |
larger than 655px |
700px |
2. Ideal image sizes for the ShopBuilder
There are 4 different aspect ratios for images in the Image box and Image carousel widgets. These ratios are dependent on whether the widget is integrated as a standalone or in a grid with 2, 3 or 4 columns as well as which layout setting is selected for the grid.
For image widgets that are integrated without a grid or in a 2 column grid with the layout setting 50%:50%, the ideal image aspect ratio of width to height is 3:1. If you change the layout settings, the aspect ratio changes to 2:1 (for 66.6% elements) and 1:1 (for 33.3% elements).
For image widgets in a 3 column grid with the layout setting 30%:30%:30%, the ideal image aspect ratio of width to height is 1.5:1. Depending on the layout settings, the aspect ratio changes according to the table below.
For image widgets in a 4 column grid, the ideal image aspect ratio of width to height is 1:1. The layout for this type of grid cannot be changed.
| Number of grid columns | Layout setting (%) | Aspect ratio | Example size |
|---|---|---|---|
No grid |
- |
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% (stacked) |
1.5:1 |
1200x800px |
3 |
33.3% (stacked) |
1.5:1 |
1200x800px |
4 |
- |
1:1 |
1200x1200px |