Cài đặt nâng cao và Giới hạn kích thước khi hiển thị của Artwork

Trên storefront, artwork sẽ không được hiển thị theo size gốc mà bạn upload, mà sẽ được render lại theo một size được tối giản.

Tại sao lại như vậy?

Chúng tôi quyết định định hướng teeinblue thành công cụ thiết kế tập trung cho các thiết bị di động. Lý do bởi:

Theo như thống kê của chúng tôi, có đến hơn 95% số khách hàng sử dụng điện thoại di động khi truy cập vào website.
Màn hình điện thoại khá nhỏ, không yêu cầu các ảnh lớn.
Size gốc của mỗi layer mà bạn upload vào app có thể gây ra hiện tượng load chậm trên storefront.

Khách hàng dùng điện thoại sẽ thích những website có tốc độ nhanh, và hình ảnh được tối giản lại size vẫn sẽ hiển thị tốt trên các thiết bị mobile.

Do vậy, teeinblue sẽ render lại các artwork theo size tối giản để tối ưu hóa tốc độ trên các thiết bị mobile.

Liệu order có bị ảnh hưởng không?

Không - chất lượng hình ảnh trong orders của bạn sẽ không hề bị ảnh hưởng.

✔ Tính năng này chỉ thay đổi cách các Artwork được hiển thị trong Editor và ngoài Storefront.

Size của các layer khi preview sẽ được thay đổi như nào?

Trước hết, bạn hãy vào mục Advanced Settings để tùy chỉnh lựa chọn Limit max-width.



Sau đó, ảnh preview của layer mà bạn sử dụng sẽ được dựa vào lựa chọn số Limit max-width ở trên và kích thước của Artwork (trong Artwork editor)

Sau đây là công thức tính:

Width hoặc Height (cái gì lớn hơn) của ảnh preview sẽ được resize bằng công thức:
= Width gốc của ảnh x Limit max-width size / Artwork size's width hoặc height (cái gì lớn hơn)
(Mốc resize lớn nhất = con số bạn chọn ở Limit max-width. Mốc resize nhỏ nhất = 250px)

Ví dụ:
Trong Artwork bạn có những ảnh sau:



Một ảnh full-size Background với kích thước gốc = 1000 x 2000
Một ảnh Dog với kích thước gốc = 800 x 800
Một ảnh Bone (cục xương) với kích thước gốc = 500 x 200
Limit max-width = 800
Artwork size = 1000 x 2000

Các ảnh trên sẽ được thay đổi kích thước như sau:

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)

Dựa trên công thức này, nếu bạn muốn tăng kích thước của ảnh resized, bạn có thể tăng Limit max-width option và tăng chiều rộng (width) của ảnh gốc.

Thay đổi Limit max-width chỉ áp dụng cho các ảnh up lên sau đó. Bạn sẽ cần up lại các ảnh cũ nếu muốn áp dụng size mới.

Cập nhật vào: 19/08/2024