Recommendation on Image Size

Images are important material for store design. Good image quality and reasonable display can improve the overall design and the conversion rate of the store. We have listed the recommended image size for each component and some problems you may encounter in the design process so you can choose a more suitable picture according to the following suggestions.

 

1. Recommended Image Size for Each Component

A. Product Picture

As the product layout on the PC is adjustable, it is recommended that you prioritise the picture display effect on the mobile phones.

We offer 4 product ratios: square (1:1), vertical (2:3), horizontal (4:3) and an original ratio. You can choose the appropriate ratio according to the shape of your product.

Note: If the original ratio is selected, it will be displayed in the ratio of the original picture. Please keep the ratio of all product images as consistent as possible. Otherwise, in list display, the products will appear uneven and affect the browsing experience.

 

_____2022-02-08___6.45.43.png

Recommended ratio

2:3

Minimum size (mobile 75% width)

Width 560px

Height 840px

Recommended size (large picture in details page)

Width 1700px

Height 2550px

 

B. Category Cover

We can upload the category cover under Admin panel > Products > Categories.

Recommended ratio 1:1
Recommended size ≥1600px

 

C. Category Banner

Category banner images can be uploaded in the Admin panel > Products > Categories. When the screen width changes, the height and width will be fixed, thus the image might get cropped.

Recommended size 1920px wide 420px high

 

D. Carousel

We support independent configuration of pictures on PC and mobile, and materials can be uploaded separately according to the display effect.

Note: If you select Fixed Height, your picture will be cropped; if you select Parallax effect, cropping will occur even if you have selected Fit to Picture.

Recommended ratio for PC

16:9

Recommended size

Width 1920px

Height 1080px

 

Recommended ratio for mobile

1:1

Recommended size

Width 1125px

Height 1125px

 

E. Featured Carousel

In Expect, Soo, Metal, Flexible, Control and other templates, there are featured carousel plug-ins, and images and text can be adapted to the browser size. 

Note: When uploading pictures on the computer, the screens of different devices will be cropped. Be careful not to design the main elements too far to the side; when uploading pictures on the mobile, the text of this component will be overlaid on the picture, please reserve space below the picture to avoid the main elements from being blocked.

Recommended size on computer When height is set to "full screen" 1220px wide 1080px high
  When the height is set to a specific value 1152px wide Height according to fit value
Recommended size for mobile When height is set to "full screen" 1125px wide 1125px high
  When the height is set to a specific value 750px wide Height is 2 times of the adaptation value

 

F. Single Picture

The default height of the single picture is fixed, and the picture will be cropped. You can select the image display area to control the focus content that you do not want to be cropped, or change the height of the image to "fit to image" to avoid cropping.

Note: The height of the material should be higher than the set cropping height, otherwise the picture will be enlarged and blurred.

Recommended ratio on the computer

16:9

Recommended size

1920px wide

1080px high

 

Recommended size for mobile 750px wide 1020px high

 

G. Graphic List

Recommended ratio

4:3 (A recommendation only, the original ratio will be used)

Recommended size

Width 650px

Height 488px 

 

H. Footer Promotion

Recommended ratio

16:9 (configurable)

Recommended size

Width 650px

Height 488px

 

I. Size Recommendation for Other Components

Component Name

Recommended Size

Applicable Theme

Icon Statement

144px*144px

Edges/Cycle/Carfit

Comment Template

240px*240px

Edges/Cycle/Carfit

Graphic Grid

Different layouts have different sizes, and the recommended width is over 1420px.

Edges/Cycle/Carfit

Featured Recommendation

Different layouts have different sizes, and the recommended width is over 1420px.

Edges/Cycle/Carfit

Shopping Pictures - Settings

Different layouts have different sizes, and the recommended width is over 1420px.

Edges/Cycle/Carfit

Trademark List

320px*320px

Expect/Control/Metal/Soo/Flexible

Campaign Promotion

Category: width 1600px or above

Banner Image: width 400px or above

Expect/Control/Metal/Soo/Flexible

Graphic Module

The image will adapt to the height, the recommended size is 1000px*1000px

All templates

 

2. Other considerations

It is recommended to provide an original picture as large as possible for the best visual display.

It is recommended to use a ".jpg" instead of "png" file format for the images to load faster. The theme will load the appropriate image size based on different screens to ensure the loading speed of your website.

 

3. FAQ

Q1. Why pictures will be cropped?

  • The module is set to a fixed height
    Single-picture module: When adapting to different screen widths and mobile devices, in order to ensure the readability of the content, the height of the module is fixed by default, and the pictures cannot be displayed in equal proportions.
    Carousel image module: If it is set to a fixed height, the pictures will maintain the same height under different screen widths. When the ratio changes, the pictures will be cropped.

  • A fixed scale is set
    If a module is set to a fixed proportion, the crop will be processed automatically. If the picture display area is not set, the default will be centered and cropped.

  • Responsive image processing
    Responsive images are used in many theme modules (carousel, single picture, etc.). Responsive imagery is an industry-standard technology for enlarging and cropping wide-format images to ensure that images have the same impact on desktop and mobile. The photo you took will be enlarged until it completely covers the display area, so that it can be scaled without being stretched or distorted,

Product display before responsive processing

_____2022-02-08___6.55.26.png

Product display after responsive processing

_____2022-02-08___6.56.26.png

Q2. Why does the picture still get cropped even if it is set to fit?

It may be that the parallax scrolling effect is turned on. In order for the parallax to take effect, the picture will be automatically enlarged to make the picture size exceed the display area, and cropping will naturally occur.

 

Q3. Why is the picture still not completely displayed even after using the suggested size?

First, check if the height is set to "fit to picture". If the settings are correct, then check whether the "parallax effect" is turned on, and turn it off to keep it uncropped.

 

 

 

 

 

Have more questions? Submit a request

Comments