Kích thước ảnh Shopify tối ưu dưới 500 KB

Sử dụng kích thước 2048 x 2048 pixel làm ảnh gốc trên Shopify và giữ cho mỗi tệp được phân phối dưới 500 KB. Shopify cho phép hình ảnh lên tới 20 MB và 4472 pixel vuông, nhưng những con số đó mô tả những gì nền tảng có thể chấp nhận hơn là những gì một cửa hàng tốc độ cao thực sự cần.

Con số 20 MB là con số mà hầu hết các hướng dẫn đều trích dẫn, và đó là một sai lầm khi thiết kế xoay quanh nó. Những gì Shopify cho phép và những gì Shopify ưu tiên là hai điều khác nhau. Một trang sản phẩm chứa 8 hình ảnh, mỗi hình 3 MB, sẽ là một trang nặng 24 MB, và khách mua hàng trên di động sẽ rời đi trước khi trang tải xong.

Kích thước hình ảnh Shopify theo vị trí hiển thị

Hình ảnh sản phẩm nên là hình vuông ở mức 2048 pixel, trong khi banner, ảnh danh mục và logo đều cần kích thước riêng. Việc sử dụng một kích thước cho mọi nơi sẽ tạo ra các banner bị kéo giãn và ảnh danh mục bị cắt xén không đẹp mắt.

Các giao diện cắt hình ảnh theo những cách khác nhau, và một banner trông chuẩn trên bản xem trước máy tính thường bị cắt ngang ở giữa khi xem trên điện thoại. Hãy giữ phần quan trọng của banner nằm trong khoảng 60 phần trăm ở chính giữa để không giao diện nào có thể cắt mất.

Tại sao 500 KB là con số thực sự quan trọng

Dung lượng trang quyết định tốc độ tải của cửa hàng, và hình ảnh chiếm phần lớn dung lượng đó trên một trang sản phẩm điển hình. Một trang có tổng dung lượng dưới 2 MB sẽ tải mượt mà trên mạng di động, trong khi trang 24 MB thì không.

Khách mua hàng trên điện thoại chiếm phần lớn lưu lượng truy cập của hầu hết các cửa hàng, và kết nối di động biến động nhiều hơn so với mạng băng thông rộng văn phòng. Mỗi giây tải trang đều ảnh hưởng đến tỷ lệ chuyển đổi, điều này biến dung lượng hình ảnh thành một vấn đề về doanh thu chứ không chỉ là kỹ thuật. Giảm 8 hình ảnh sản phẩm từ 3 MB xuống 300 KB sẽ loại bỏ 21 MB khỏi trang mà không làm thay đổi bất kỳ chi tiết nào mà người mua có thể nhìn thấy.

Shopify có tự động nén hình ảnh cho bạn không

Shopify phân phối các phiên bản đã thay đổi kích thước thông qua mạng phân phối nội dung (CDN) của mình và tự động chuyển đổi sang WebP cho các trình duyệt hỗ trợ. Nền tảng này thực hiện khá tốt việc đó, và nó hoạt động dựa trên bất kỳ tệp nào bạn tải lên.

Điểm cuối cùng đó chính là giới hạn. Shopify tạo ra các phiên bản nhỏ hơn từ tệp gốc của bạn, vì vậy một tệp tải lên 5 MB được nén kém sẽ tạo ra các phiên bản lớn hơn so với một tệp tải lên 400 KB được chuẩn bị kỹ lưỡng. Nén trước khi tải lên cũng giúp giảm dung lượng lưu trữ của bạn và giúp việc nhập hàng loạt nhanh hơn nhiều, vì việc nhập 500 sản phẩm chỉ cần truyền tải 200 MB thay vì 2.5 GB.

Cách chuẩn bị hình ảnh cho Shopify

Để tạo ra một trang sản phẩm tải nhanh, hãy làm theo 6 bước sau.

1. Xuất một ảnh gốc hình vuông ở kích thước 2048 x 2048 pixel từ trình chỉnh sửa ảnh của bạn.
2. Thay đổi kích thước của bất kỳ banner hoặc ảnh phong cách sống nào về chiều rộng hiển thị thực tế của nó, nhân đôi cho màn hình có mật độ điểm ảnh cao.
3. Chuyển đổi ảnh chụp sang WebP, hoặc giữ nguyên JPG nếu quy trình làm việc của bạn phụ thuộc vào nó, vì Shopify đều sẽ chuyển đổi được.
4. Nén về kích thước mục tiêu, sử dụng mức 300 KB cho ảnh sản phẩm và 400 KB cho banner.
5. Đặt tên tệp theo mã sản phẩm và góc chụp để khi nhập hàng loạt bằng CSV, hình ảnh sẽ được liên kết đúng với sản phẩm.
6. Tải lên và kiểm tra trang sản phẩm trên điện thoại thay vì chỉ xem trên bản xem trước máy tính.

WebP trên Shopify

Shopify đã hỗ trợ WebP gốc trong nhiều năm và tự động chuyển đổi các tệp JPG và PNG được tải lên cho các trình duyệt hỗ trợ định dạng này. Việc tải trực tiếp WebP được chấp nhận và giúp bạn kiểm soát quá trình nén thay vì để nền tảng tự xử lý.

WebP đạt được chất lượng hình ảnh tương đương JPG nhưng dung lượng tệp nhỏ hơn từ 25 đến 35 phần trăm, một con số rất đáng giá trên một trang chứa 8 bức ảnh. Trường hợp duy nhất cần tránh là tải lên WebP khi tệp đó sau này sẽ được nhà cung cấp tải xuống hoặc gửi đến xưởng in, vì những nơi đó vẫn yêu cầu định dạng JPG.

Khắc phục trang sản phẩm tải chậm

Bắt đầu với hình ảnh lớn nhất trên trang, bởi vì một tệp đơn lẻ lớn nhất thường là nguyên nhân gây ra phần lớn sự chậm trễ. Trên một cửa hàng Shopify, đó thường là banner trang chủ hoặc ảnh sản phẩm đầu tiên.

• Thay đổi kích thước trước khi nén. Một banner 4000 pixel nằm trong một khung hiển thị 1920 pixel sẽ lãng phí 75 phần trăm dữ liệu của nó.
• Giảm số lượng hình ảnh xuất hiện đầu trang (above the fold). Một bộ sưu tập 12 hình ảnh tải cùng một lúc sẽ làm chậm mọi thứ khác.
• Kiểm tra xem tính năng tải chậm (lazy loading) đã được bật chưa cho các hình ảnh phía dưới trang, điều mà hầu hết các giao diện hiện đại đều tự động xử lý.
• Thay thế các tệp GIF động bằng video, vì một đoạn GIF ngắn thường nặng hơn toàn bộ phần còn lại của trang.
• Kiểm tra các ứng dụng (apps). Các tiện ích đánh giá, cửa sổ bật lên (popups) và huy hiệu tin cậy thường tải hình ảnh và tập lệnh riêng của chúng.

Văn bản thay thế (Alt text) và tên tệp hình ảnh

Viết văn bản thay thế mô tả sản phẩm cho những khách hàng sử dụng trình đọc màn hình, và đặt tên tệp theo tên sản phẩm thay vì tên do máy ảnh tự tạo. Một tệp có tên IMG_4821.jpg không mang lại thông tin gì cho công cụ tìm kiếm và người mua.

Sử dụng cấu trúc như navy-linen-shirt-front.jpg, giúp dễ đọc khi nhập hàng loạt, sắp xếp dễ dàng trong thư mục và mô tả hình ảnh trong kết quả tìm kiếm. Văn bản thay thế nên mô tả những gì bức ảnh thể hiện, bao gồm màu sắc, chất liệu và góc chụp, mà không cần lặp lại từng từ của tiêu đề sản phẩm. Cả hai trường này chỉ mất vài giây cho mỗi sản phẩm nhưng giúp cải thiện đáng kể khả năng xuất hiện của cửa hàng trong tìm kiếm hình ảnh.

Kiểm tra các thay đổi trước khi áp dụng hàng loạt

Hãy xử lý trước 5 sản phẩm, xuất bản chúng và kiểm tra các trang này trên một chiếc điện thoại thực tế trước khi chạy cho toàn bộ danh mục. Một lỗi thiết lập áp dụng cho 500 sản phẩm sẽ tốn nhiều thời gian để hoàn tác hơn là phòng ngừa.

Kiểm tra 3 điều trên các sản phẩm thử nghiệm. Xác nhận hình ảnh trông sắc nét khi thu phóng tối đa, vì người mua thường sử dụng tính năng thu phóng rất nhiều đối với quần áo và trang sức. Xác nhận lưới danh mục hiển thị các vết cắt đồng đều. Xác nhận trang tải nhanh trên mạng di động thay vì mạng văn phòng. Chỉ khi đó mới áp dụng các cài đặt tương tự cho mọi thứ khác.

Ứng dụng hình ảnh so với việc tự xử lý trước khi tải lên

Các ứng dụng nén ảnh tính phí hàng tháng để giải quyết một vấn đề mà bạn có thể tự giải quyết một lần trước khi tải lên. Các ứng dụng này chỉ hữu ích khi cửa hàng liên tục nhận được hình ảnh mới từ nhiều người và không ai kiểm soát những gì được tải lên.

Một cửa hàng có danh mục sản phẩm ổn định và một người quản lý hình ảnh thì không cần phải trả phí định kỳ. Nén thư viện ảnh một lần và nén các bức ảnh mới khi chúng được gửi đến cũng mang lại kết quả tương tự. Hãy cân nhắc lại khi danh mục sản phẩm phát triển vượt quá khả năng xử lý thủ công của bạn, hoặc khi có nhiều nhân viên tải ảnh lên mà không tuân theo một quy chuẩn nào.

Các lỗi hình ảnh Shopify thường gặp

Tải ảnh trực tiếp từ máy ảnh lên là sai lầm tốn kém nhất, vì một bức ảnh 24 megapixel chứa lượng dữ liệu gấp 10 lần lượng dữ liệu mà một cửa hàng có thể hiển thị. Nền tảng vẫn chấp nhận tệp đó, và trang web của bạn sẽ phải gánh chịu hậu quả về tốc độ.

Hai lỗi khác cũng thường xuyên xuất hiện. Việc trộn lẫn các tỷ lệ hình ảnh khác nhau trong một bộ sưu tập sẽ tạo ra một lưới sản phẩm nhấp nhô không đều, vì các giao diện thường cắt ảnh thành hình vuông và một bức ảnh chân dung (dọc) sẽ bị mất phần trên và phần dưới. Sử dụng định dạng PNG cho ảnh sản phẩm làm tăng dung lượng tệp lên gấp 3 đến 5 lần mà không mang lại lợi ích rõ rệt nào về mặt hiển thị, vì PNG lưu trữ chính xác từng pixel và một bức ảnh chụp thì không có các mảng màu phẳng để tận dụng thế mạnh này.

Duy trì một danh mục sản phẩm nhất quán

Xử lý toàn bộ danh mục sản phẩm trong một lượt để mọi bức ảnh sản phẩm đều có chung kích thước, độ nén và bố cục khung hình. Khách mua hàng khi so sánh các sản phẩm sẽ nhận ra sự không nhất quán ngay cả khi họ không thể gọi tên chính xác lỗi đó.

Sự nhất quán cũng giúp ích cho lưới danh mục sản phẩm, nơi các hình ảnh có cùng hình dạng và độ sáng sẽ tạo cảm giác như một trang được thiết kế chuyên nghiệp chứ không phải là một trang được lắp ghép tạm bợ. Hãy thiết lập kích thước và dung lượng mục tiêu một lần, sau đó áp dụng chúng cho mọi tệp thay vì điều chỉnh riêng lẻ từng sản phẩm.

Xử lý danh mục sản phẩm trong một lượt

Thả tối đa 500 hình ảnh cùng một lúc, hoặc kéo một tệp lưu trữ ZIP trực tiếp từ nhiếp ảnh gia của bạn, và mọi tệp sẽ được trả về với kích thước và độ nén theo đúng yêu cầu của bạn. Một danh mục sản phẩm vốn mất cả buổi chiều để xử lý bằng phần mềm máy tính nay sẽ hoàn thành chỉ trong vài phút.

Mọi thứ đều chạy bên trong trình duyệt trên chính bộ vi xử lý của bạn, vì vậy các sản phẩm chưa công bố, ảnh chiến dịch theo mùa và ảnh chụp từ nhà cung cấp không bao giờ bị tải lên máy chủ bên ngoài. Đối với một cửa hàng đang chuẩn bị ra mắt sản phẩm mới dưới chế độ bảo mật, việc giữ các tệp này ở cục bộ là ranh giới giữa một thông báo có kiểm soát và việc bị rò rỉ thông tin, và việc này hoàn toàn không tốn thêm chi phí.