Trong trò chơi HTML5 2D, định dạng hình ảnh tốt nhất để sử dụng là gì và tại sao? Tôi có nên sử dụng các định dạng khác nhau trong các tình huống khác nhau? Ví dụ: .png cho hình nền, .jpeg cho các khung hình động và vv ...
Phần "tại sao" là quan trọng đối với tôi. Nó không thực sự phải được bản địa hóa thành HTML5, nó cũng có thể là lời khuyên chung.
Câu trả lời:
Định dạng hình ảnh chỉ là một cách để lưu dữ liệu thô của pixel, vì vậy miễn là bạn sử dụng ảnh bitmap, định dạng thường không tạo ra sự khác biệt trong thực thi sau bước tải. Vấn đề là dữ liệu pixel được cung cấp cho API đồ họa. Có ba định dạng thường được sử dụng trên web:
.gif Định dạng GIF (hiện không được chấp nhận) thường được sử dụng cho hình ảnh có 256 màu trở xuống, dẫn đến kích thước rất nhỏ. GIF cũng thường được sử dụng cho hình ảnh động. Khi chỉ sử dụng 256 màu hoặc ít hơn, nó là định dạng lossless, điều đó có nghĩa là không có chất lượng bị mất về mặt nén. Nếu không, sự đa dạng màu sắc phải được giảm xuống 256, dẫn đến giảm chất lượng.
.png Định dạng đồ họa mạng di động, theo tôi nghĩ, là định dạng hình ảnh được sử dụng nhiều nhất, vì nó có tốc độ nén tốt trong khi có thể lưu nhiều màu hơn GIF. PNG cũng có khả năng trong mờ (hay thường được gọi là độ trong suốt, đó là tên sai vì một pixel phải mờ 100% mới được gọi là trong suốt). Nó cũng là một định dạng lossless và nhằm cải thiện và thay thế GIF vào năm 2006 ( nguồn , đoạn đầu tiên). Cá nhân tôi sử dụng nó như một loại hình ảnh trên các trang web và trong các trò chơi.
.jpeg Định dạng JPEG thường được sử dụng cho ảnh và những thứ đó. Nó không có khả năng trong mờ, cũng không đảm bảo nén không mất dữ liệu. Người ta thường chỉ định chất lượng khi nén, dẫn đến sự đánh đổi giữa không gian và chất lượng.
Chúng ta hãy đi qua một số trường hợp sử dụng:
Hãy nhớ rằng mức tiêu thụ bộ nhớ và hiệu suất của API đồ họa thường bằng nhau giữa các định dạng đó. Vấn đề là kích thước và tốc độ tải (bạn có thể đi sâu vào các thuật toán của các định dạng này nếu bạn muốn ước tính chi phí tải). Tiêu thụ bộ nhớ của bất kỳ hình ảnh nào ở trạng thái thô thường được xác định bởi width*height*4byte quy tắc chung cho định dạng pixel RGBA, là mức phổ biến nhất.
Chỉ cần một vài điều để thêm vào câu trả lời của @ Marco:
.gif đã lỗi thời. Tôi hoàn toàn sẽ tránh sử dụng các tập tin .gif càng nhiều càng tốt. Tôi nghĩ mọi người chỉ sử dụng chúng trong những ngày này vì hoạt hình trên trình duyệt và png hoạt hình không được hỗ trợ tốt tại thời điểm này.
Vì vậy, tất cả những gì bạn có là jpg và png.
PNG: Là lossless . Điều duy nhất bạn đang xem xét ở đây là tốc độ nén bạn nhận được. Nói chung là một công việc tốt nén các khối màu , nhưng một công việc xấu nén các cảnh với rất nhiều biến thể.
JPG: Làm một công việc khủng khiếp với các khối màu đặc (cả mất chi tiết và tốn nhiều dung lượng hơn png) nhưng là một công việc tuyệt vời với hình ảnh có nhiều biến thể (nén tốt, giảm chất lượng hình ảnh gần như không thể nhận thấy).
Ví dụ
Vì vậy, ở đây, với các khối hình ảnh màu, chúng ta mất chi tiết và phát sinh kích thước bổ sung bằng cách sử dụng JPG . Kết luận: không sử dụng jPG cho hình ảnh có khối lớn màu đặc.
Bây giờ, hãy nghĩ về một cảnh màu cao:
Vì vậy, trong tổng số
Hãy để chúng tôi trừu tượng hơn câu hỏi, sau đó:
Trong một trò chơi chạy trên nền tảng được chỉ định của nó, những cân nhắc cho phương tiện truyền thông mà nó sử dụng là gì?
Cân nhắc số 1: kích thước, còn gọi là tốc độ tải
Bất kể nền tảng và bất kể trò chơi và bất kể loại phương tiện truyền thông, thực tế là nó cần phải được đưa vào một bối cảnh để kết xuất. Trên nền tảng web, điều này có nghĩa là tải xuống. Trên môi trường máy tính để bàn hoặc bàn điều khiển, điều đó có nghĩa là tải từ phương tiện lưu trữ cục bộ. Tải phương tiện của bạn mất thời gian. Các nền tảng dựa trên web có thể đặc biệt bị tê liệt nếu nhiều phương tiện cần được tải xuống qua kết nối chậm.
Cân nhắc số 2: tiêu thụ bộ nhớ
Liên quan đến, nhưng không giống như kích thước. Một phần của phương tiện truyền thông có thể được nén trong khi trên đĩa hoặc trong một gói hoặc bất cứ thứ gì, nhưng một khi nó được tải dưới dạng kết cấu hoặc bộ đệm âm thanh cho một cái gì đó, nó có thể lớn hơn một chút. Thiết bị mà trò chơi của bạn đang thực thi không có bộ nhớ vô hạn.
Cân nhắc số 3: chất lượng và kiểu dáng
Là phương tiện truyền thông có chất lượng đủ? Điều này có thể rất quan trọng đối với trò chơi của bạn và thường mâu thuẫn với việc xem xét kích thước. Rất thường xuyên một sự cân bằng là cần thiết giữa hai. Một số trò chơi có đồ họa cực kỳ đơn giản (minecraft) nhưng vẫn rất thành công. Những người khác có đồ họa thực sự tuyệt vời chiếm lấy bộ nhớ và bộ nhớ, nhưng cho chất lượng tuyệt vời với hình nền tuyệt vời. Một số trò chơi thoát khỏi blips và bloops cho hiệu ứng âm thanh, trong khi những trò chơi khác cần có âm nhạc stereo 41k.
Vì vậy, dựa trên điều quan trọng nhất, bạn đưa ra quyết định đúng đắn cho trò chơi của mình. Quyết định là cho mỗi trò chơi, không phải một kích thước phù hợp với tất cả.
Nói chung, bạn chọn kích thước tệp nhỏ nhất mà vẫn cung cấp chất lượng hình ảnh chấp nhận được. Ngoài ra, png hỗ trợ alpha, do đó bạn không cần phải xử lý các hình ảnh bổ sung để xử lý lớp alpha.
Cái gì / khi nào sử dụng png cho ( nói chung ):
PNG là lossless, nhưng độ sâu màu có thể thay đổi.
Sử dụng jpg cho các trường hợp còn lại - hình ảnh chụp ảnh, tranh vẽ, hình ảnh với rất nhiều chi tiết nhỏ, màu sắc và độ dốc. Nếu bạn cố gắng sử dụng PNG để lưu trữ những hình ảnh này, bạn sẽ nhận thấy kích thước tệp lớn hơn rất nhiều so với jpg.
Các công cụ như adobe image ready sẽ cung cấp cho bạn bản xem trước hình ảnh của bạn cùng với kích thước tệp trong nhiều định dạng và cài đặt chất lượng.