Chúng tôi thường xuyên viết về vấn đề cồng kềnh trên các trang web dựa trên hình ảnh, và các công cụ như Lighthouse đánh dấu khi hình ảnh tải 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 khỏi các tài nguyên quan trọng hơn. 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 của hình ảnh. 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ề các đ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 bao gồm hướng dẫn 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 Liên minh for Open Media chuẩn hoá. AVIF mang lại 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 bên khác đều nhận thấy mức tiết kiệm hơn 50% so với JPEG.
Ngoài ra, AVIF thêm tính năng hỗ trợ bộ mã hoá và vùng chứa cho hình ảnh mới như Dải động cao và gam màu rộng, tổng hợp hạt phim cũng như giải mã tăng dần.
Tính năng mới
Kể từ khi hỗ trợ định dạng AVIF trong Chrome M85, khả năng hỗ trợ của AVIF trong hệ sinh thái nguồn mở đã được cải thiện trên một số mặt.
Libaom
Libaom là một bộ mã hoá và giải mã AV1 nguồn mở được các công ty trong Alliance for Open Media duy trì, đồng thời đượ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 thêm tính năng hỗ trợ AVIF) và bản phát hành 3.1.0 gần đây, chúng tôi đã 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 phương thức mã hoá đa luồng và mã hoá dạng ô.
- Giảm 5 lần mức sử dụng bộ nhớ.
- Giảm 6,5 lần mức sử dụng CPU, như thể hiện trong biểu đồ dưới đây.
Những thay đổi này giúp giảm đáng kể chi phí mã hoá AVIF – đặc biệt là 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 tính năng mã hoá có tăng tốc phần cứng của AV1 có nhiều hơn trên các máy chủ và dịch vụ đám mây, nên chi phí tạo hình ảnh AVIF sẽ tiếp tục giảm.
Libavif
Libavif, cách 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 nghệ này với libaom để tạo hình ảnh AVIF từ các hình ảnh không nén hiện có hoặc chuyển mã từ các hình ảnh web hiện có (JPEG, PNG, v.v.).
Gần đây, Libavif đã thêm 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 nâng cao hơn của bộ mã hoá libaom. Các hoạt động tối ưu hoá trong quy trình xử lý, chẳng hạn như chuyển đổi nhanh YUV sang RGB bằng libyuv và hỗ trợ alpha được nhân tiền trước giúp đẩy nhanh quá trình giải mã. Cuối cùng, tính năng hỗ trợ cho chế độ mã hoá toàn bộ nội bộ mới được thêm vào libaom 3.1.0 mang đến tất cả những điểm cải tiến của libaom nêu trên.
Mã hoá hình ảnh AVIF bằng avifenc
Cách nhanh chóng để thử nghiệm AVIF là Squoosh.app. Squoosh chạy một 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. Ngoài ra, còn có phiên bản CLI của Squoosh dành cho 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 ở tốc độ 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 một hướng dẫn sử dụng cùng một hình ảnh nguồn 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
- nhân viên hỗ trợ
Bạn cũng sẽ cần cài đặt các gói phát triển cho zlib, libpng và libjpeg. Các lệnh để 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 avifenc
1. Lấy mã
Xem 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. Bạn có thể tìm thêm thông tin tại libavif. Chúng tôi sẽ xây dựng avifenc để liên kết tĩnh với thư viện bộ mã hoá và bộ giải mã AV1, libaom.
3. Tải và xây dựng 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ẽ kéo mã nguồn libaom và tạo libaom tĩnh.
./aom.cmd
Thay đổi thư mục thành libavif.
cd ..
4. Tạo 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 avifenc.
make
Bạn đã tạo Avifenc thành công!
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 thành 0 |
| --tối đa 63 | Đặt bộ định lượng tối đa cho màu thành 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 |
| -a end-usage=q | Đặt chế độ kiểm soát tốc độ thành chế độ Chất lượng không đổi (Q) |
| -a cq-level=Q | Đặt mức lượng tử hoá cho cả màu và alpha thành Q |
| -a color:cq-level=Q | Đặt mức lượng tử hoá cho màu thành Q |
| -a alpha:cq-level=Q | Đặt mức lượng tử hoá cho alpha thành Q |
| -a-tune=ssim | Chỉnh cho SSIM (mặc định là chỉnh cho PSNR) |
| --công việc J | Sử dụng luồng worker J (mặc định: 1) |
| --tốc độ S | Đặt tốc độ bộ mã hóa từ 0-10 (chậm nhất-nhanh nhất. Mặc định: 6) |
Tuỳ chọn cấp cq đặt mức lượng tử hoá (0-63) để kiểm soát chất lượng của màu sắc hoặc alpha.
Tạo ảnh AVIF với các chế độ cài đặt mặc định
Các tham số cơ bản nhất để chạy avifenc là đặt tệp đầu vào và tệp đầu ra.
./avifenc happy_dog.jpg happy_dog.avif
Bạn nên dùng dòng lệnh sau để mã hoá hình ảnh, giả sử ở cấp độ lượng tử 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ó rất nhiều lựa chọn ảnh hưởng đến cả chất lượng và tốc độ.
Nếu muốn xem và tìm hiểu thêm về các lựa chọn, bạ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ố có thể thay đổi tuỳ thuộc vào số lượng lõi bạn có trên máy là tham số --jobs.
Thông số này đặt số lượng luồng mà avifenc sẽ sử dụng để tạo hình ảnh AVIF.
Hãy thử chạy lệnh này tại 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
Lệnh 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 lên khoảng 5 lần.
Ảnh hưởng đến nội dung lớn nhất hiển thị (LCP)
Hình ảnh là ứng cử viên phổ biến cho chỉ số Nội dung lớn nhất hiển thị (LCP). Một đề xuất phổ biến giúp cải thiện tốc độ tải của hình ảnh LCP là đảm bảo 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 sẽ cải thiện thời gian tải tài nguyên. Đây là một trong bốn giai đoạn chính cần nhắm mục tiêu 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 hóa hình ảnh, vì điều này tốn ít công sức hơn so với việc thiết lập quy trình tối ưu hóa hình ảnh trong quy trình xây dựng trang web hoặc sử dụng tệp nhị phân bộ mã hóa theo cách thủ công để tối ưu hóa hình ảnh theo cách thủ công. Tuy nhiên, đối với một số dự án, CDN của hình ảnh có thể gây hạn chế về mặt chi phí. Nếu đây là trường hợp của bạn, hãy xem xét các điều sau khi tối ưu hoá bằng bộ mã hoá avifenc:
- Làm quen với các lựa chọn mà bộ mã hoá cung cấp. Bạn có thể tiết kiệm được nhiều hơn trong khi vẫn giữ được đủ chất lượng ảnh 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 mã hoá có tổn hao và không tổn hao. Tuỳ thuộc vào nội dung của hình ảnh, một kiểu mã hoá có thể hoạt động tốt hơn kiểu mã hoá khác. Ví dụ: ảnh thường được phân phát dưới dạng JPEG có thể hoạt động hiệu quả nhất khi sử dụng phương thức 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 các hình ảnh có chứa các chi tiết đơn giản hoặc hình vẽ đường nét thường được phân phát dưới dạng PNG.
- Nếu sử dụng trình gói dịch vụ có sự hỗ trợ của cộng đồng dành cho imagemin, hãy cân nhắc sử dụng gói imagemin-avif để cho phép trình tạo 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ể thấy sự cải thiện về thời gian hiển thị 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ể có đượ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 cách sử dụng AVIF. Định dạng này vẫn còn tương đối mới và chúng tôi đang tích cực phát triển các biện pháp tối ưu hoá cũng như tích hợp công cụ. Nếu bạn có thắc mắc, bình luận hoặc yêu cầu về tính năng, hãy liên hệ qua danh sách gửi thư av1-discuss, cộng đồng AOM GitHub và AVIF wiki.