Tối Ưu Hóa Kích Thước Hình Ảnh Cho Sản Phẩm
Hình ảnh là một phần quan trọng của 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ể tăng cường thiết kế tổng thể của cửa hàng, giúp 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 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 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 cá nhâ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 ban đầu. Bạn có thể chọn tùy chọn 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 ban đầu, tất cả các hình ảnh sẽ được hiển thị theo kích thước ban đầu của chúng. Đề nghị duy trì một tỷ lệ khung hình nhất quán cho tất cả hình ảnh sản phẩm để đảm bảo một diện mạo đồng nhất trong danh sách và nâng cao trải nghiệm của khách hàng.
| Tỷ Lệ Khung Hình Đề Xuất | 2:3 | |
| Kích Thước Tối Thiểu (75% chiều rộng trên thiết bị di động) | 560px chiều rộng | 840px chiều cao |
| Kích Thước Đề Xuất (hình ảnh hồ sơ) | 1700px chiều rộng | 2550px chiều cao |
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
| Tỷ Lệ Khung Hình Đề Xuất | 1:1 |
| Kích Thước Đề Xuất | ≥1600px |
Ảnh Bìa Bộ Sưu Tập
Bạn có thể tải lên hình ảnh bìa 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 được tỷ lệ trong khi chiều cao hình ảnh vẫn cố định, dẫn đến cắt hình ảnh.
| Kích Thước Đề Xuất | 1920px chiều rộng | 420px chiều cao |
Trình Chiếu Ảnh
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ị.
| Ghi chú: Nếu bạn chọn cố định chiều cao, có thể xảy ra cắt hình ảnh. Nếu cài đặt chiều cao là "Tự động điều chỉnh hình ảnh," cắt hình ảnh cũng có thể xảy ra ngay cả khi hiệu ứng parallax được kích hoạt. Nếu bạn không muốn hình ảnh của mình bị cắt, SHOPLINE khuyến nghị bạn chọn kích thước thích hợp với hình ảnh đầu tiên và tắt hiệu ứng cuộn parallax |
| Tỷ lệ khuyến nghị cho phiên bản PC | 3:1 | |
| Kích thước khuyến nghị | Chiều rộng 1920px | Chiều cao 650px |
| Tỷ lệ khuyến nghị cho phiên bản di động | 1:2 | |
| Kích thước khuyến nghị | Chiều rộng 375px | Chiều cao 500px |
Trình chiếu chia đôi
Trình chiếu chia đôi hỗ trợ việc điều chỉnh kích thước của 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 ghép có thể xảy ra trên các PC khác nhau, vì vậy hãy cẩn thận để giữ các yếu tố chính xa khỏi 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ẽ chồng lên hình ảnh, vì vậy hãy dành không gian phía dưới trình chiếu để tránh che khuất các yếu tố chính.
|
Kích thước khuyến nghị cho phiên bản PC |
Chiều cao được thiết lập là Toàn màn hình | Chiều rộng 1220px | Chiều cao 1080px |
| Chiều cao được thiết lập là một giá trị cụ thể | Chiều rộng 1152px | Chiều cao được thiết lập là giá trị thích ứng | |
|
Kích thước khuyến nghị cho phiên bản di động |
Chiều cao được thiết lập là Toàn màn hình | Chiều rộng 1125px | Chiều cao 1125px |
| Chiều cao được thiết lập là một giá trị cụ thể | Chiều rộng 750px | Chiều cao được thiết lập là giá trị thích ứng gấp đôi |
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ớt. Bạn có thể ngăn chặn việc cắt bớt các yếu tố trọng tâm bằng cách chọn khu vực hiển thị hình ảnh hoặc thiết lập chiều cao hình ảnh thành "Tự động điều chỉnh hình ảnh".
| Ghi chú: Đảm bảo chiều cao của hình ảnh nguồn cao hơn chiều cao cắt bớt được thiết lập càng nhiều càng tốt; nếu không, hình ảnh sẽ bị phóng to và mờ. |
| Tỷ lệ khuyến nghị cho phiên bản PC | 16:9 | |
| Kích thước khuyến nghị | Chiều rộng 1920px | Chiều cao 1080px |
| Kích thước khuyến nghị cho phiên bản di động | Chiều rộng 750px | Chiều cao 1020px |
Cột văn bản với hình ảnh
| Tỷ lệ khuyến nghị | 4:3 (Tỷ lệ khung hình ban đầu có thể được áp dụng và tùy chọn này chỉ là khuyến nghị.) | |
| Kích thước khuyến nghị | Chiều rộng 650px | Chiều cao 488px |
Hình ảnh quảng cáo trang
| Tỷ lệ khuyến nghị | 16:9 (có thể tùy chỉnh) | |
| Kích thước khuyến nghị | Chiều rộng 650px | Chiều cao 488px |
Kích thước khuyến nghị cho các thành phần khác
| Tên thành phần | Kích thước khuyến nghị | Chủ đề áp dụng |
| Danh sách Logo | 144px*144px | Edges/Cycle/Carfit |
| Mẫu bình luận | 240px*240px | Edges/Cycle/Carfit |
| Lưới văn bản và hình ảnh | Kích thước thay đổi trong các bố cục khác nhau. Chiều rộng khuyến nghị là 1420px trở lên. | Edges/Cycle/Carfit |
| Đề xuất đặc biệt | Kích thước thay đổi trong các bố cục khác nhau. Chiều rộng khuyến nghị là 1420px trở lên. | Edges/Cycle/Carfit/Barn |
| Hình ảnh có thể mua > Cài đặt | Kích thước thay đổi trong các bố cục khác nhau. Chiều rộng khuyến nghị là 1420px trở lên. | Edges/Cycle/Carfit |
| Danh sách Logo | 320px*320px | Expect/Control/Metal/Soo/Flexible |
| Hình ảnh chiến dịch |
Bộ sưu tập: Chiều rộng khuyến nghị là 1600px trở lên. Banners: Chiều rộng từ 400px trở lên |
Expect/Control/Metal/Soo/Flexible |
| Hình ảnh với văn bản | Hình ảnh sẽ thích nghi với chiều cao, và kích thước khuyến nghị là 1000px * 1000px. | Tất cả các mẫu |
Kích thước hình ảnh banner thanh toán
| Tải Ảnh Lên Dưới Dạng Hình Banner | Ảnh Banner Đầu Trang | Ảnh Banner Bên Trái | Ảnh Banner Bên Phải |
| 1920px * 200px | 1048px * 1048px | 872px * 1048px |
|
Ghi Chú: 1. Hãy cố gắng tải ảnh lên với kích thước lớn nhất có thể để có hiệu ứng hiển thị tốt nhất. 2. Đề xuất sử dụng ảnh định dạng JPG thay vì PNG để tải nhanh hơn. Ảnh sẽ tự động điều chỉnh kích thước phù hợp trong quá trình tải tùy thuộc vào chủ đề để đảm bảo tốc độ tải trang web của bạn. |
Câu Hỏi Thường Gặp
1. Tại sao ảnh bị cắt?
- Module Chiều Cao Cố Định cho Một Ảnh: Để phù hợp với các độ rộng màn hình và thiết bị di động khác nhau, chiều cao của module mặc định là cố định để đảm bảo tính đọc hiểu nội dung, điều này có thể dẫn đến việc ảnh không hiển thị theo tỷ lệ khung hình ban đầu.
- Module Trình Chiếu Ảnh: Nếu chiều cao là cố định, chiều cao của ảnh vẫn không thay đổi dưới các độ rộng màn hình khác nhau. Tỷ lệ khung hình thay đổi và ả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 xảy ra. Nếu khu vực hiển thị ảnh không được thiết lập, ảnh sẽ bị 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 chủ đề (như trình chiếu ảnh, ảnh đơn, v.v.). Ảnh đáp ứng là một kỹ thuật tiêu chuẩn trong ngành để phóng to và cắt ảnh rộng để cho phép hiển thị ảnh cùng cách trên PC và thiết bị di động. Bức ảnh của bạn sẽ được phóng to cho đến khi nó che khu vực hiển thị hoàn toàn, cho phép tỷ lệ mà không bị kéo dãn hoặc biến dạng ảnh.
2. Tại sao ảnh vẫn bị cắt ngay cả khi chúng được thiết lập để tự điều chỉnh kích thước?
- Có thể hiệu ứng cuộn parallax được kích hoạt. Ảnh sẽ tự động 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, do đó việc cắt xảy ra.
3. Tại sao ảnh không hiển thị đầy đủ ngay cả khi tôi đã sử dụng kích thước đề xuất?
- Kiểm tra xem cài đặt chiều cao có phải là "Tự điều chỉnh kích thước ảnh" không. Nếu có, hãy kiểm tra xem hiệu ứng parallax có được kích hoạt hay không. Vô hiệu hóa nó để ngăn chặn việc cắt ảnh.