Định dạng tệp hình ảnh AV1 (AVIF) là một phương thức mã hoá dựa trên bộ mã hoá và giải mã video nguồn mở AV1. AVIF thậm chí còn mới hơn WebP, chỉ được hỗ trợ trong Chrome và Opera kể từ năm 2020, Firefox năm 2021 và Safari năm 2022. Giống như WebP, AVIF hướng đến giải quyết mọi trường hợp sử dụng có thể chấp nhận được cho hình ảnh đường quét trên web: ảnh động giống GIF, độ trong suốt giống PNG và cải thiện chất lượng cảm nhận ở kích thước tệp nhỏ hơn JPEG hoặc WebP.
Cho đến nay, AVIF cho thấy nhiều triển vọng. Một khung kiểm thử do Netflix phát triển – một thành viên sáng lập của Alliance for Open Media – nhóm chịu trách nhiệm phát triển bộ mã hoá và giải mã AV1 – cho thấy mức giảm đáng kể về kích thước tệp so với JPEG hoặc WebP. Các nghiên cứu khác của Cloudinary và nhóm bộ mã hoá và giải mã của Chrome đã đánh giá thông tin này theo cách có ưu thế so với các tiêu chuẩn mã hoá hiện tại.
Mặc dù công cụ tương đối hạn chế, nhưng bạn có thể và nên bắt đầu thử nghiệm với AVIF ngay hôm nay, vì một trong những phương thức mã hoá do Squoosh cung cấp:
Hỗ trợ trình duyệt
Nếu bạn thắc mắc tại sao chúng ta đã dành nhiều thời gian thảo luận về JPEG khi AVIF và WebP có thể mang lại cho chúng tôi kết quả chất lượng cao hơn và kích thước tệp nhỏ hơn nhiều, thì đó là vì chúng (và bất kỳ phương thức mã hoá hình ảnh mới nào) đều mang lại một lợi thế lớn. Chúng tôi đã duy trì khả năng hỗ trợ GIF, PNG và JPEG trên mọi trình duyệt và đã duy trì trong nhiều thập kỷ qua. So với các định dạng hình ảnh cũ đó, AVIF là hoàn toàn mới, và mặc dù khả năng hỗ trợ WebP là rất tuyệt vời trên các trình duyệt hiện đại, nhưng chưa được hỗ trợ trên toàn bộ web.
Như bạn có thể hình dung, chúng tôi đã dành rất nhiều thời gian và công sức để phát triển các định dạng hình ảnh mới nhằm cải thiện cả chất lượng và kích thước hình ảnh để chuyển. Các định dạng như WebP, AVIF và JPEG XL (không được hỗ trợ trong bất kỳ trình duyệt nào) mong muốn trở thành giải pháp hợp nhất cho hình ảnh đường quét trên web, vì SVG là vectơ đối với vectơ. Một số khác, chẳng hạn như JPEG 2000 (chỉ hỗ trợ trong Safari) nhằm đáp ứng mọi trường hợp sử dụng tương tự như JPEG cơ sở, nhưng cải thiện các phương thức nén để phân phối hình ảnh tương tự nhưng nhỏ hơn nhiều về mặt hình ảnh.
Mặc dù một số định dạng mới trong số này có cùng tên JPEG, nhưng cách mã hoá của chúng về cơ bản không giống như JavaScript đối với Java. Một trình duyệt không hỗ trợ một chế độ mã hoá nhất định sẽ không thể phân tích cú pháp tệp hình ảnh đó được—giống như tôi đã hướng dẫn bạn điền vào lưới pixel trên giấy kẻ biểu đồ bằng một ngôn ngữ mà bạn không hiểu. Trình duyệt sẽ yêu cầu dữ liệu hình ảnh, cố gắng phân tích cú pháp và nếu không thành công, sẽ loại bỏ dữ liệu mà không hiển thị bất kỳ dữ liệu nào. Một nguồn hình ảnh không thể hiển thị bên ngoài các trình duyệt hiện đại sẽ là một điểm thất bại lớn đối với nội dung của chúng tôi và đối với web nói chung, đó là một hình ảnh bị hỏng và lãng phí băng thông cho một số lượng lớn người dùng trên toàn thế giới. Bạn không nên hy sinh một trang web có khả năng chống chọi cao hơn chỉ để có hiệu suất cao hơn.
Trong một thời gian dài, người bạn cùng chí hướng <img> của chúng tôi đã khiến việc sử dụng định dạng hình ảnh mới trở nên đặc biệt khó khăn, cho dù định dạng đó có hứa hẹn đến đâu. Hãy nhớ rằng <img> chỉ hỗ trợ một tệp nguồn duy nhất và được tối ưu hoá siêu nhanh để chuyển tệp đó nhanh chóng đến mức trên thực tế, chúng tôi không thể chặn yêu cầu đó qua JavaScript. Cho đến gần đây, phương án khả thi duy nhất là phân phát cho tất cả người dùng loại hình ảnh hoàn toàn mới và yêu cầu sử dụng một trong các định dạng "cũ" khi trình duyệt kích hoạt lỗi — dẫn đến việc chuyển tệp thứ hai sau khi hình ảnh đầu tiên bị lãng phí.
Vì lý do đó và hơn thế nữa, <img> vì đã tồn tại trong nhiều thập kỷ và đã phải thay đổi. Trong mô-đun tiếp theo, Hình ảnh thích ứng, bạn sẽ tìm hiểu về các tính năng được đưa vào quy cách HTML để giải quyết những vấn đề này và cách sử dụng chúng trong công việc hằng ngày.