Thông tin 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 nhanh chóng trở nên phổ biến trên web nhờ tốc độ nén cao, hiệu suất hoạt động hiệu quả và được áp dụng rộng rãi. AVIF là định dạng hình ảnh mở, miễn phí bản quyền dựa trên bộ mã hoá và giải mã video AV1 do Alliance for Open Media chuẩn hoá. Bài đăng trên blog này sẽ cung cấp thông tin tổng quan về cách AVIF được áp dụng trong hệ sinh thái, cũng như những lợi ích về hiệu suất và chất lượng mà nhà phát triển có thể mong đợi từ AVIF đối với ảnh tĩnh và ảnh động.
Hệ sinh thái AVIF có gì mới?
Kể từ khi AVIF ra mắt trong Chrome, Firefox và Safari, việc sử dụng AVIF trên web đã tăng ổn định; hầu hết các trình duyệt đều hỗ trợ AVIF hiện nay.
Chỉ trong Chrome, mức sử dụng AVIF đã tăng lên khoảng 1% trong hơn một năm sau khi Chrome bổ sung tính năng hỗ trợ AVIF ổn định.
Một số CDN hình ảnh như Akamai, Cloudflare, Cloudinary và Imgix hiện đ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 rằng kích thước tệp tiết kiệm được 60% so với JPEG và 35% so với WebP. Những mức tiết kiệm kích thước tệp này giúp tiết kiệm đáng kể bộ nhớ, nhưng cũng giúp trang tải nhanh hơn và mang lại Thời gian hiển thị nội dung lớn nhất (LCP) nhanh hơn. LCP là một trong những Chỉ số quan trọng chính của trang web, thể hiện tốc độ tải của khối nội dung lớn nhất trên trang. Sử dụng các 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 để thử nghiệm trang web của bạn và để xem số tiền mà AVIF sẽ tiết kiệm được.
WordPress là nền tảng trang web phổ biến nhất trên thế giới. Nhà phát triển có thể sử dụng một số plugin để chuyển đổi hình ảnh của họ sang định dạng AVIF, chẳng hạn như:
- AutoOptimize
- Đã chuyển đổi cho nội dung nghe nhìn
- Trình tối ưu hoá hình ảnh E chậm
- Optimole
- Trình tối ưu hoá hình ảnh ShortPixel
Nếu bạn muốn các nhà phát triển muốn tham gia quá trình thực hành, các công cụ như ImageMagick và FFmpeg là lựa chọn phù hợp để bạn bắt đầu.
Tốc độ mã hoá AVIF
Tốc độ mã hoá nhanh và chất lượng hình ảnh cao là yếu tố rất quan trọng để triển khai chức năng nén hình ảnh trên quy mô lớn. Tốc độ mã hoá của phần mềm AVIF đã cải thiện đáng kể trong hai năm qua. So với các định dạng hình ả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 đây, thấp hơn là tốt hơn) nhưng cũng mã hóa nhanh hơn.
Biểu đồ bên dưới (càng cao thì càng tốt) 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 hưởng lợi từ các thuật toán nén ít phức tạp (nhưng cũng kém hiệu quả hơn). Với lược đồ mã hoá đa 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 vẫn mang lại khả năng nén đáng kể.
Đối với các nhà phát triển quan tâm đến tốc độ mã hoá chi tiết hơn và so sánh chất lượng hình ảnh, trang web So sánh mã hoá hình ảnh sẽ cung cấp 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ể gây hao tốn năng lực tính 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 được 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 avifenc dựa trên phần mềm, Pulsar-AVIF giúp cải thiện tốc độ từ 7 đến 23 lần với hiệu suất 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)
Các nhà phát triển có thể triển khai bộ mã hoá Pulsar-AVIF bằng máy ảo đá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ị sẽ giúp cung cấp 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ề AVIF động, cho đến nay, đây là cách hiệu quả nhất để phân phối ảnh động thú vị trên web.
AVIF động
Ảnh GIF động vẫn là một định dạng phổ biến dành cho ảnh động, mặc dù ảnh động đã được 35 năm. Hạn chế lớn nhất của GIF động là chỉ hỗ trợ 256 màu và nén kém dẫn đến kích thước tệp rất lớn đồng thời cũng hạn chế độ phân giải hoặc tốc độ khung hình cho các trường hợp sử dụng thực tế. Ngược lại, mã hoá AVIF động thực sự giống với lược đồ mã hoá video AV1 giúp tiết kiệm kích thước tệp đáng kể so với GIF động.
Chúng tôi đã chạy một phép đo điểm chuẩn đơn giản trong đó chúng tôi mã hoá một tập hợp các GIF động cho cả AVIF và JPEG XL. Trong tập kiểm thử, tỷ lệ phần trăm giả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ợ chế độ phát AVIF động.
FFmpeg là một công cụ để sử dụng để tạo tệp AVIF động, dưới đây là ví dụ cơ bản về chuyển đổi GIF sang 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 trên thang đo từ 0 đến 63. Giá trị càng thấp thì chất lượng càng tốt và kích thước tệp càng lớn. 0 sử dụng nén dữ liệu không tổn hao. Bắt đầu với giá trị 23 cho các tệp AVIF có hình động nhỏ.
FFmpeg sử dụng libaom theo mặc định để mã hóa hình ảnh AVIF, nhưng cũng có thể sử dụng rav1e hoặc SVT-AV1 khi có sẵn. Bạn có thể tìm thêm thông tin về các lựa chọn bộ mã hoá, tinh chỉnh các tham số mã hoá để đảm bảo tốc độ/chất lượng được đánh đổi 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. Việc 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ể truyền -c:v copy đến FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Kết luận
Việc sử dụng AVIF trên web đã tăng lên đều đặn kể từ khi ra mắt và được hỗ trợ rộng rãi bởi các trình duyệt, CDN hình ảnh, trình bổ trợ WordPress và các công cụ mã hoá. Nhìn chung, AVIF là một lựa chọn tuyệt vời để phân phối hình ảnh trên web; AVIF nhanh chóng mã hoá và giải mã trong khi vẫn cung cấp chất lượng tốt nhất hoặc kích thước tệp nhỏ nhất, tuỳ theo ý bạn cho trang web của mình. AVIF là cách hiệu quả nhất để phân phối hoạt ảnh 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-thảo luận, cộng đồng AOM GitHub và AVIF wiki.