Chúng tôi thường xuyên viết về sự phình to trên các trang web từ hình ảnh và các công cụ như Lighthouse sẽ nêu bật khi việc tải hình ảnh có tác động tiêu cực đến trải nghiệm người dùng, chẳng hạn như tăng thời gian tải hoặc lấy băng thông của các tài nguyên quan trọng hơn. Có một cách để khắc phục vấn đề này là sử dụng tính năng nén hiện đại để giảm kích thước tệp hình ảnh và một lựa chọn mới cho các nhà phát triển web là định dạng hình ảnh AVIF. Bài đăng trên blog này nói về những điểm cập nhật gần đây đối với công cụ nguồn mở cho AVIF, giới thiệu các thư viện mã hoá libaom và libavif, đồng thời hướng dẫn cách sử dụng các thư viện này để mã hoá hình ảnh AVIF một cách hiệu quả.
AVIF là một định dạng hình ảnh dựa trên bộ mã hoá và giải mã video AV1 và được Alliance for Open Media chuẩn hoá. AVIF có khả năng nén đáng kể so với các định dạng hình ảnh khác như JPEG và WebP. Mặc dù mức tiết kiệm chính xác sẽ phụ thuộc vào nội dung, chế độ cài đặt mã hoá và mục tiêu chất lượng, nhưng chúng tôi và các công ty khác đã tiết kiệm được hơn 50% so với JPEG.
Ngoài ra, AVIF bổ sung tính năng hỗ trợ bộ mã hoá và vùng chứa cho các tính năng mới của hình ảnh như High Dynamic Range và Wide Color Gamut (Dải màu động cao và Gam màu rộng), tổng hợp hạt phim và giải mã tăng dần.
Tính năng mới
Kể từ khi bắt đầu hỗ trợ AVIF trong Chrome M85, khả năng hỗ trợ AVIF trong hệ sinh thái nguồn mở đã được cải thiện trên một số mặt.
Libaom
Libaom là bộ mã hoá và giải mã AV1 nguồn mở do các công ty trong Liên minh Open Media duy trì và được sử dụng trong nhiều dịch vụ sản xuất của Google cũng như các công ty thành viên khác. Giữa bản phát hành libaom 2.0.0 — cùng thời điểm Chrome bổ sung hỗ trợ AVIF — và bản phát hành 3.1.0 gần đây, đã có thêm một số tính năng tối ưu hoá mã hoá hình ảnh tĩnh đáng kể vào cơ sở mã. Những quốc gia/khu vực này bao gồm:
- Tối ưu hoá cho mã hoá đa luồng và xếp kề.
- Giảm 5 lần mức sử dụng bộ nhớ.
- Mức sử dụng CPU giảm 6,5 lần, như minh hoạ trong biểu đồ bên dưới.
Những thay đổi này làm giảm đáng kể chi phí mã hoá AVIF, đặc biệt là những hình ảnh được tải thường xuyên nhất hoặc có mức độ ưu tiên cao nhất trên trang web của bạn. Khi phương thức mã hoá tăng tốc phần cứng của AV1 được cung cấp nhiều hơn trên các máy chủ và dịch vụ đám mây, chi phí tạo hình ảnh AVIF sẽ tiếp tục giảm.
Libavif
Libavif, phương thức triển khai tham chiếu của AVIF, là một trình kết hợp và phân tích cú pháp AVIF nguồn mở được dùng trong Chrome để giải mã hình ảnh AVIF. Bạn cũng có thể sử dụng công cụ này với libaom để tạo hình ảnh AVIF từ hình ảnh không nén hiện có hoặc chuyển mã từ hình ảnh web hiện có (JPEG, PNG, v.v.).
Gần đây, Libavif đã bổ sung tính năng hỗ trợ cho nhiều chế độ cài đặt bộ mã hoá hơn, bao gồm cả việc tích hợp với các chế độ cài đặt bộ mã hoá libaom nâng cao hơn. Các tính năng tối ưu hoá trong quy trình xử lý như chuyển đổi YUV sang RGB nhanh chóng bằng cách sử dụng libyuv và hỗ trợ alpha được nhân trước, đẩy nhanh hơn nữa quá trình giải mã. Cuối cùng, tính năng hỗ trợ chế độ mã hoá all-intra mới được thêm vào trong libaom 3.1.0 mang đến mọi điểm cải tiến của libaom nêu trên.
Mã hoá hình ảnh AVIF bằng avifenc
Một cách nhanh chóng để thử nghiệm với AVIF là Squoosh.app. Squoosh chạy phiên bản WebAssembly của libavif và hiển thị nhiều tính năng tương tự như các công cụ dòng lệnh. Đây là cách dễ dàng để so sánh AVIF với các định dạng cũ và mới khác. Ngoài ra, còn có phiên bản CLI của Squoosh nhắm đến các ứng dụng nút.
Tuy nhiên, WebAssembly chưa có quyền truy cập vào tất cả dữ liệu gốc về hiệu suất của CPU. Vì vậy, nếu muốn chạy libavif nhanh nhất, bạn nên sử dụng bộ mã hoá dòng lệnh avifenc.
Để hiểu cách mã hoá hình ảnh AVIF, chúng tôi sẽ trình bày hướng dẫn sử dụng cùng một hình ảnh nguồn được dùng trong ví dụ ở trên. Để bắt đầu, bạn cần có:
- Chrome phiên bản 85 trở lên
- cmake
- git
- người-hâm mộ
Bạn cũng cần cài đặt các gói phát triển cho zlib, libpng và libjpeg. Lệnh cho bản phân phối Debian và Ubuntu Linux là:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Xây dựng bộ mã hoá dòng lệnh
1. Lấy mã
Hãy kiểm tra thẻ phát hành của libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Thay đổi thư mục thành libavif
cd libavif
Có nhiều cách để bạn định cấu hình avifenc và libavif để tạo bản dựng. Bạn có thể tìm thêm thông tin tại libavif. Chúng tôi sẽ xây dựng avifenc để thư viện này được liên kết tĩnh với thư viện bộ mã hoá và giải mã AV1, libaom.
3. Tải và tạo libaom
Thay đổi thành thư mục phần phụ thuộc bên ngoài libavif.
cd ext
Lệnh tiếp theo sẽ lấy mã nguồn libaom và tạo libaom theo phương thức tĩnh.
./aom.cmd
Thay đổi thư mục thành libavif.
cd ..
4. Xây dựng công cụ mã hoá dòng lệnh, avifenc
Bạn nên tạo thư mục bản dựng cho avifenc.
mkdir build
Thay đổi sang thư mục bản dựng.
cd build
Tạo các tệp bản dựng cho avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
Xây dựng hệ thống hàng không.
make
Bạn đã tạo thành công avife!
Tìm hiểu các tham số dòng lệnh avifenc
avifenc sử dụng cấu trúc dòng lệnh:
./avifenc [options] input.file output.avif
Các tham số cơ bản cho avifenc được dùng trong hướng dẫn này là:
| avifenc | |
|---|---|
| --tối thiểu 0 | Đặt bộ định lượng tối thiểu cho màu về 0 |
| --tối đa 63 | Đặt bộ lượng tử tối đa cho màu đến 63 |
| --minalpha 0 | Đặt bộ định lượng tối thiểu cho alpha về 0 |
| --maxalpha 63 | Đặt bộ định lượng tối đa cho alpha thành 63 |
| -sử dụng cuối=q | Đặt chế độ kiểm soát tốc độ thành chế độ Chất lượng không đổi (Q) |
| -a c-level=Q | Đặt mức lượng tử hoá cho cả màu và alpha thành Q |
| -a color:c-level=Q | Đặt mức lượng tử hoá cho màu thành Q |
| -alpha:c-level=Q | Đặt mức lượng tử hoá cho alpha thành Q |
| -một giai điệu=ssim | Chỉnh cho SSIM (mặc định là chỉnh cho PSNR) |
| --việc làm J | Sử dụng luồng worker J (mặc định: 1) |
| --tốc độ S | Thiết lập tốc độ bộ mã hoá từ 0-10 (mặc định chậm nhất-nhanh nhất: 6) |
Tuỳ chọn cấp c/c đặt mức lượng tử (0-63) để kiểm soát chất lượng của màu sắc hoặc alpha.
Tạo hình ảnh AVIF với chế độ cài đặt mặc định
Các tham số cơ bản nhất để avifenc chạy là việc thiết lập các tệp đầu vào và đầu ra.
./avifenc happy_dog.jpg happy_dog.avif
Bạn nên sử dụng dòng lệnh sau đây để mã hoá hình ảnh, chẳng hạn như ở mức lượng tử hoá cấp 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc có nhiều tuỳ chọn sẽ ảnh hưởng đến cả chất lượng và tốc độ.
Nếu bạn muốn xem các lựa chọn và tìm hiểu thêm về các lựa chọn đó, chỉ cần chạy ./avifenc
Giờ đây, bạn đã có hình ảnh AVIF của riêng mình!
Tăng tốc bộ mã hoá
Một tham số bạn nên thay đổi tuỳ thuộc vào số lượng lõi bạn có trên máy là tham số --jobs.
Tham số này sẽ quy định số lượng luồng mà hệ thống sẽ sử dụng để tạo hình ảnh AVIF.
Hãy thử chạy tuỳ chọn này ở dòng lệnh.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Điều này yêu cầu avifenc sử dụng 8 luồng khi tạo hình ảnh AVIF, giúp tăng tốc độ mã hoá AVIF khoảng 5 lần.
Ảnh hưởng đối với thời gian hiển thị nội dung lớn nhất (LCP)
Hình ảnh là một đề xuất phổ biến cho chỉ số Thời gian hiển thị nội dung lớn nhất (LCP). Một đề xuất phổ biến để cải thiện tốc độ tải của hình ảnh LCP là đảm bảo rằng hình ảnh được tối ưu hoá. Bằng cách giảm kích thước chuyển của tài nguyên, bạn đang cải thiện thời gian tải tài nguyên. Đây là một trong 4 giai đoạn chính cần nhắm đến khi xử lý các đề xuất LCP là hình ảnh.
Bạn nên sử dụng CDN hình ảnh khi tối ưu hoá hình ảnh, vì cách này đòi hỏi ít công sức hơn so với việc thiết lập quy trình tối ưu hoá hình ảnh trong quy trình xây dựng trang web hoặc sử dụng tệp nhị phân của bộ mã hoá theo cách thủ công để tối ưu hoá hình ảnh theo cách thủ công. Tuy nhiên, đối với một số dự án, CDN hình ảnh có thể gây tốn kém. Trong trường hợp này, hãy cân nhắc những điều sau khi tối ưu hoá bằng bộ mã hoá avifenc:
- Làm quen với các tuỳ chọn mà bộ mã hoá cung cấp. Bạn có thể tiết kiệm thêm mà vẫn giữ được chất lượng ảnh đầy đủ bằng cách thử nghiệm một số tính năng mã hoá có sẵn của AVIF.
- AVIF cung cấp cả phương thức mã hoá có tổn hao và không tổn hao. Tuỳ vào nội dung của hình ảnh, một kiểu mã hoá có thể hoạt động hiệu quả hơn một kiểu mã hoá. Ví dụ: ảnh thường được phân phát dưới dạng JPEG có thể sẽ hoạt động hiệu quả nhất khi có phương pháp mã hoá có tổn hao, trong khi đó phương thức mã hoá không tổn hao lại phù hợp nhất với những hình ảnh chứa các chi tiết đơn giản hoặc nghệ thuật đường nét thường được phân phát dưới dạng PNG.
- Nếu sử dụng một trình đóng gói có hỗ trợ trong cộng đồng cho imagemin, hãy cân nhắc sử dụng gói imagemin-avif để cho phép trình đóng gói của bạn xuất các biến thể hình ảnh AVIF.
Bằng cách thử nghiệm với AVIF, bạn có thể nhận ra sự cải thiện cho thời gian LCP của trang web trong trường hợp ứng viên LCP là một hình ảnh. Để biết thêm thông tin về cách tối ưu hoá LCP, hãy đọc hướng dẫn về cách tối ưu hoá LCP.
Kết luận
Khi sử dụng libaom, libavif và các công cụ nguồn mở khác, bạn có thể đạt được chất lượng và hiệu suất hình ảnh tốt nhất cho trang web của mình bằng AVIF. Định dạng này vẫn còn tương đối mới và hoạt động tối ưu hoá cũng như tích hợp công cụ đang tích cực được phát triển. Nếu bạn có câu hỏi, nhận xét hoặc yêu cầu về tính năng, hãy liên hệ trên danh sách gửi thư av1-thảo luận, cộng đồng GitHub AOM và AVIF wiki.