Tải hình ảnh lên

Bạn có thể sử dụng nhiều loại hình ảnh khác nhau, chẳng hạn như logo công ty, hình ảnh sản phẩm, bản trình chiếu, biểu ngữ và hình ảnh bài đăng trên blog. Bạn cũng có thể biến đổi hình ảnh bằng các thao tác cắt và đổi kích thước, đồng thời tùy chỉnh cài đặt phương tiện truyền thông trong chủ đề để thay đổi viền hoặc bóng đổ trên mọi phương tiện truyền thông hiển thị trên cửa hàng.

Để hiển thị hình ảnh trên cửa hàng trực tuyến chính xác như mong muốn, bạn cần sử dụng đúng tỷ lệ khung hình. Hình ảnh được tự động tối ưu hóa cho cửa hàng trực tuyến bằng Mạng phân phối nội dung (CDN) của Shopify.

Tải lên hình ảnh trong trình biên tập chủ đề

Bạn có thể thêm hình ảnh vào chủ đề của mình trong trình biên tập chủ đề. Bạn cũng có thể tải lên hình ảnh ở phần Nội dung > Tệp trong trang quản trị Shopify. Để tìm hiểu thêm, hãy tham khảo Tải lên và quản lý tệp.

Các bước thực hiện:

Thêm hình ảnh bằng trường siêu dữ liệu

Nếu bạn đã thiết lập trường siêu dữ liệu cho hình ảnh, bạn có thể sử dụng bộ chọn nguồn động để thêm hình ảnh vào cửa hàng trực tuyến. Để biết thêm thông tin về trường siêu dữ liệu và các định dạng hình ảnh được hỗ trợ, hãy tham khảo mục Thêm giá trị vào trường siêu dữ liệu.

Thiết lập điểm trọng tâm trên hình ảnh

Bạn có thể sử dụng điểm trọng tâm để xác định phần quan trọng nhất của hình ảnh trên cửa hàng trực tuyến. Khi đặt điểm trọng tâm trên hình ảnh, bạn sẽ biến điểm đó thành khu vực lấy nét. Điểm trọng tâm luôn hiển thị trong khung hình, ngay cả khi chủ đề cắt ảnh để vừa với bố cục. Điểm trọng tâm giúp bạn kiểm soát tốt hơn cách hình ảnh hiển thị trên các kích cỡ màn hình khác nhau, và trong trường hợp chủ đề sử dụng tỷ lệ khung hình khác nhau.

Mỗi hình ảnh chỉ có một điểm trọng tâm, nhưng bạn có thể thay đổi hoặc xóa điểm trọng tâm bất cứ lúc nào.

Khả năng tương thích của điểm trọng tâm với các chủ đề miễn phí của Shopify

Bạn có thể thiết lập điểm trọng tâm trên các phiên bản sau của chủ đề Shopify miễn phí:

• Tất cả chủ đề trong dòng Horizon
• Colorblock phiên bản 3.0.0 trở lên
• Craft phiên bản 5.0.0 trở lên
• Crave phiên bản 5.0.0 trở lên
• Dawn phiên bản 7.0.0 trở lên
• Origin phiên bản 1.0.0 trở lên
• Publisher phiên bản 1.0.0 trở lên
• Refresh phiên bản 2.0.0 trở lên
• Ride phiên bản 3.0.0 trở lên
• Rise phiên bản 1.0.0 trở lên
• Sense phiên bản 5.0.0 trở lên
• Spotlight phiên bản 0.0.1 trở lên
• Studio phiên bản 4.0.0 trở lên
• Taste phiên bản 4.0.0 trở lên
• Trade phiên bản 1.0.0 trở lên

Nếu sử dụng chủ đề của bên thứ ba, hãy xem tài liệu về chủ đề để tìm hiểu xem chủ đề có hỗ trợ sử dụng điểm trọng tâm hay không.

Thêm điểm trọng tâm vào hình ảnh

Nếu thêm điểm trọng tâm vào một hình ảnh và sử dụng hình ảnh đó ở nhiều nơi trên cửa hàng trực tuyến, điểm trọng tâm đó sẽ được áp dụng ở mọi nơi hiển thị hình ảnh.

Tùy thuộc vào cách chủ đề cắt và đổi kích thước hình ảnh, điểm trọng tâm có thể không phải lúc nào cũng nằm ở chính giữa.

Các bước thực hiện:

1. Nhấp vào hình ảnh từ bất kỳ vị trí nào sau đây trong trang quản trị Shopify:
   • Trong mục Nội dung > Tệp.
   • Trong trình biên tập chủ đề.
   • Trong phần Đa phương tiện của sản phẩm đăng tải trong mục Sản phẩm.
   • Trong trình biên tập email Shopify Messaging.
   • Trong mục Trường siêu dữ liệu của bất kỳ tài nguyên nào có trường siêu dữ liệu loại Tham chiếu tệp để thêm hình ảnh.
2. Để chọn phần hình ảnh muốn đặt điểm trọng tâm, hãy nhấp vào hình ảnh hoặc kéo chấm màu xanh dương.
3. Nhấp vào Lưu.

Xóa điểm trọng tâm khỏi hình ảnh

Các bước thực hiện:

1. Nhấp vào hình ảnh từ bất kỳ vị trí nào sau đây trong trang quản trị Shopify:
   • Trong mục Nội dung > Tệp.
   • Trong trình biên tập chủ đề.
   • Trong phần Đa phương tiện của sản phẩm đăng tải trong mục Sản phẩm.
   • Trong trình biên tập email Shopify Messaging.
   • Trong mục Trường siêu dữ liệu của bất kỳ tài nguyên nào có trường siêu dữ liệu loại Tham chiếu tệp để thêm hình ảnh.
2. Nhấp vào Xóa.
3. Nhấp vào Lưu thành bản mới.

Định dạng hình ảnh

Hỗ trợ các định dạng hình ảnh sau:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

Sử dụng hình ảnh JPEG

Hình ảnh JPEG là lựa chọn lý tưởng cho ảnh chụp và các hình ảnh tĩnh khác có màu sắc phức tạp. Định dạng JPEG có bảng màu với hàng triệu màu sắc. JPEG cũng sử dụng tính năng nén có tổn hao, giúp giữ thời gian tải trang nhanh chóng mà không làm giảm đáng kể chất lượng hình ảnh. Sử dụng định dạng JPEG cho các loại hình ảnh sau:

• sản phẩm
• biểu ngữ hoặc bản trình chiếu
• trang và bài đăng trên blog

Sử dụng hình ảnh PNG

Hình ảnh PNG là lựa chọn lý tưởng cho đồ họa và biểu tượng có màu sắc đồng nhất và không có dải màu. Định dạng PNG cũng hỗ trợ độ trong suốt của hình ảnh. Sử dụng định dạng PNG cho các loại hình ảnh sau:

• logo
• biểu tượng
• đường viền và chi tiết trang trí

Tự động chọn định dạng và nén hình ảnh

Hình ảnh không bị nén khi tải lên trang quản trị Shopify, giúp duy trì chất lượng gốc. Tuy nhiên, những điều sau đây có thể xảy ra để giữ thời gian tải trang nhanh chóng cho khách hàng:

• Khi hình ảnh được phân phối qua chủ đề của cửa hàng, chúng có thể được nén đối với hình ảnh chất lượng cao
• Shopify tự động xác định định dạng tệp tốt nhất có thể để sử dụng khi phân phối hình ảnh
• Khi trình duyệt web của khách hàng hỗ trợ các định dạng hình ảnh hiện đại như WebP và AVIF (Định dạng tệp hình ảnh AV1), hình ảnh sẽ được phân phối ở các định dạng đó
• Ảnh GIF được tự động chuyển đổi sang định dạng WebP động để cải thiện hiệu suất bằng cách giảm kích thước tệp

Cân nhắc các thao tác sau để có chất lượng hình ảnh tốt nhất:

• Tải lên hình ảnh có độ phân giải cao hơn lên đến 5.000 px x 5.000 px hoặc 25 megapixel
• Chọn các loại hình ảnh ít tổn hao hơn như PNG đối với bản vẽ đường, văn bản và đồ họa biểu tượng có độ trong suốt
• Sử dụng JPEG cho hình ảnh sản phẩm hoặc bản trình chiếu
• Hỗ trợ tệp SVG nhưng có những hạn chế – không thể chuyển đổi tệp (đổi kích thước, cắt, v.v.) mà không yêu cầu định dạng raster (JPEG, WebP, PNG)

Các loại tệp khác như PSD (Photoshop Document), TIFF (Tagged Image File Format) và BMP (Bitmap) được chấp nhận nhưng sẽ được chuyển đổi sang định dạng JPEG/PNG khi tải lên.

Giới hạn tải lên hình ảnh

Việc tải lên hình ảnh lên Shopify có các hạn chế về cả megapixel (MP) và kích thước tệp được tính bằng megabyte (MB). Megapixel được dùng để chỉ số triệu điểm ảnh tạo nên một hình ảnh. Megabyte được dùng để chỉ số triệu byte bộ nhớ hoặc dung lượng đĩa mà một hình ảnh chiếm dụng.

Hình ảnh tải lên Shopify không được vượt quá một trong hai giới hạn sau:

• 20 megapixel
• 20 megabyte

Để tìm giá trị megapixel của hình ảnh, bạn có thể sử dụng phương trình sau:

(chiều rộng điểm ảnh x chiều cao điểm ảnh)/1.000.000

Ví dụ: Một hình ảnh có độ phân giải 4.900 px x 6.930 px là 33,9 megapixel dựa trên phương trình: (4.900x6.930)/1.000.000 = 33,9 MP.

Cấu hình màu sắc của hình ảnh

Khi xem một hình ảnh trên cửa hàng trực tuyến, màu sắc trong hình ảnh có thể hiển thị khác với màu sắc trong hình ảnh gốc đã tải lên Shopify. Điều này có thể xảy ra khi hình ảnh có cấu hình màu sắc, đó là một tập hợp dữ liệu được lưu trữ trong tệp có đuôi .ICC hoặc .ICM.

Cấu hình màu sắc thường được nhúng vào hình ảnh để giúp chuẩn hóa cách hiển thị màu sắc trên các thiết bị khác nhau. Khi hình ảnh được hiển thị trên cửa hàng trực tuyến, cấu hình màu sắc của hình ảnh sẽ bị xóa.

Cấu hình màu sắc bị xóa vì các lý do sau:

• Không phải tất cả thiết bị đều có thể đọc cấu hình màu sắc .ICC hoặc .ICM, vì vậy việc giữ nguyên chúng có thể dẫn đến sự không nhất quán về màu sắc của hình ảnh trên các thiết bị.
• Khi hình ảnh tải lên không có cấu hình màu, trình duyệt web sẽ giả định là sRGB, cấu hình màu phổ biến nhất được sử dụng để hiển thị hình ảnh trên trang web. Điều này đảm bảo hình ảnh hiển thị giống nhau trên tất cả các trình duyệt web và thiết bị chính.
• Cấu hình màu có thể chiếm dung lượng ổ đĩa lớn, dẫn đến thời gian tải trang lâu hơn.

Xóa cấu hình màu khỏi hình ảnh

Bạn có thể xóa cấu hình màu khỏi hình ảnh bằng cách lưu hình ảnh mà không có cấu hình màu trước khi tải lên Shopify. Quá trình này thay đổi tùy thuộc vào chương trình chỉnh sửa hình ảnh của bạn.

Xem tài liệu của Adobe về cách Chỉ định hoặc xóa cấu hình màu (Illustrator, Photoshop) và Chỉ định hoặc xóa cấu hình màu (InDesign).

Thực hành tốt nhất cho bản trình chiếu, biểu ngữ hình ảnh và hình ảnh có chiều rộng toàn màn hình

Nhiều chủ đề Shopify có hình ảnh lớn hoặc bản trình chiếu tự động thay đổi tỷ lệ theo chiều cao của trình duyệt hoặc điều chỉnh theo kích thước màn hình.

Nếu sử dụng một trong những chủ đề này hoặc có bản trình chiếu lớn hay hình nền lớn, bạn cần hiểu loại hình ảnh nào hiển thị tốt nhất.

Vì hình ảnh lớn không thể vừa với tất cả thiết bị nên đôi khi Shopify chỉ hiển thị một phần hình ảnh tùy thuộc vào thiết bị bạn đang sử dụng. Nếu bản trình chiếu chứa nhiều hình ảnh lớn, có thể một phần hình ảnh sẽ không hiển thị.

Lưu ý khi sử dụng hình ảnh cho bản trình chiếu hoặc biểu ngữ hình ảnh

Để đảm bảo hình ảnh hoạt động tốt với chủ đề, hãy lưu ý những điểm sau:

• Không nên chèn văn bản vào hình ảnh dùng cho bản trình chiếu hoặc hình nền. Nếu văn bản là một phần của chính hình ảnh đó, văn bản có thể bị di chuyển, cắt hoặc điều chỉnh dựa trên chủ đề. Dùng trình biên tập chủ đề để thêm văn bản và liên kết vào bản trình chiếu và hình nền.

• Đối với hình ảnh dùng trong bản trình chiếu hoặc làm hình nền, hãy chọn những hình ảnh đơn giản để dễ đọc văn bản lớp phủ.

Hình ảnh rộng trên màn hình cao

Hình ảnh rộng có thể bị cắt ở bên trái và bên phải khi thiết bị dùng để xem có màn hình cao, chẳng hạn như điện thoại di động hoặc máy tính bảng khi xem ở chế độ dọc. Trong ví dụ dưới đây, nếu con người là phần quan trọng nhất của hình ảnh, bạn có thể đặt tiêu điểm ở bên phải hình ảnh.

Hình ảnh cao trên màn hình rộng

Hình ảnh cao có thể bị cắt ở trên cùng và dưới cùng khi thiết bị dùng để xem có màn hình rộng, chẳng hạn như máy tính xách tay hoặc màn hình máy tính để bàn. Trong ví dụ dưới đây, nếu giày là phần quan trọng nhất của hình ảnh, bạn có thể đặt tiêu điểm ở phần dưới cùng của hình ảnh.

Hành vi tải hình ảnh

Khi truy cập trang trên cửa hàng trực tuyến, bạn có thể thấy hình ảnh lúc đầu hơi mờ rồi sau một lúc sẽ trở nên sắc nét. Đây là hành vi dự kiến giúp cải thiện tốc độ tải cửa hàng và trải nghiệm người dùng.

Chủ đề Shopify sử dụng kỹ thuật có tên là tải chậm, tải trước phiên bản nhỏ hơn của hình ảnh trong khi hình ảnh độ phân giải đầy đủ đang tải ở chế độ nền. Điều này cho phép khách hàng xem ngay nội dung thay vì chờ hình ảnh lớn tải hoàn tất. Quá trình này thường hoàn tất trong vòng chưa tới một giây nhưng tạo cảm giác là cửa hàng tải nhanh hơn.

Kỹ thuật này đặc biệt hữu ích đối với các cửa hàng có nhiều hình ảnh vì có thể cải thiện đáng kể thời gian tải trang ban đầu và phản hồi ngay lập tức về mặt hình ảnh cho khách hàng.

Khắc phục sự cố về hình ảnh