Cách tối ưu ảnh sản phẩm cho Shopify và cửa hàng online

Ảnh trong blog chỉ để minh họa cho chữ. Ảnh sản phẩm lại là lý do chính khiến người ta mua hàng. Điều đó nâng yêu cầu lên ở ba điểm:

• Chi tiết quan trọng. Khách phóng to để xem chất liệu, đường may hay nhãn mác, nên ảnh phải còn rõ khi xem ở cỡ lớn.
• Sự đồng nhất quan trọng. Một trang bộ sưu tập có hình dạng, ánh sáng và nền lộn xộn sẽ trông thiếu đáng tin.
• Tốc độ quan trọng. Trang bộ sưu tập tải hàng chục ảnh cùng lúc, nên chỉ cần mỗi ảnh nặng thêm vài trăm KB là tổng cộng tăng rất nhanh, nhất là trên điện thoại.

Mục tiêu là giữ đủ chi tiết để khách yên tâm mua, mà mỗi người chỉ phải tải đúng số pixel họ cần.

Các nền tảng cửa hàng có sẵn như Shopify lưu ảnh bạn tải lên, tạo nhiều phiên bản đã đổi kích thước và phân phối chúng qua mạng phân phối nội dung (CDN), thường đổi sang các định dạng hiện đại như WebP cho trình duyệt hỗ trợ. Việc đó tiện, nhưng nó cũng thay đổi cách bạn nên chuẩn bị file.

• Mặt lợi: bạn có thể tải lên một ảnh JPG hoặc PNG tốt rồi tin tưởng nền tảng đổi kích thước và phân phối hiệu quả.
• Mặt hại: vì nền tảng xử lý lại file của bạn, những gì bạn làm trước đó chỉ là bước đầu, và mỗi lần lưu thêm có bỏ bớt dữ liệu đều tốn thêm chất lượng.

Hãy xem các trang trợ giúp hiện hành của nền tảng để biết kích thước khuyên dùng và giới hạn file, vì những thông tin này thay đổi theo thời gian.

Đây là câu hỏi mà nhiều chủ cửa hàng làm sai nhất. Dưới đây là hai cách đặt cạnh nhau.

Với cửa hàng trên nền tảng có sẵn, hãy đổi kích thước về cỡ mục tiêu và lưu ở chất lượng cao, khoảng 85, rồi tải lên. Đổi kích thước & nén ảnh làm cả hai trong một bước nên ảnh chỉ được lưu một lần. Với cửa hàng tự dựng không có xử lý ảnh tự động, hãy nén mạnh tay hơn bằng Nén ảnh và giữ ảnh chính ở mức nhẹ vừa phải.

• JPG: lựa chọn mặc định tốt cho ảnh chụp trên nền trơn. Nhẹ và dùng được ở mọi nơi. Trang trợ giúp của Shopify ghi PNG là loại file tốt nhất cho hầu hết ảnh sản phẩm, rồi đến JPEG, nhưng JPG chất lượng cao nhẹ hơn nhiều với ảnh chụp.
• PNG: hữu ích cho ảnh sản phẩm đã tách nền trong suốt, nhưng lớn với ảnh chụp.
• WebP: nhẹ hơn cả hai, và hỗ trợ nền trong suốt. Nhiều nền tảng tự đổi sang WebP cho bạn, nên có thể bạn không cần tự tải lên dạng này.

Nếu chưa chắc, hãy xem bài so sánh các định dạng. Nhớ rằng JPG biến vùng trong suốt thành màu trắng, nên hãy kiểm tra ảnh đã tách nền trông thế nào trên nền cửa hàng của bạn.

• Nén quá tay trước khi tải lên, rồi để nền tảng nén thêm lần nữa.
• Trộn lẫn nhiều hình dạng và nhiều kiểu nền, làm lưới sản phẩm nhìn lộn xộn.
• Tải lên các file khổng lồ như ảnh gốc 6000 pixel, làm thao tác quản trị chậm mà chẳng đẹp hơn chút nào.
• Bỏ qua văn bản alt, gây thiệt cho khả năng truy cập và cơ hội lên hạng trong tìm kiếm hình ảnh. Hướng dẫn SEO hình ảnh chỉ cách viết.
• Không bao giờ thử trên điện thoại, nơi phần lớn khách mua hàng.

Hãy thử trang bộ sưu tập chính và vài trang sản phẩm bằng PageSpeed Insights rồi so sánh kết quả trước và sau. Xem ảnh lớn nhất trên mỗi trang và tổng dung lượng ảnh. Nếu trang vẫn nặng, hãy giảm số pixel của ảnh tải lên trước, vì thu nhỏ kích thước giúp được nhiều hơn là hạ chất lượng. Danh sách kiểm tra tối ưu ảnh cho website còn nêu thêm các bước như tải trễ ảnh và bộ nhớ đệm.