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.

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: 17/07/2024

Was this article helpful?

Thank you!