Nội dung cập nhật về cách áp dụng AVIF trong hệ sinh thái.
AVIF là một định dạng hình ảnh mới đang nhanh chóng trở nên phổ biến trên web nhờ tỷ lệ nén cao, hiệu suất hiệu quả và được sử dụng rộng rãi. AVIF là một định dạng hình ảnh mở, không tính phí bản quyền, dựa trên bộ mã hoá và giải mã video AV1 do Liên minh vì nội dung nghe nhìn mở (Alliance for Open Media) chuẩn hoá. Bài đăng trên blog này sẽ cung cấp cái nhìn tổng quan về cách áp dụng AVIF vào hệ sinh thái và các lợi ích về hiệu suất và chất lượng mà AVIF có thể mang lại cho nhà phát triển đối với ảnh tĩnh và ảnh động.
Hệ sinh thái AVIF có gì mới?
Kể từ khi AVIF được ra mắt trong Chrome, Firefox và Safari, mức sử dụng AVIF trên web đã tăng lên đều đặn; hầu hết trình duyệt hiện đều hỗ trợ AVIF.
Chỉ riêng Chrome, mức sử dụng AVIF đã tăng lên khoảng 1% trong hơn một năm sau khi Chrome thêm tính năng hỗ trợ AVIF ở phiên bản ổn định.
Hiện nay, nhiều mạng phân phối nội dung (CDN) hình ảnh như Akamai, Cloudflare, Cloudinary và Imgix đang phân phát hình ảnh AVIF. Trong một bài đăng trên blog thông báo về việc hỗ trợ AVIF, Imgix đã báo cáo việc tiết kiệm 60% kích thước tệp so với JPEG và tiết kiệm 35% so với WebP. Kích thước tệp giảm đáng kể giúp tiết kiệm đáng kể dung lượng lưu trữ, đồng thời giúp các trang tải nhanh hơn, tạo ra thời gian Nội dung lớn nhất hiển thị (LCP) nhanh hơn. LCP là một trong những Chỉ số quan trọng chính của trang web và cho biết tốc độ tải của khối nội dung lớn nhất trên trang. Việc sử dụng bộ mã hoá và giải mã hiện đại để nén hình ảnh là một trong những kỹ thuật chính để giảm LCP. Lighthouse là một công cụ tuyệt vời dành cho nhà phát triển Chrome để kiểm thử trang web của bạn và xem mức tiết kiệm mà AVIF mang lại.
WordPress là nền tảng trang web phổ biến nhất trên thế giới và có một số trình bổ trợ giúp nhà phát triển chuyển đổi hình ảnh thành định dạng AVIF, chẳng hạn như:
- AutoOptimize
- Đã chuyển đổi cho nội dung đa phương tiện
- Trình tối ưu hoá hình ảnh EWWW
- Optimole
- Trình tối ưu hoá hình ảnh ShortPixel
Đối với các nhà phát triển thực hành nhiều hơn, các công cụ như ImageMagick và FFmpeg là một điểm khởi đầu phù hợp.
Tốc độ mã hoá của AVIF
Tốc độ mã hoá nhanh và chất lượng hình ảnh cao là yếu tố quan trọng để triển khai tính năng nén hình ảnh trên quy mô lớn. Tốc độ mã hoá phần mềm AVIF đã cải thiện đáng kể trong hai năm qua. So với các định dạng ảnh tĩnh hiện đại khác, AVIF tạo ra các tệp nhỏ hơn với chất lượng hình ảnh tương tự (xem biểu đồ sau, càng thấp càng tốt) nhưng cũng nhanh hơn trong quá trình mã hoá.
Biểu đồ bên dưới (cao hơn là tốt hơn) minh hoạ tốc độ mã hoá AVIF so với các định dạng hình ảnh khác. Các bộ mã hoá và giải mã thế hệ trước như WebP được hưởng lợi từ các thuật toán nén ít phức tạp hơn (nhưng cũng kém hiệu quả hơn). Với lược đồ mã hoá nhiều luồng, AVIF đạt được hiệu suất tương tự cho các trường hợp sử dụng phổ biến, đồng thời mang lại mức tăng đáng kể về tỷ lệ nén.
Đối với các nhà phát triển quan tâm đến việc so sánh tốc độ mã hoá và chất lượng hình ảnh chi tiết hơn, trang web So sánh mã hoá hình ảnh chứa các kết quả điểm chuẩn có thể tái tạo.
Mặc dù việc triển khai phần mềm cho các bộ mã hoá và giải mã hình ảnh hiện đại như AVIF và WebP được tối ưu hoá cho kiến trúc bộ xử lý x86 và ARM, nhưng việc nén một lượng lớn hình ảnh trên quy mô lớn có thể tốn kém về mặt điện toán. Một giải pháp thay thế để giảm chi phí nén là khám phá tính năng tăng tốc phần cứng. Bluedot đã phát triển một bộ mã hoá Pulsar-AVIF tăng tốc phần cứng chạy trên các FPGA có thể lập trình, chẳng hạn như Alveo U250 của AMD. So với phần mềm dựa trên avifenc, Pulsar-AVIF cải thiện tốc độ từ 7 đến 23 lần với hiệu quả nén tương tự.
- Bộ thử nghiệm: Kodak (24 ảnh 768x512)
- Mã hoá đồng thời 24 hình ảnh (24 quy trình)
- Mỗi quy trình mã hoá phần mềm được thực thi bằng 4 luồng. (-j 4)
Nhà phát triển có thể triển khai bộ mã hoá Pulsar-AVIF bằng máy ảo trên đám mây, chẳng hạn như Azure NP-Series.
Các tính năng của AVIF cho trang web thích ứng
AVIF có một số tính năng thú vị giúp phân phối các trang web phản hồi nhanh hơn. Lần này chúng ta sẽ tìm hiểu sâu hơn về tệp AVIF động. Đây là cách hiệu quả nhất để phân phối ảnh động thú vị trên web.
AVIF động
GIF động vẫn là một định dạng phổ biến cho ảnh động, mặc dù đã tồn tại 35 năm. Nhược điểm lớn nhất của ảnh GIF động là chỉ hỗ trợ 256 màu và khả năng nén kém, dẫn đến kích thước tệp rất lớn, đồng thời cũng giới hạn độ phân giải hoặc tốc độ khung hình trong các trường hợp sử dụng thực tế. Ngược lại, mã hóa AVIF động thực sự giống với lược đồ mã hóa video AV1, giúp tiết kiệm đáng kể kích thước tệp so với GIF động.
Chúng tôi đã chạy một phép đo điểm chuẩn đơn giản, trong đó mã hoá một tập hợp ảnh GIF động sang cả AVIF và JPEG XL. Trong tập dữ liệu kiểm thử, tỷ lệ phần trăm tiết kiệm kích thước tệp trung bình là khoảng 86% so với tệp GIF gốc và khoảng 73% so với tệp JPEG XL động*.
Chrome, Firefox và Safari đều hỗ trợ phát ảnh động AVIF.
FFmpeg là một công cụ dùng để tạo tệp AVIF động. Sau đây là ví dụ cơ bản về cách chuyển đổi ảnh GIF thành tệp AVIF bằng FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF là chất lượng đầu ra mong muốn theo thang điểm từ 0 đến 63. Giá trị thấp hơn có nghĩa là chất lượng tốt hơn và kích thước tệp lớn hơn. 0 sử dụng công nghệ nén không suy hao. Bắt đầu với giá trị 23 cho các tệp AVIF ảnh động nhỏ.
Theo mặc định, FFmpeg sử dụng libaom để mã hoá hình ảnh AVIF nhưng cũng có thể sử dụng rav1e hoặc SVT-AV1 nếu có. Bạn có thể xem thêm thông tin về các lựa chọn bộ mã hoá, điều chỉnh các tham số mã hoá để đánh đổi tốc độ/chất lượng trong hướng dẫn mã hoá AV1 của FFmpeg.
Một trường hợp sử dụng khác là đóng gói lại video AV1 thành AVIF mà không cần mã hoá lại tệp gốc. Cách này rẻ hơn đáng kể so với việc giải mã/mã hoá tệp AV1 gốc và cung cấp video AV1 để sử dụng với phần tử <img>. Bạn có thể thực hiện việc này bằng cách truyền -c:v copy vào FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Kết luận
Kể từ khi ra mắt, số lượng người dùng AVIF trên web đã tăng lên đều đặn và được các trình duyệt, CDN hình ảnh, trình bổ trợ WordPress và công cụ mã hoá hỗ trợ rộng rãi. Nhìn chung, AVIF là một lựa chọn tuyệt vời để phân phát hình ảnh trên web; AVIF có tốc độ mã hoá và giải mã nhanh chóng, đồng thời cung cấp chất lượng tốt nhất hoặc kích thước tệp nhỏ nhất, tuỳ thuộc vào lựa chọn của bạn cho trang web. AVIF là cách hiệu quả nhất để phân phối ảnh động trên web. Nếu bạn có câu hỏi, nhận xét hoặc yêu cầu về tính năng, vui lòng liên hệ qua danh sách gửi thư av1-discuss, cộng đồng GitHub của AOM và wiki AVIF.