Attractive pictures are an important part of making an online store a success. Using the right file type and dimensions will ensure all your images are rendered optimally.
- Recommended image dimensions
- What to do if an image fails to upload
- What to do if an uploaded image is blurry or low quality
1. Recommended image dimensions
A. Image height
The image height is recommended to be less than 3000px.
B. Image width
1. Product photos
Supported file types: JPG/PNG/GIF
- "Product Photos (Main)": 750px
- "Additional Product Photos": 800px
- "Category Banners" within "Product Category": 2000px–3000px
2. Pages image category
Supported file types: JPG/PNG/GIF
- General images on "Advanced Page": 1200px–2000px
- Full-width banner image in "Advanced Page": 2000px–3000px
- Images embedded in "Text Page" and "Product Description": 1000px–2000px
- For advanced pages created with the new page builder, please refer to:
- Recommended image proportions for the desktop version
- Rectangular (2:1 ratio) - Recommended single image dimension: 2000 x 1000px.
- Rectangular (3:4 ratio) - Recommended single image dimension: 1500 x 2000px
- Square (1:1 ratio) - Recommended single image dimension: 2000 x 2000px.
- Recommended image proportions for the mobile version
- Rectangular (2:1 ratio) - Recommended single image dimension: 1080 x 540px.
- Rectangular (3:4 ratio) - Recommended single image dimension: 810 x 1080px
- Square (1:1 ratio) - Recommended single image dimension: 1080 x 1080px.
- Recommended image proportions for the desktop version
*For the recommended image proportions of certain theme templates, please refer to the Storefront Template.
*Note: Some browsers do not support the selection of GIF/PNG. In such cases, drag and drop a selected image into the window shown below:
2. What to do if an image fails to upload
Common issues:
1. File is too large: Make sure the file size is less than 10 MB (megabytes).
2. GIF file has too many frames: GIF files that exceed a certain number of frames for a given size may fail to upload. The suggested number of frames are as follows:
- 1920x1000: Up to 20 frames
- 800x400: Up to 120 frames
To check how many frames your GIF has, use the GIF Production/Check Tool at https://ezgif.com.
3. What to do if an uploaded image is blurry or in low quality
A. Change the image color space
Before re-uploading, make sure the image's color space is set to RGB and not CMYK.
B. Check the color profile and display optimization
Differences between device display settings and image settings can cause color distortion. This can be solved by checking if a document has been assigned the correct ICC-compliant color profile. Below are steps on how to do this using Photoshop or free-to-access third-party software from Fotor.
Photoshop
i. Click Edit > Convert to Profile. Under the "Profile" dropdown menu, select sRGB.
ii. Click File > Save as > Save for Web.
Check the boxes for "Optimized" and "Embed Color Profile".
Set the "Quality" to 100 before saving.
Fotor
Log in or register for a Fotor account. Click Import and select your image or images. Make the desired adjustments under the "Edit" menu. Then click Save.
Choose the desired file type. Select "High" for Quantity, then click Download.
C. Ensure your image meets the minimum width requirements
Please see Recommended image dimensions
D. Use the source file for illustrations and images with large amounts of text
When using images created in programs such as Abode Photoshop or Adobe Illustrator (i.e. PSD/AI files), please convert the image in PNG format for best results.
Comments