Hiểu các loại hình ảnh: Hướng dẫn dành cho nhà phát triển

Chúng tôi biết rằng việc cập nhật tất cả các loại tệp hình ảnh đang được sử dụng hiện nay có thể là một thách thức. Để đơn giản hóa tình huống, chúng tôi đã biên soạn một hướng dẫn bao gồm chi tiết từng định dạng hình ảnh phổ biến. Chúng tôi tập trung cụ thể vào các loại hình ảnh mà nhà phát triển web sẽ sử dụng—có nhiều định dạng tệp khác ngoài kia, nhưng đây là những định dạng phổ biến nhất trên web. Để tìm hiểu sâu về AVIF, định dạng hình ảnh thế hệ tiếp theo phổ biến nhất, . hãy xem bài viết này Đến cuối bài viết này, bạn sẽ biết khi nào và làm thế nào để sử dụng tất cả các định dạng tệp hình ảnh mà chúng tôi thảo luận và có thể tự tin chọn đúng định dạng. Bạn sẽ tìm hiểu cách tối đa hóa chất lượng hình ảnh trong khi vẫn giữ kích thước tệp ở mức thấp, nhờ đó tăng hiệu suất của các trang web và ứng dụng của bạn. Để tìm hiểu cách tự động tối ưu hóa hình ảnh và chuyển đổi định dạng hình ảnh một cách nhanh chóng, hãy truy cập imgix.com. Dưới đây là danh sách các loại tệp hình ảnh mà chúng tôi sẽ đề cập trong bài viết này: GIF PNG TIFF JPG/JPEG JPEG2000 JPEG XR BMP SVG HEIC/HEIF WEB AVIF/AV1 Tại sao có quá nhiều định dạng hình ảnh? Lời giải thích đơn giản nhất cho sự đa dạng của các định dạng hình ảnh là mỗi định dạng phục vụ một mục đích khác nhau. Các định dạng hình ảnh khác nhau cũng sử dụng các phương pháp nén khác nhau, một quy trình mã hóa thông tin của tệp để giảm kích thước tổng thể của tệp và giúp tải xuống trên trang web nhanh hơn. Do sự khác biệt trong thuật toán nén, một số định dạng hình ảnh dẫn đến kích thước tệp nhỏ hơn với cùng chất lượng hình ảnh, nhưng phải trả giá bằng các tính năng như độ trong suốt của hình ảnh. Một số định dạng có các thuộc tính chỉ làm cho chúng hữu ích đối với các hình ảnh thuộc một loại cụ thể. Ví dụ: định dạng SVG là định dạng véc-tơ và rất phù hợp cho các biểu tượng, nhưng nó không phù hợp cho ảnh vì chúng được lưu trữ bằng định dạng ảnh khác được gọi là raster. Nói về các định dạng hình ảnh, chúng ta nên làm rõ những điều này và một số thuật ngữ phổ biến khác trước khi đi sâu vào các loại hình ảnh. Hãy thảo luận ngắn gọn về sự khác biệt giữa định dạng hình ảnh raster và vector và nén không mất dữ liệu so với nén mất dữ liệu. Raster so với Vector Về cơ bản, các định dạng vectơ xác định một hình ảnh dưới dạng một loạt các hình dạng thay vì lưu trữ thông tin về màu của từng pixel trong một trường. Thuộc tính này làm cho các hình ảnh vector như SVG trở nên phù hợp tuyệt vời cho các biểu tượng, logo, biểu đồ và đồ họa ưu tiên kỹ thuật số khác trong khi sử dụng rất ít băng thông cho mỗi hình ảnh. Ngược lại, các định dạng raster được tạo thành từ các pixel riêng lẻ và được sử dụng rộng rãi trên web nhờ các thuật toán nén hiệu quả của chúng. Một trong những điểm khác biệt chính giữa định dạng raster và định dạng vector là định dạng raster không thể được phóng to so với độ phân giải ban đầu của chúng mà không bị pixel hoặc mờ. Đồ họa bên dưới minh họa cách mở rộng quy mô hình ảnh dẫn đến hiện tượng pixel hóa. Nguồn: Wikimedia Commons Nén không mất dữ liệu so với nén có mất dữ liệu Hình ảnh yêu cầu một lượng lớn dữ liệu được hiển thị. Việc chuyển tất cả dữ liệu đó ở dạng thô, cho dù là qua Internet hay được lưu trữ trên đĩa cứng của bạn, đều rất kém hiệu quả. Để làm cho hình ảnh hiệu quả hơn, chúng tôi áp dụng "nén" cho dữ liệu cơ bản của chúng. Nén sử dụng toán học và các phương pháp khớp mẫu để giảm dữ liệu cần thiết để truyền hình ảnh. Nếu bạn đã từng sử dụng từ viết tắt, chẳng hạn như “LOL” để nói “cười to”, thì bạn đã thực hiện một dạng nén rất đơn giản. Để nén hoạt động, cả người gửi và người nhận phải biết rằng nén được áp dụng và thuật toán nén nào được sử dụng. Người gửi phải biết cách nén dữ liệu hình ảnh và người nhận phải biết cách đảo ngược quá trình nén hoặc “giải nén” để lấy lại dữ liệu hình ảnh ở dạng có thể hiển thị. Có nhiều phương pháp khác nhau để nén dữ liệu, nhưng tất cả chúng đều thuộc một trong hai loại: không mất dữ liệu hoặc mất dữ liệu. Các thuật toán nén được coi là “không mất dữ liệu” bảo toàn dữ liệu chính xác như trước khi được nén. Mặc dù các thuật toán không mất dữ liệu là hiệu quả, nhưng thậm chí có thể đạt được hiệu quả cao hơn nếu dữ liệu hình ảnh có thể được điều chỉnh trước theo cách giúp nén dễ dàng hơn. Chẳng hạn, nếu có một loạt các điểm ảnh màu trắng không rõ ràng trong hình ảnh của bạn, việc thay đổi chúng thành màu trắng hoàn hảo có thể giúp nén hình ảnh dễ dàng hơn. Người dùng cuối xem hình ảnh sẽ không bao giờ nhận thấy sự khác biệt. Tuy nhiên, do dữ liệu thay đổi, một số chi tiết ban đầu bị “mất” để có lợi cho quá trình nén. Điều này được gọi là nén "mất dữ liệu". Tóm lại, nén không mất dữ liệu có nghĩa là có thể giảm kích thước tệp của hình ảnh mà không ảnh hưởng đến chất lượng của nó. Ngược lại, nén mất dữ liệu sẽ loại bỏ một số thông tin nhất định (thường là dư thừa) trong một tệp không thể khôi phục được. Bây giờ chúng ta đã đề cập đến các thuật ngữ này (sẽ xuất hiện khi chúng ta đi qua từng loại hình ảnh), hãy nói thêm về các loại hình ảnh phổ biến nhất được sử dụng trên web. GIF (Định dạng trao đổi đồ họa) Định dạng Trao đổi Đồ họa (GIF) là một định dạng hình ảnh raster được tạo ra vào năm 1987 và đây là định dạng tệp lâu đời nhất vẫn còn được sử dụng thường xuyên cho đến ngày nay. Hình ảnh GIF sử dụng thuật toán nén được gọi là mã hóa LZW để cho phép lưu trữ dễ dàng và chất lượng hình ảnh nén cao hơn. Mô tả: GIF hầu như luôn được xây dựng theo cách áp đặt giới hạn 256 màu trong hình ảnh, mặc dù về mặt kỹ thuật, GIF có thể hỗ trợ nhiều biến thể màu hơn. Ngày nay, GIF nổi tiếng nhất là định dạng cho hình ảnh động. Một hình ảnh hoạt hình kết hợp nhiều hình ảnh (hoặc khung hình) thành một tệp và các khung hình được phát liên tiếp. Một trong những lý do khiến GIF phổ biến cho hoạt hình là chúng giả dạng hình ảnh. Bạn có thể tải GIF động lên một trang mà không cần trình phát video. Mặc dù GIF thường được sử dụng cho hoạt ảnh, nhưng chúng không phải là tùy chọn lý tưởng do chất lượng độ phân giải thấp hơn và cách nén khung hình (dẫn đến kích thước tệp lớn). Hình ảnh đơn giản, chẳng hạn như đồ họa hoặc logo, yêu cầu độ trong suốt đơn giản. Phù hợp nhất cho: Hiệu suất phụ thuộc vào số lượng khung hình trong GIF. Nếu có quá nhiều khung hình, GIF sẽ tải chậm trên trang web do kích thước tệp lớn hơn. Khi tạo ảnh GIF, bạn có thể điều chỉnh độ phân giải của từng khung hình và số lượng khung hình được hiển thị trên giây. Hiệu suất: Đương nhiên, giá trị khung hình trên giây (FPS) càng cao và độ phân giải của mỗi khung hình càng cao thì tệp GIF sẽ càng lớn. Hãy thử sử dụng các giá trị FPS khác nhau và các độ phân giải khác nhau để tìm ra cách kết hợp tối ưu cho trường hợp sử dụng của bạn. Nói chung, GIF rất khó nén vì mỗi chuỗi hoạt hình là một tập hợp các hình ảnh độc lập được ghép lại với nhau. Ngay cả khi một số phần của hình ảnh giống nhau giữa các khung hình trong GIF, thuật toán nén cũng khó xác định các phần đó. Hạn chế này là một trong những lý do tại sao kích thước tệp cho ảnh GIF thường lớn hơn so với cùng một chuỗi khung hình trong video MP4. GIF sử dụng thuật toán nén không mất dữ liệu, nhưng chất lượng hình ảnh thường giảm do quá trình lọc trước (bao gồm phối màu, kẹp và lượng tử hóa màu) liên quan đến việc chuyển đổi hình ảnh 24 bit, đủ màu thành ảnh GIF 8 bit, được chỉnh màu. Chất lượng: Tất cả các phiên bản Chrome, Edge, Firefox, Internet Explorer, Opera và Safari. Khả năng tương thích với trình duyệt: PNG (Đồ họa mạng di động) Đồ họa mạng di động (PNG) là một định dạng tệp sử dụng nén không mất dữ liệu. Các hình ảnh có hiệu ứng chuyển tiếp sắc nét và các vùng màu đồng nhất lớn (ví dụ: đồ họa hoặc hình ảnh chứa văn bản) có thể được nén ở định dạng PNG tốt hơn so với định dạng JPG. Mô tả: Kết quả là bạn thường tìm thấy hình ảnh PNG dưới dạng ảnh chụp màn hình và hình minh họa. Hình ảnh PNG đã trở thành tiêu chuẩn trên web vì chúng cung cấp độ trong suốt của hình ảnh: bạn có thể đặt một hình ảnh PNG trong suốt lên một hình ảnh khác và tạo hiệu ứng chiều sâu và nhiều lớp. PNG cũng hỗ trợ alpha đầy đủ, có nghĩa là hình ảnh có thể bán trong suốt. Ví dụ, hiệu ứng bán trong suốt giúp có thể có bóng trong suốt trong hình ảnh PNG. Đồ họa, hình minh họa, biểu ngữ và logo. Phù hợp nhất cho: Tệp PNG có xu hướng có kích thước tệp lớn hơn JPEG và SVG, vì vậy chúng ít phù hợp hơn với web nếu bạn cần hình ảnh có độ phân giải cao với kích thước tệp nhỏ hơn. Hiệu suất: Hình ảnh PNG sử dụng nén không mất dữ liệu và biểu diễn pixel hoàn hảo của chúng lý tưởng cho đồ họa có độ tương phản cao. Một số tệp PNG chứa tới 16 triệu màu do độ sâu màu 24 bit của chúng. Chất lượng: Tất cả các phiên bản Chrome, Edge, Firefox, Internet Explorer, Opera và Safari. Khả năng tương thích với trình duyệt: TIFF (Định dạng tệp hình ảnh được gắn thẻ) Định dạng tệp hình ảnh được gắn thẻ (TIFF) là định dạng hình ảnh ban đầu được tạo để lưu trữ ảnh được quét. Định dạng này phổ biến nhất đối với các nhiếp ảnh gia, người chỉnh sửa hình ảnh và nhà xuất bản, chủ yếu là vì lý do lịch sử. Mô tả: Đồ họa độ phân giải cao và nghệ thuật đồ họa trong đó kích thước tệp không phải là vấn đề. Phù hợp nhất cho: Các tệp TIFF có thể được nén hoặc giải nén; định dạng hỗ trợ nhiều tùy chọn nén. Hình ảnh TIFF thường không được hỗ trợ trong trình duyệt web, do đó, việc sử dụng chúng để hiển thị hình ảnh trên web không phải là một tùy chọn. Hiệu suất: Các tệp TIFF có chất lượng rất cao; chúng thường thiếu tính năng nén hoàn toàn hoặc sử dụng tính năng nén không mất dữ liệu, khiến chúng trở nên lý tưởng cho ảnh chụp và ảnh quét. Chất lượng: Hiện không có trình duyệt nào hỗ trợ TIFF; nó chỉ được sử dụng như một định dạng tải xuống. Khả năng tương thích của trình duyệt: JPG/JPEG (Nhóm chuyên gia nhiếp ảnh chung) Tệp của Nhóm chuyên gia chụp ảnh chung (JPEG/JPG) là định dạng được sử dụng phổ biến nhất cho các hình ảnh nén bị mất dữ liệu. Nhiều người thắc mắc sự khác biệt giữa các tệp JPG và JPEG là gì, nhưng không có: hai chữ viết tắt hoàn toàn có thể hoán đổi cho nhau. Mô tả: Một tính năng có giá trị của định dạng JPG là . Hầu hết các hình ảnh JPG được tạo ở chế độ cơ sở. Để hiểu sự khác biệt giữa hai chế độ, hãy tưởng tượng bạn đang đọc từng dòng một trang văn bản. Bạn bắt đầu từ trên cùng và tiến hành từng dòng một về phía dưới cùng. Tính năng độc đáo: chế độ lũy tiến Nếu bạn mất một phút để đọc trang này thì bạn sẽ mất 30 giây để đọc một nửa trang. chế độ cơ sở Với hình ảnh JPG ở , đó là cách bạn sẽ tải tệp JPG trên web—dòng pixel này nối tiếp dòng pixel khác, từ trên xuống dưới. Nếu hình ảnh của bạn tải chậm do kích thước tệp lớn hoặc kết nối chậm, khách truy cập trang web của bạn sẽ chỉ nhìn thấy một phần của hình ảnh cho đến khi hình ảnh tải đầy đủ. chế độ cơ sở chế độ lũy tiến Tuy nhiên, ở , bạn bắt đầu bằng cách tải phiên bản hình ảnh có độ phân giải thấp rồi tiếp tục tải phiên bản có độ phân giải cao hơn. chế độ lũy tiến Khách truy cập trang web của bạn sẽ thấy hình ảnh hoàn chỉnh ngay lập tức, ngay cả khi hình ảnh đó có chất lượng thấp hơn và khi hình ảnh tải, chất lượng của hình ảnh trên trang sẽ được cải thiện. Các hình ảnh JPG lũy tiến rất phù hợp với các trang web nhanh vì chúng giảm thiểu thời gian vẽ trang ban đầu. Ảnh tĩnh và ảnh, ảnh chụp màn hình. Phù hợp nhất cho: Hiệu suất cao với kích thước tệp nhỏ; dễ dàng tải xuống và tải lên. Hiệu suất: JPEG là một định dạng mất chất lượng, có nghĩa là chất lượng sẽ bị mất bất cứ khi nào hình ảnh được thay đổi kích thước. Hình ảnh JPEG có xu hướng mất khá nhiều độ sắc nét, vì vậy chúng không hoạt động tốt trong các biểu đồ và đồ họa khác đòi hỏi mức độ sắc nét cao để xem chính xác. Chất lượng: Tuy nhiên, JPEG là tuyệt vời khi được sử dụng cho các bức ảnh và hình ảnh có nhiều màu sắc. JPEG cũng hoạt động tốt đối với ảnh chụp màn hình do kích thước tệp nhỏ hơn so với PNG. Tất cả các phiên bản Chrome, Edge, Firefox, Internet Explorer, Opera và Safari. Khả năng tương thích với trình duyệt: “Sự khác biệt giữa JPEGmini và MozJPEG là gì?” Mục đích của cả JPEGmini và MozJPEG là giảm kích thước hình ảnh JPG mà không có hiệu ứng hiển thị cho người dùng cuối. JPEGmini sử dụng thuật toán được tinh chỉnh bằng tay để giảm chất lượng hình ảnh ở những nơi mà con người có thể không nhận thấy. Thuật toán độc đáo này cho phép chương trình giảm đáng kể kích thước của hình ảnh JPEG, đôi khi lên đến 80 phần trăm. MozJPEG là một bộ mã hóa JPG do Mozilla phát triển, sử dụng nhiều tinh chỉnh tự động để giảm đáng kể kích thước tệp JPG trong khi vẫn duy trì chất lượng hình ảnh. JPEG2000 Joint Photographic Expert Group 2000 (JPEG2000) là một tiêu chuẩn đôi khi được sử dụng thay cho JPEG. JPEG2000 sử dụng một phương pháp mã hóa phức tạp. So với một tệp JPEG thông thường, nó cung cấp hiệu suất nén tốt hơn mà không làm giảm đáng kể chất lượng hình ảnh. Mô tả: Ảnh tĩnh và ảnh chụp. Phù hợp nhất cho: Hiệu suất cao do kích thước tệp nhỏ; dễ dàng tải xuống và tải lên. Hiệu suất: Chất lượng cao hơn so với tệp JPEG thông thường vì các phương pháp nén hiệu quả hơn rất nhiều. Chất lượng: Định dạng này không tương thích ngược và thiếu hỗ trợ cho các trình duyệt chính như Chrome, Firefox, Internet Explorer và Microsoft Edge. Định dạng này chỉ được hỗ trợ trong trình duyệt Safari kể từ phiên bản 5-13.1. Khả năng tương thích với trình duyệt: JPEG XR JPEG XR (Phạm vi mở rộng), còn được gọi là Ảnh HD, là định dạng tệp do Microsoft phát triển. Định dạng này chủ yếu được sử dụng trên các hệ thống Windows và thường không được hỗ trợ trên các nền tảng khác. Mô tả: JPEG XR, so với JPEG, bổ sung các tính năng như nén không mất dữ liệu, hỗ trợ alpha đầy đủ (một tùy chọn cho bán trong suốt) và độ chính xác màu cao hơn. Một khả năng độc đáo của JPEG XR là hỗ trợ cấu trúc xếp ô. Một hình ảnh được chia thành các ô vuông—các vùng độc lập có thể được giải mã riêng biệt và mỗi vùng có thể được hiển thị mà không cần giải mã phần còn lại của hình ảnh. Tính năng độc đáo: Ảnh hiển thị cho người dùng Internet Explorer (phiên bản 9 đến 11) và Microsoft Edge (tối đa phiên bản 18). Phù hợp nhất cho: Hiệu suất cao do thuật toán nén hiệu quả hơn. Hỗ trợ ô xếp cho phép kết xuất nhanh hơn trong trình duyệt. Hiệu suất: JPEG XR có thể sử dụng cả nén mất dữ liệu và không mất dữ liệu, vì vậy chất lượng của hình ảnh sẽ khác nhau tùy thuộc vào tùy chọn nén đã chọn. Nói chung, kích thước tệp sẽ nhỏ hơn hình ảnh JPG khi sử dụng nén không mất dữ liệu và nhỏ hơn PNG khi sử dụng nén không mất dữ liệu. Chất lượng: Chỉ được hỗ trợ trên IE 9-11 và Microsoft Edge cho đến phiên bản 18. Các phiên bản Edge mới hơn đã loại bỏ hỗ trợ cho hình ảnh JPEG XR. Khả năng tương thích với trình duyệt: BMP (Bản đồ bit) Định dạng tệp Bitmap (BMP) là định dạng hình ảnh raster phổ biến nhất trên các hệ thống Windows. Mô tả: Chủ yếu được sử dụng cho ảnh chụp màn hình trên máy Windows nếu không thể nén vì lý do nào đó. Phù hợp nhất cho: Hình ảnh bitmap chiếm một lượng lưu trữ đáng kể, đặc biệt nếu chúng chứa nhiều màu. Do đó, chúng có thể tải chậm khi được sử dụng trên trang web, đây là một trong những lý do tại sao chúng tôi không khuyên bạn nên sử dụng tệp BMP trên web. Hiệu suất: Hình ảnh bitmap cung cấp chất lượng không mất dữ liệu, pixel hoàn hảo (giống như PNG). Chất lượng: Tất cả các phiên bản Chrome, Edge, Firefox, Internet Explorer, Opera và Safari. Khả năng tương thích với trình duyệt: SVG (Đồ họa véc tơ có thể mở rộng) Tệp Đồ họa vectơ có thể mở rộng (SVG) là định dạng hình ảnh vectơ dựa trên XML thường được sử dụng trên web. Mô tả: Các định dạng vectơ linh hoạt hơn và dễ sử dụng hơn nhiều so với các định dạng raster của chúng như GIF, PNG, JPG và BMP; quan trọng hơn, chúng mở rộng quy mô trơn tru mà không làm giảm chất lượng. Đồ họa yêu cầu chất lượng nhất quán khi được chia tỷ lệ, chẳng hạn như biểu tượng, biểu ngữ và biểu đồ. Phù hợp nhất cho: Hình ảnh SVG ảnh hưởng tích cực đến hiệu suất trang web vì chúng có xu hướng có kích thước tệp nhỏ hơn nhiều so với các định dạng raster như PNG, BMP và TIFF. Hiệu suất: Hình ảnh SVG giữ nguyên chất lượng cho dù chúng được chuyển đổi như thế nào, lớn hay nhỏ. Thuộc tính này rất cần thiết cho đồ họa, chẳng hạn như logo công ty được sử dụng làm biểu tượng yêu thích và hình ảnh tiêu đề trên trang web. Chất lượng: Gần như tất cả các trình duyệt đều hỗ trợ định dạng SVG, ngoại trừ IE 6-8 (phát hành trước tháng 3 năm 2009) và Trình duyệt Android 2.1-2.3 (phát hành trước tháng 12 năm 2010). Khả năng tương thích với trình duyệt: HEIC / HEIF (Định dạng tệp hình ảnh hiệu quả cao) Định dạng tệp hình ảnh hiệu quả cao (HEIC / HEIF) là một định dạng hình ảnh do Nhóm chuyên gia hình ảnh chuyển động phát triển. Đây là một định dạng ảnh khá mới vừa được Apple giới thiệu làm định dạng lưu trữ ảnh trên iPhone và iPad. Mô tả: Một trong những lý do Apple chọn định dạng này cho các thiết bị di động của mình là khả năng lưu trữ các chuỗi hình ảnh (ví dụ: Live Photo hoặc ảnh chụp liên tục) dưới dạng một tệp. Trong những tình huống như vậy, các tệp HEIC lưu trữ sự khác biệt giữa các ảnh thay vì lưu trữ toàn bộ ảnh, dẫn đến kích thước tệp nhỏ hơn đáng kể. Nhiếp ảnh, hình ảnh động. Thích hợp nhất cho: Tệp HEIC có kích thước tệp lớn hơn tệp JPEG vì định dạng HEIC sử dụng nén không mất dữ liệu. Tuy nhiên, hình ảnh HEIC có kích thước tệp nhỏ hơn PNG, một định dạng không mất dữ liệu có thể so sánh được. Hiệu suất: Rất cao—hình ảnh HEIC có thể lưu trữ nhiều hơn hai lần chi tiết của hình ảnh JPEG. Chất lượng: Không có trình duyệt hiện đại nào hỗ trợ định dạng HEIC. Khả năng tương thích với trình duyệt: “HEIC có tốt hơn JPEG không?” HEIC có thể lưu trữ nhiều hơn hai lần chi tiết của hình ảnh JPEG trong khi vẫn giữ kích thước tệp ở mức thấp, khiến chúng hoạt động hiệu quả hơn và có chất lượng cao hơn nhiều so với định dạng JPEG. Kích thước tệp HEIC nhỏ hơn đặc biệt hữu ích để giúp giảm chi phí lưu trữ trên đám mây, miễn là bạn có thể chuyển đổi tệp HEIC sang các định dạng khác khi phân phát trên web. Định dạng HEIC hiện không được sử dụng rộng rãi trên web do thiếu sự hỗ trợ của trình duyệt. Tuy nhiên, một số giải pháp CDN hình ảnh sẽ tự động chuyển đổi tệp HEIC sang định dạng mà trình duyệt hỗ trợ. “Làm cách nào tôi có thể chuyển đổi hình ảnh HEIC sang định dạng JPEG?” Bạn có thể thực hiện việc này bằng cách sử dụng công cụ trực tuyến như . HEIC to JPG “Tôi có cần giấy phép để sử dụng HEIC không?” Không cần giấy phép để sử dụng định dạng HEIC theo cách phi thương mại. WEBP (Định dạng ảnh trên web) Web Picture Format (WebP) là một định dạng hình ảnh được phát triển bởi Google. Nó có thể sử dụng nén mất dữ liệu hoặc không mất dữ liệu, vì vậy bạn có thể đưa ra lựa chọn giữa kích thước tệp nhỏ hơn và chất lượng cao hơn. Mô tả: WebP nhằm mục đích tạo ra những hình ảnh nhỏ hơn, đẹp hơn, thường làm tăng thời gian tải của trang web. WebP cũng hỗ trợ hoạt ảnh và vòng lặp, tương tự như GIF. Định dạng này đang ngày càng phổ biến và được hỗ trợ. Ảnh, biểu ngữ và hình ảnh động. Phù hợp nhất cho: Tốt khi sử dụng nén. Hiệu suất: Nói chung là tốt, đặc biệt khi sử dụng nén không mất dữ liệu. Chất lượng: Kể từ năm 2018, WebP đã được hỗ trợ rộng rãi trên tất cả các trình duyệt web chính ngoài IE và Apple đã công bố hỗ trợ cho WebP trong các phiên bản Safari sắp tới. Chúng tôi khuyên bạn nên sử dụng các dự phòng JPEG hoặc PNG khi thêm hình ảnh WebP vào trang web của mình. Khả năng tương thích của trình duyệt: “Làm cách nào để ngăn Google Chrome lưu hình ảnh của tôi dưới dạng WebP?” Theo mặc định, Google Chrome lưu hình ảnh trang web ở định dạng WebP. Nếu bạn đang sử dụng máy Mac, bạn có thể xuất hình ảnh WebP sang JPG bằng cách sử dụng ứng dụng Xem trước mặc định của hệ thống. Trên Windows, bạn có thể tải xuống tiện ích mở rộng chẳng hạn như . Một tùy chọn khác là sử dụng imgix để hình ảnh trên trang web của bạn được phục vụ ở định dạng WebP khi khách hàng của bạn sử dụng Chrome hoặc Firefox và ở định dạng PJPG (JPG lũy tiến) cho các trình duyệt khác. Lưu hình ảnh dưới dạng PNG AVIF (Định dạng tệp hình ảnh AV1) Định dạng AVIF là định dạng hình ảnh dựa trên định dạng mã hóa video AV1. AV1 được tạo và phát triển bởi , một tập đoàn được thành lập bởi Mozilla, Google, Cisco, Netflix, Amazon và các công ty khác. Mô tả: Liên minh Truyền thông Mở Ý tưởng chính đằng sau AVIF là tận dụng các thuật toán nén ban đầu được phát triển cho video ở định dạng hình ảnh. Netflix cho hình ảnh trên các ứng dụng của mình vì chất lượng vượt trội mà định dạng này mang lại trong khi vẫn giữ kích thước hình ảnh thấp. tin rằng AVIF có tiềm năng Hình ảnh chứa các chi tiết cụ thể cần được giữ nguyên, ví dụ: độ dốc, văn bản và đồ họa trong áp phích phim. Phù hợp nhất cho: Tuyệt vời khi sử dụng nén. Hiệu suất: Tuyệt vời khi sử dụng nén. Chất lượng: Định dạng AVIF được hỗ trợ trong Google Chrome bắt đầu từ phiên bản 85. Firefox đã hỗ trợ AVIF kể từ phiên bản 77, nhưng chức năng AVIF bị tắt theo mặc định và cần được bật trong cài đặt. Các trình duyệt khác hiện không hỗ trợ định dạng AVIF. Khả năng tương thích với trình duyệt: Tôi nên chọn định dạng hình ảnh nào? Trong phần này, chúng tôi cung cấp các đề xuất về định dạng hình ảnh dựa trên trường hợp sử dụng cụ thể của bạn. Đối với ảnh trên trang web, chúng tôi khuyên dùng JPG vì kích thước tệp nhỏ hơn. Mặc dù các định dạng khác cung cấp các tính năng bổ sung như độ trong suốt, nhưng những tính năng này không cần thiết cho ảnh. Ảnh: Một lựa chọn thậm chí còn tốt hơn là sử dụng dịch vụ thông minh giúp chuyển đổi hình ảnh tĩnh thành định dạng tối ưu tùy thuộc vào trình duyệt mà người dùng của bạn đang chạy. Ví dụ: imgix phục vụ hình ảnh ở định dạng WebP cho những người sử dụng Chrome và Firefox và ở định dạng PJPG cho những người sử dụng Internet Explorer, Safari và Microsoft Edge. Đối với phim hoạt hình và tác phẩm nghệ thuật, chúng tôi cũng khuyên bạn nên sử dụng định dạng JPG vì những lý do tương tự: Hình ảnh JPG có kích thước tệp nhỏ hơn và tác phẩm nghệ thuật thường không cần độ trong suốt. Nghệ thuật đường kẻ và phim hoạt hình: Khuyến nghị của chúng tôi về các yếu tố thiết kế đồ họa có hai mặt: Các yếu tố thiết kế đồ họa: Sử dụng SVG nếu có thể do kích thước tệp nhỏ và dễ dàng thay đổi kích thước mà không làm giảm chất lượng. Mặt khác, hãy sử dụng PNG vì tính năng nén không mất dữ liệu của nó hoạt động tốt đối với các hình ảnh có hiệu ứng chuyển tiếp sắc nét và các vùng màu đồng nhất lớn. Chúng tôi khuyên dùng định dạng SVG cho các biểu tượng. Định dạng này tạo ra các tệp nhỏ và cung cấp cho bạn khả năng chia tỷ lệ hình ảnh của mình mà không làm giảm chất lượng. Biểu tượng: Tốt nhất là bạn nên tạo các biểu tượng ở định dạng SVG ngay từ đầu vì thực tế là việc chuyển đổi hình ảnh PNG hoặc GIF thành định dạng vectơ như SVG có thể không khả thi. Đối với biểu trưng trang web, SVG lại thắng. Định dạng này chiếm ít băng thông hơn các định dạng khác và có thể thay đổi kích thước dễ dàng. Đối với các biểu tượng, hãy thử tạo biểu trưng của bạn dưới dạng SVG. Biểu trưng trang web: Đề xuất của chúng tôi cho hình ảnh động là định dạng MP4. Đó là định dạng video chứ không phải định dạng hình ảnh và so với GIF, hoạt hình MP4 có kích thước chỉ bằng một phần mười. Hình ảnh động: Sử dụng thẻ , đặt tùy chọn tự động phát và vòng lặp, đồng thời đặt thuộc tính để sao chép hành vi của GIF với tệp MP4. Khi bạn sử dụng imgix, chúng tôi sẽ tự động chuyển đổi các tệp GIF của bạn thành MP4 (lưu ý: hỗ trợ cho GIF động là một tính năng cao cấp của imgix). muted Định dạng hình ảnh nào có thể được phục vụ với imgix? Các loại tệp có thể tương tác với imgix dưới dạng hoặc . định dạng đầu vào định dạng đầu ra là một tệp sẽ được các tham số của imgix chấp nhận. Bạn có thể chuyển đổi hình ảnh được chấp nhận với bằng cách sử dụng API của imgix ( ví dụ: ). Định dạng đầu vào định dạng đầu vào w=600 là một loại tệp mà imgix có thể chuyển đổi bất kỳ định dạng đầu vào nào thành. Ví dụ: bạn có thể chuyển đổi jpg thành png bằng cách sử dụng fm=png. Định dạng đầu ra Mọi định dạng đầu vào không được hỗ trợ sẽ được phục vụ . mà không có bất kỳ biến đổi nào Loại tệp Được hỗ trợ dưới dạng định dạng đầu vào Được hỗ trợ dưới dạng định dạng đầu ra bằng FM trí tuệ nhân tạo X APNG* X AVIF X BMP X EPS* GIF X X HEIC X* ICO X ICNS X JPEG X X JPEG2000 X X JPEGXL JPEG XR X JSON X PCT X PDF X PJPEG X X PNG X X PNG8 X X PNG32 X X PSD X SVG X* TIFF X WEB X* X AVI X H.264 X HLS X PHIM X MPEG-4 X MP4 X X WMV X WEBM X X* * Xem bên dưới ghi chú cụ thể file Cung cấp nội dung không được hỗ trợ với imgix Mặc dù imgix được tối ưu hóa để phục vụ hình ảnh, nhưng có thể chuyển qua các nội dung tĩnh khác như tệp JavaScript và CSS từ Nguồn của bạn. Điều này sẽ mang lại cho bạn lợi ích của việc phục vụ các nội dung khác thông qua CDN được phân phối toàn cầu của chúng tôi. Tuy nhiên, chúng tôi không đảm bảo hoạt động của những nội dung đó—các tham số kết xuất (đặc biệt là các tham số mặc định) có thể ảnh hưởng đến đầu ra và có thể vô tình tạo ra lỗi kết xuất. Khi phân phối các loại tệp không được hỗ trợ, điều quan trọng là không áp dụng bất kỳ tham số nào trên URL. Mặc dù thường không có vấn đề gì với việc sử dụng tham số trên các loại đầu vào không được hỗ trợ, nhưng có một số trường hợp hiếm gặp khi tham số có thể gây ra hành vi không mong muốn trên một số loại tệp nhất định. Nếu bạn đã định cấu hình Nguồn với (các) tham số mặc định đang gây ra sự cố với nội dung đầu vào không được hỗ trợ, thì bạn có thể khắc phục sự cố này bằng một trong hai cách sau: Phục vụ những nội dung đó mà không cần sử dụng imgix hoặc Sử dụng một Nguồn riêng để phân phát các nội dung đó Tệp ghi chú cụ thể APNG PNG động sẽ được hiển thị dưới dạng APNG tĩnh. Đối với ảnh động, vui lòng sử dụng GIF động (tính năng cao cấp) để thay thế. EPS Chỉ được hỗ trợ dưới dạng chuyển tiếp, không phải dưới dạng loại đầu vào. HEIC HEIC sẽ chỉ hoạt động nếu được tạo từ thiết bị iOS hình ảnh gốc của SVG Có thể bật SVG làm tham số đầu vào bằng cách liên hệ với . Nếu chúng chưa được kích hoạt cho tài khoản của bạn, chúng tôi có thể chuyển chúng qua miễn là chúng có khai báo XML chính xác ở đầu tệp. support@imgix.com Lưu ý rằng có một lỗ hổng bảo mật đối với SVG cho phép thực thi javascript nội tuyến khi được cung cấp qua trình duyệt web. Bằng cách bật SVG làm tham số đầu vào, bạn có thể ngăn chặn việc thực thi mã này bằng cách cho phép imgix rasterize & phân phối tệp. Bạn có thể thực hiện việc này bằng cách áp dụng bất kỳ tham số mặc định nào trong cài đặt Nguồn của mình, chẳng hạn như auto=compress. Một cách khác để ngăn chặn các lỗ hổng liên quan đến SVG là ngăn SVG do người dùng tải lên, điều này ngăn không cho SVG trái phép được cung cấp từ Nguồn của bạn. Bạn không nên sử dụng mã hóa Base64 trong các tệp SVG của mình. Đoạn Base64 sẽ không được xử lý bởi ngăn kết xuất của chúng tôi và sẽ không được hiển thị trong kết xuất đầu ra. WEB WebP hoạt hình chưa được hỗ trợ dưới dạng định dạng đầu vào. WEBM Độ trong suốt bị mất khi chuyển đổi GIF thành WEBM. Thay vào đó, bạn có thể chuyển đổi GIF thành APNG để hỗ trợ độ trong suốt. Câu hỏi thường gặp (FAQ) “Kích thước và độ phân giải hình ảnh phù hợp cho hình ảnh trên trang web là bao nhiêu?” Câu trả lời phụ thuộc vào thiết bị mà khách truy cập trang web của bạn đang sử dụng và cách bạn sử dụng từng hình ảnh. Chúng tôi khuyên bạn nên sử dụng kích thước hình ảnh được tối ưu hóa cho kích thước màn hình của từng thiết bị để hình ảnh giữ được chất lượng cao trong khi tiêu tốn ít băng thông nhất có thể. Ví dụ: iPhone 11 Pro Max có độ phân giải màn hình là 1242x2688 pixel. Khi tính đến , bạn nên xem xét hình ảnh có kích thước gấp 3 lần các kích thước đó nếu hình ảnh của bạn chiếm toàn bộ chiều rộng của trang web trong cửa sổ trình duyệt. tỷ lệ pixel của thiết bị (DPR) Làm cho hình ảnh quá lớn sẽ tiêu tốn thêm băng thông một cách không cần thiết trong khi sử dụng kích thước tệp nhỏ hơn sẽ tạo pixel cho hình ảnh và khiến hình ảnh có chất lượng thấp hơn trên trang. Nguyên tắc tương tự áp dụng tương ứng cho một hoặc nhiều hình ảnh chiếm ít hơn chiều rộng toàn bộ cửa sổ. Trong trình duyệt, thuộc tính cho phần tử là một cách thuận tiện để hiển thị các kích thước hình ảnh khác nhau dựa trên kích thước màn hình. để biết thêm chi tiết về lý do nó hữu ích và cách nó hoạt động. srcset Xem hướng dẫn Responsive images with srcset Bản tóm tắt Trong bài viết này, chúng tôi đã đề cập đến nhiều định dạng hình ảnh phổ biến, bao gồm cả hiệu suất và khả năng tương thích với trình duyệt của chúng. Hãy nhớ rằng không có một định dạng nào phù hợp với mọi hình ảnh trên web. Để chọn định dạng hình ảnh tối ưu, hãy xem xét cách bạn sẽ sử dụng từng hình ảnh, liệu bạn có cần hiển thị hình ảnh đó cho người dùng ở các định dạng khác nhau hay không và trình duyệt nào bạn định hỗ trợ. Để tự động chuyển đổi định dạng hình ảnh để có hiệu suất tối ưu, hãy tạo một . tài khoản miễn phí tại imgix ngay hôm nay