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: 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 nhất quán 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

 

---

 

Banner Bộ Sưu Tập

Bạn có thể tải lên hình ảnh banner 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 hình ảnh sẽ được điều chỉnh trong khi chiều cao hình ảnh giữ cố định, dẫn đến việc cắt xén hình ả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 đôi

Plugin trình chiếu chia đôi 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 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 viền. Khi tải 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 vui lòng để chỗ trống 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 lẻ 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 với hình ảnh

 

---

 

Hình ảnh quảng bá trang

 

---

 

Kích thướ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?

• Mô-đun chiều cao cố định cho ảnh đơn: Để thích ứng với các độ rộng màn hình và thiết bị di động khác nhau, chiều cao mô-đun được cố định theo 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ệ khung hình gốc.
• Mô-đun 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.
• Mô-đun với tỷ lệ khung hình cố định: Nếu mô-đun áp 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 mô-đun chủ đề (như trình chiếu, ảnh đơn, v.v.). Ảnh đáp ứng là kỹ thuật tiêu 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ị hoàn toàn, cho phép thay đổi kích thước mà không bị kéo giãn hoặc méo ảnh.

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

• Có thể hiệu ứng cuộn parallax đang được bật. Ảnh sẽ tự động được 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 đủ mặc dù tôi đã sử 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 có, kiểm tra xem hiệu ứng parallax có được bật không. Tắt nó để tránh bị cắt ảnh.