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, từ đó tăng tỷ lệ chuyển đổi một cách gián tiếp. 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 mô-đun 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 nghị bạn tập trung vào việc hiển thị hình ảnh sản phẩm trên các 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.

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. Ghi chú: Nếu bạn chọn tỷ lệ khung hình gốc, tất cả hình ảnh sẽ được hiển thị ở kích thước gốc của chúng. Nên 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 sự đồng nhất trong danh sách và nâng cao trải nghiệm tổng thể của khách hàng.

 

---

 

Bìa bộ sưu tập

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

 

---

 

Biểu ngữ bộ sưu tập

Bạn có thể tải lên hình ảnh biểu ngữ bộ sưu tập tại SHOPLINE Admin > 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 vẫn cố định, dẫn đến việc cắt xén hình ảnh.

 

---

 

Trình chiếu

SHOPLINE hỗ trợ các 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ợ việc 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. Ghi chú: Khi tải lên hình ảnh cho phiên bản PC, việc cắt xén 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 các cạnh. 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ẽ chồng lên hình ảnh, vì vậy hãy dành không gian 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 xén. Bạn có thể ngăn chặn việc cắt xén các yếu tố chính bằng cách chọn khu vực hiển thị hình ảnh hoặc đặt chiều cao hình ảnh là "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 khuyến nghị 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 hình ảnh bị cắt?

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

2. Tại sao hình ảnh vẫn bị cắt ngay cả khi chúng được thiết lập để tự động phù hợp với hình ảnh?

• Có thể hiệu ứng cuộn parallax đã được kích hoạt. Hình ảnh tự động được phóng to đến kích thước lớn hơn khu vực hiển thị để đảm bảo hiệu ứng parallax, vì vậy việc cắt xảy ra.

3. Tại sao hình ảnh không được 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 với hình ảnh" không. Nếu có, hãy kiểm tra xem hiệu ứng parallax có được kích hoạt không. Vô hiệu hóa nó để ngăn chặn việc cắt.