Artwork Advanced Settings & Limit Preview size
On storefront, images in artwork will not be previewed in the original size, but will be resized to a limited size.
According to our analytics, there are more than 95% of customers coming from Mobile devices
The mobiles' screen is usually small that it doesn't need big images.
The original size of an image (uploaded by the sellers) caused a heavy load on the storefront.
Mobile users usually require a fast-loading web, and small images can display well on mobile devices.
Therefore, teeinblue will render all image layers in an artwork in a limited size on storefront to improve speed on mobile, and also to avoid others downloading the original designs.
No - It will NOT affect the customer's order.
It only applies to the preview on artwork editor and on storefront. The order design will use the original size of the images.
First, you need to set a Limit max-width option in Advanced Settings
Then, the preview size of images will be calculated based on the Limit max-width option, the original size and the Artwork size (in Artwork editor).
Here is the formula:
Image's width will be resized to:
= Image's original width x Limit max-width / Artwork size's width or height (whichever bigger)
Maximum resized size = limit max-width option. Minimum resized size = 300px
Example:
In Artwork, you have these images:
A full-size background with original size = 1000 x 2000
A dog image with original size = 800 x 800
A bone image with original size = 500 x 200
Limit max-width = 800
Artwork size = 1000 x 2000
Then the images will be resized:
Based on this formula, if you want to increase the image's resized size, you can increase the Limit max-width option and the image's original width.
Change of Limit max-width size only affects layers uploaded afterward. You'll need to re-upload old layers to apply new size.
Why would that happen?
According to our analytics, there are more than 95% of customers coming from Mobile devices
The mobiles' screen is usually small that it doesn't need big images.
The original size of an image (uploaded by the sellers) caused a heavy load on the storefront.
Mobile users usually require a fast-loading web, and small images can display well on mobile devices.
Therefore, teeinblue will render all image layers in an artwork in a limited size on storefront to improve speed on mobile, and also to avoid others downloading the original designs.
Does that affect the customer's order?
No - It will NOT affect the customer's order.
It only applies to the preview on artwork editor and on storefront. The order design will use the original size of the images.
How image's size on preview will be resized?
First, you need to set a Limit max-width option in Advanced Settings
Then, the preview size of images will be calculated based on the Limit max-width option, the original size and the Artwork size (in Artwork editor).
Here is the formula:
Image's width will be resized to:
= Image's original width x Limit max-width / Artwork size's width or height (whichever bigger)
Maximum resized size = limit max-width option. Minimum resized size = 300px
Example:
In Artwork, you have these images:
A full-size background with original size = 1000 x 2000
A dog image with original size = 800 x 800
A bone image with original size = 500 x 200
Limit max-width = 800
Artwork size = 1000 x 2000
Then the images will be resized:
| Image | Resized Width | Resized Height |
|---|---|---|
| Background | 1000 (original width) x 800 (limit) / 2000 (artwork size) = 400px | 800px (calculated from resized width) |
| Dog | 800 x 800 / 2000 = 320px | 320px (calculated from resized width) |
| Bone | 500 x 800 / 2000 = 200px → 300px (min resized = 300px) | 120px (calculated from resized width) |
Based on this formula, if you want to increase the image's resized size, you can increase the Limit max-width option and the image's original width.
Change of Limit max-width size only affects layers uploaded afterward. You'll need to re-upload old layers to apply new size.
Updated on: 13/02/2023
Thank you!