Kích thước ảnh sản phẩm Shopify: chuẩn nào hiển thị đẹp

Ảnh sản phẩm trên Shopify thường hỏng theo một trong hai hướng. Hoặc là quá nhỏ, nên khung phóng to (zoom) nhòe nhoẹt ngay khi khách soi đường chỉ may hay chấu giữ viên đá. Hoặc là quá to, lấy thẳng từ máy ảnh ra, nên trang bò ì ạch trên điện thoại — nơi phần lớn lưu lượng của bạn đổ về. Trang quản trị nhận cả hai mà không hé một lời cảnh báo.

Shopify làm giúp bạn nhiều hơn hầu hết chủ shop tưởng: nó tự tạo sẵn nhiều kích thước cho mỗi ảnh để dùng ở từng vị trí trong cửa hàng, và CDN của nó chọn một định dạng hiện đại như WebP hay AVIF ở những trình duyệt có hỗ trợ. Thứ nó sẽ không làm là sửa một tỷ lệ khung hình lộn xộn, đoán xem ảnh nào thuộc về biến thể nào, hay cứu một ảnh tách nền cắt nham nhở. Phần dưới đây là phần bạn kiểm soát được.

Bắt đầu ở 2048 x 2048 và dừng lại ở đó

Hướng dẫn của chính Shopify: ảnh sản phẩm vuông thường hiển thị đẹp nhất ở 2048 x 2048 px. Giới hạn cứng thì nằm cao hơn nhiều — một ảnh sản phẩm hay ảnh danh mục phải dưới 20 MB, và có thể lên tới 5000 x 5000 px, tức 25 megapixel.

Những cái trần đó không phải là đích nhắm. Trong theme Dawn, thư viện ảnh hiển thị ngay trên trang sản phẩm không bao giờ hỏi CDN thứ gì rộng hơn 1946 px, và ngay cả lightbox phóng to cũng dừng ở 4096 px khi gọi tên kích thước. Một bản gốc 5000 px chủ yếu mua về cho bạn thời gian tải lên lâu hơn và những thao tác chỉnh sửa ì ạch hơn ở khoảng giữa. Hãy giữ ảnh vuông 2048 px cho thư viện ảnh chính. Định dạng tải lên được hỗ trợ gồm PNG, JPEG và WebP, nên hãy đưa cho Shopify một file đã nén thay vì một file TIFF 6 MB.

Vuông hay đứng: chọn một tỷ lệ rồi giữ đúng nó

Lưới danh mục là nơi những tỷ lệ khung hình lệch nhau lộ ra rõ nhất, và đó là lý do Shopify khuyên dùng một tỷ lệ thống nhất cho toàn bộ ảnh đại diện. Các theme như Dawn cho phép bạn để khung tự co theo từng ảnh hoặc khóa tất cả vào một tỷ lệ cố định, và cả hai đều trừng phạt sự thiếu nhất quán: để tự co thì lưới lởm chởm, còn khóa cứng thì cắt ngang cổ chai hoặc chừa một khoảng trống chết quanh chiếc nhẫn.

Vậy hãy quyết một lần cho xong. Vuông (1:1) là mặc định an toàn nhất và co giãn gọn trên màn hình hẹp. Các tỷ lệ đứng như 4:5 hay 2:3 hợp với quần áo và những chai lọ cao, lấp được nhiều không gian dọc hơn trên điện thoại. Thứ bạn không thể làm là chạy cả hai kiểu trong cùng một danh mục.

Cách ép cho đúng là tự tách sản phẩm ra rồi dựng lại khung hình. Tải một bức ảnh lên remover.bg, xóa phông nền, rồi thay vào đúng màu trắng trơn hoặc màu thương hiệu mà mọi tin đăng khác đang dùng. Sau đó đổi kích thước kết quả về đúng khung bạn đã chọn bằng công cụ xuất ảnh sẵn có, để một chiếc cốc cầm vừa tay và một chiếc áo khoác dài chấm gót cùng đáp xuống một kích thước như nhau. Chính ảnh tách nền đó cũng dùng được cho những quy tắc khắt khe hơn của sàn trong yêu cầu ảnh sản phẩm Amazon, hoặc bạn có thể giữ nguyên độ trong suốt để ghép lớp về sau — xem khi nào PNG trong suốt là bản xuất phù hợp.

CDN của Shopify đổi kích thước được, nhưng không cứu nổi file gốc

Theme gọi ảnh qua các filter image_url và image_tag của Liquid; chúng dựng ra một srcset để CDN phục vụ đúng kích thước, đúng định dạng cho từng thiết bị. Đó là lý do một theme dựng tử tế không bao giờ đẩy file 2048 px của bạn xuống một chiếc điện thoại rộng 390 px.

Có hai thứ nó không lo giúp. Chọn định dạng lúc tải lên vẫn quan trọng: xuất WebP giữ file nhẹ ngay từ trước khi chạm tới CDN, và Shopify nhận WebP mà không cần chuyển đổi, đúng kiểu remover.bg xử lý WebP trọn vẹn từ đầu đến cuối. Còn với hàng trăm SKU thì không có lối tắt kéo-thả cả thư mục; việc đó thuộc về một script gọi API xóa phông nền, chạy song song với đợt import CSV của bạn.

Phóng to chỉ có ích khi ảnh đủ pixel

Shopify nói ảnh cần lớn hơn 800 x 800 px thì phóng to (zoom) mới chạy đúng. Trong Dawn, thiết lập zoom của template sản phẩm cho bạn chọn nhấp và di chuột, mở lightbox, hoặc tắt hẳn.

Hãy bật zoom khi chất liệu chính là điểm bán: đồ len, vân da, hình khắc, mặt cắt đá quý, gỗ. Tắt nó với đồ họa phẳng và icon nhỏ, nơi zoom chỉ quảng cáo giúp mấy vệt nhiễu do nén. Zoom cũng chẳng nương tay với đường viền — viền lông, tóc bay và những sợi quai mảnh phơi ra mọi lỗi, và đó chính là chỗ một ảnh tách nền sạch sẽ chứng minh giá trị của nó.

Ảnh biến thể và thứ tự media

Mỗi biến thể chỉ gán được đúng một ảnh — ảnh thôi, không phải video hay mô hình 3D — và ảnh đó trở thành bản xem trước khi khách chọn tùy chọn tương ứng.

Vì một ảnh cho mỗi biến thể hiếm khi đủ, hãy tận dụng thư viện ảnh bao quanh nó. Thêm mọi góc chụp vào media của sản phẩm, sắp xếp sao cho các ảnh liên quan nằm cạnh nhau, và đặt ảnh mạnh nhất lên đầu: mục media đầu tiên quyết định thẻ sản phẩm và khung nhìn mặc định.

Alt text: được phép 512 ký tự, 125 là đủ

Shopify giới hạn alt text ở 512 ký tự và khuyên dùng 125 ký tự trở xuống. Đó là hướng dẫn về khả năng đọc, không phải giới hạn của trình đọc màn hình: alt text dài nghe rất mệt, vì người nghe không lướt qua được. Hãy mô tả những gì nằm trong khung hình, kể cả biến thể. "Áo sơ mi linen xanh navy, mặt trước, cài khuy" ăn đứt "áo sơ mi". Bỏ "hình ảnh của", và bỏ luôn danh sách từ khóa. Alt text có thể sửa hàng loạt bằng một lần tải lên CSV thay vì sửa từng sản phẩm một.

Danh sách kiểm tra ngắn trước khi tải lên

Trước khi một lô ảnh đi vào Shopify: xuất ảnh vuông ở 2048 px trừ khi bạn đã chọn khổ đứng, giữ dung lượng thấp hơn hẳn mức trần 20 MB, dùng chung một cách xử lý phông nền cho toàn danh mục, gán một ảnh cho mỗi biến thể và sắp thư viện ảnh xoay quanh nó, rồi giữ alt text dưới 125 ký tự. Chẳng việc nào hào nhoáng cả, nhưng tất cả đều lộ ra trên trang danh mục ngay khoảnh khắc bạn làm sai.