Tối ưu kích thước hình ảnh cho sản phẩm

Hình ảnh là một thành phần quan trọng trong thiết kế cửa hàng trực tuyến. Bằng cách kết hợp hình ảnh chất lượng cao và sử dụng các kỹ thuật hiển thị hợp lý, bạn có thể nâng cao thiết kế tổng thể của cửa hàng, gián tiếp tăng tỷ lệ chuyển đổi. Bài viết này cung cấp các khuyến nghị về kích thước hình ảnh lý tưởng để sử dụng trong các module khác nhau, cùng với câu trả lời cho các câu hỏi thường gặp mà bạn có thể gặp phải.

Hình Ảnh Sản Phẩm

1. SHOPLINE khuyên bạn nên tập trung vào việc hiển thị hình ảnh sản phẩm trên thiết bị di động vì bố cục sản phẩm có thể được điều chỉnh trên máy tính để bàn.

2. SHOPLINE cung cấp bốn tùy chọn tỷ lệ khung hình: vuông (1:1), dọc (2:3), ngang (4:3) và tỷ lệ khung hình gốc. Bạn có thể chọn tỷ lệ phù hợp với sản phẩm của mình.

3. Lưu ý: Nếu bạn chọn tỷ lệ khung hình gốc, tất cả hình ảnh sẽ được hiển thị theo kích thước gốc của chúng. Khuyến nghị duy trì tỷ lệ khung hình đồng nhất cho tất cả hình ảnh sản phẩm để đảm bảo vẻ ngoài đồng nhất trong danh sách và nâng cao trải nghiệm khách hàng tổng thể.

Ảnh Bìa Bộ Sưu Tập

Bạn có thể tải lên ảnh bìa bộ sưu tập tại Quản trị SHOPLINE > Sản phẩm > Bộ sưu tập

Ảnh Biểu Ngữ Bộ Sưu Tập

Bạn có thể tải lên ảnh biểu ngữ bộ sưu tập tại Quản trị SHOPLINE > Sản phẩm > Bộ sưu tập. Khi chiều rộng màn hình thay đổi, chiều rộng ảnh sẽ được điều chỉnh trong khi chiều cao ảnh giữ cố định, dẫn đến việc cắt ảnh.

Trình Chiếu

SHOPLINE hỗ trợ cài đặt hình ảnh riêng biệt cho phiên bản PC và di động, cho phép bạn tải lên tài liệu dựa trên hiệu ứng hiển thị.

Trình chiếu chia tách

Plugin trình chiếu chia tách hỗ trợ thay đổi kích thước hình ảnh và văn bản theo cửa sổ trình duyệt trong các mẫu như Expect, Soo, Metal, Flexible, Control và các mẫu khác. Lưu ý: Khi tải lên hình ảnh cho phiên bản PC, việc cắt ảnh có thể xảy ra trên các máy tính khác nhau, vì vậy hãy cẩn thận giữ các yếu tố chính tránh xa mép. Khi tải lên hình ảnh cho phiên bản di động, văn bản của trình chiếu sẽ phủ lên hình ảnh, vì vậy hãy dành chỗ bên dưới trình chiếu để tránh che khuất các yếu tố chính.

Hình ảnh đơn

Một hình ảnh đơn mặc định có chiều cao cố định và có thể bị cắt. Bạn có thể ngăn các yếu tố trọng tâm bị cắt bằng cách chọn khu vực hiển thị hình ảnh hoặc đặt chiều cao hình ảnh thành "Tự động điều chỉnh hình ảnh".

Cột văn bản kèm hình ảnh

Hình ảnh Quảng bá Trang

Kích thước được đề xuất cho các Thành phần Khác

Kích thước Hình ảnh Biểu ngữ Thanh toán

Câu hỏi thường gặp

1. Tại sao ảnh bị cắt?

• Module chiều cao cố định cho ảnh đơn: Để thích ứng với nhiều độ rộng màn hình và thiết bị di động, chiều cao module được cố định mặc định để đảm bảo nội dung dễ đọc, điều này có thể khiến ảnh không hiển thị theo tỷ lệ gốc.
• Module trình chiếu: Nếu chiều cao được cố định, chiều cao ảnh sẽ không thay đổi theo các độ rộng màn hình khác nhau. Tỷ lệ khung hình bị thay đổi và ảnh bị cắt.
• Module với tỷ lệ khung hình cố định: Nếu module sử dụng tỷ lệ khung hình cố định, việc cắt tự động sẽ xảy ra. Nếu không đặt vùng hiển thị ảnh, ảnh sẽ được cắt ở giữa theo mặc định.
• Xử lý ảnh đáp ứng: Xử lý ảnh đáp ứng được sử dụng trong nhiều module giao diện (như trình chiếu, ảnh đơn, v.v.). Ảnh đáp ứng là kỹ thuật chuẩn trong ngành để phóng to và cắt ảnh rộng nhằm cho phép ảnh hiển thị giống nhau trên PC và thiết bị di động. Ảnh của bạn sẽ được phóng to cho đến khi phủ kín vùng hiển thị, cho phép thay đổi kích thước mà không bị kéo dãn hay méo ảnh.

2. Tại sao ảnh vẫn bị cắt dù đã đặt chế độ tự động phù hợp ảnh?

• Có thể hiệu ứng cuộn parallax đang được bật. Ảnh sẽ tự động phóng to lớn hơn vùng hiển thị để đảm bảo hiệu ứng parallax, do đó ảnh bị cắt.

3. Tại sao ảnh không hiển thị đầy đủ dù tôi đã dùng kích thước được khuyến nghị?

• Kiểm tra xem cài đặt chiều cao có phải là "Tự động phù hợp ảnh" không. Nếu đúng, kiểm tra xem hiệu ứng parallax có đang bật không. Tắt nó để tránh bị cắt ảnh.