Cung cấp hình ảnh AVIF

1. Giới thiệu

Hình ảnh chiếm hơn 60% số byte trung bình cần thiết để tải một trang web. Khi sử dụng AVIF, bạn có thể giảm kích thước hình ảnh và tăng tốc độ tải trang web.

AVIF là gì?

AVIF là một định dạng hình ảnh bắt nguồn từ luồng bit video AV1. AVIF được tạo ra để có hiệu quả nén cao.

Tại sao nên dùng AVIF?

Hình ảnh AVIF có kích thước nhỏ hơn nhiều so với hình ảnh JPEG, PNG, GIF hoặc WebP có chất lượng tương đương hoặc cao hơn.

Kiến thức bạn sẽ học được

Cách tạo hình ảnh AVIF từ hình ảnh của bạn
Cách hiển thị hình ảnh AVIF trong trang web

Bạn cần có

Bất kỳ trình duyệt chính nào.
Trình chỉnh sửa văn bản
cmake
git
ninja
Một hình ảnh. Tôi đã cung cấp một ví dụ tại đây
FFmpeg

2. Tạo hình ảnh AVIF bằng Squoosh

Squoosh là một ứng dụng web nén hình ảnh. Với squoosh, bạn có thể dễ dàng nén hình ảnh thành hình ảnh AVIF.

Mở https://squoosh.app
Thả một hình ảnh trên thiết bị vào Squoosh.

Ảnh chụp màn hình Squoosh

Chọn AVIF trong hộp thả xuống Nén.

Hộp thả xuống Squoosh

Sau đó, Squoosh sẽ nén hình ảnh của bạn thành hình ảnh AVIF. Sau khi hoàn tất, Squoosh sẽ hiện nút tải xuống cùng một số số liệu thống kê về hình ảnh AVIF ở góc dưới cùng bên phải.

Nút tải xuống của Squoosh

Hình ảnh mẫu ban đầu có kích thước 3340 kB và hình ảnh nén có kích thước 378 kB. Hình ảnh mẫu được nén nhỏ hơn gần 10 lần so với hình ảnh gốc!

Tải hình ảnh AVIF xuống

Nhấp vào nút tải xuống và hình ảnh AVIF sẽ được lưu vào ổ đĩa cục bộ của bạn.

Giờ đây, bạn đã có hình ảnh AVIF của riêng mình!

3. Tạo bộ mã hoá dòng lệnh avifenc

avifenc là một ứng dụng dòng lệnh có thể chuyển đổi hình ảnh PNG và JPEG thành hình ảnh AVIF. avifenc sử dụng libavif, là một thư viện có thể giải mã và mã hoá hình ảnh AVIF. Nếu có nhiều hình ảnh cần chuyển đổi sang định dạng AVIF, thì việc sử dụng bộ mã hoá dòng lệnh avifenc có lẽ là một lựa chọn phù hợp.

Lấy mã.

git clone https://github.com/AOMediaCodec/libavif.git

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 có thể tìm thêm thông tin tại libavif. Chúng ta sẽ tạo avifenc để liên kết tĩnh với bộ mã hoá libaom, bộ giải mã dav1d và các thư viện xử lý libyuv.

Tạo công cụ mã hoá dòng lệnh, avifenc.

Bạn nên tạo một thư mục bản dựng cho avifenc.

mkdir build

Thay đổi thành thư mục bản dựng.

cd build

Tạo các tệp bản dựng cho avifenc.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Tạo avifenc.

make

Bạn đã tạo thành công avifenc!

4. Tạo hình ảnh AVIF bằng avifenc

Tạo hình ảnh AVIF bằng chế độ cài đặt mặc định.

Các tham số cơ bản nhất để chạy avifenc là thiết lập tệp đầu vào và đầu ra.

./avifenc happy_dog.jpg example.avif

Giờ đây, bạn đã có hình ảnh AVIF thứ hai của riêng mình!

Thay đổi chất lượng mã hoá AVIF.

Thông thường, tham số duy nhất mà bạn có thể muốn thay đổi khi mã hoá AVIF là tham số quality. quality là một tham số đánh đổi chất lượng của hình ảnh nén để lấy kích thước của tệp. Ví dụ: Tệp có chất lượng cao (-q 90) sẽ lớn hơn nhiều so với tệp có chất lượng thấp (-q 20), nhưng tệp có chất lượng cao sẽ trông đẹp hơn nhiều.

5. Kết xuất hình ảnh AVIF trong một trang web.

Giờ là lúc bạn thể hiện thành quả của mình với mọi người.

Tạo một trang web để phân phát hình ảnh AVIF.

Tạo một tệp có tên là avif_example.html.

Mở avif_example.html trong trình soạn thảo văn bản rồi nhập mã sau:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Sao chép tệp nguồn (trong trường hợp của tôi là happy_dog.jpg) và tệp AVIF (eaxmple.avif) vào cùng một thư mục với avif_example.html.

Chúng tôi đang sử dụng phần tử picture để hiển thị hình ảnh AVIF nếu trình duyệt hỗ trợ AVIF, với lựa chọn dự phòng là JPEG nếu trình duyệt không hỗ trợ. Bạn có thể tìm hiểu thêm thông tin về phần tử picture tại đây.

Mở trang web trong Chrome.

Một cách để mở tệp HTML là kéo avif_example.html vào Chrome. Một cách khác để mở tệp html là phân phát avif_example.html từ một máy chủ HTTP.

Giờ đây, hình ảnh AVIF của bạn sẽ được kết xuất trong Chrome. Bạn có thể kiểm thử bằng cách nhấp chuột phải vào hình ảnh rồi chọn Save image as.... Thao tác này sẽ mở ra một hộp thoại có example.avif. Một lựa chọn khác là mở Công cụ cho nhà phát triển Chrome và xem example.avif đã được tải xuống.

6. Tạo ảnh AVIF động bằng FFmpeg

Tạo ảnh AVIF động.

Chạy lệnh này để tạo một hình ảnh AVIF động từ tệp y4m.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Giờ đây, bạn đã có hình ảnh AVIF động của riêng mình!

Kết xuất hình ảnh AVIF động trong một trang web.

Tạo một tệp có tên là avif_animated_example.html.

Mở avif_animated_example.html trong trình soạn thảo văn bản rồi nhập mã sau:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Sao chép tệp nguồn (trong trường hợp trên là ice_qcif_15fps.gif) và tệp AVIF (animated.avif) vào cùng một thư mục với avif_animated_example.html.

Mở trang web trong Chrome.

Một cách để mở tệp HTML là kéo avif_animated_example.html vào Chrome. Một cách khác để mở tệp html là phân phát avif_animated_example.html từ một máy chủ HTTP.

Giờ đây, hình ảnh AVIF có hiệu ứng động của bạn sẽ được kết xuất trong Chrome.

Nếu bạn sử dụng nội dung nghe nhìn mẫu được cung cấp, thì nội dung đó sẽ có dạng như sau:

Sân trượt băng dạng ảnh động

Bạn có thể kiểm tra xem đây có phải là hình ảnh AVIF động hay không bằng cách nhấp chuột phải vào hình ảnh rồi chọn Save image as.... Thao tác này sẽ mở ra một hộp thoại có animated.avif. Một lựa chọn khác là mở Công cụ cho nhà phát triển Chrome và xem animated.avif đã được tải xuống.

7. Tạo hình ảnh AVIF động bằng avifenc

Chuyển đổi tệp nguồn đa phương tiện sang định dạng y4m.

avifenc hỗ trợ y4m làm dữ liệu đầu vào để tạo hình ảnh AVIF động. Một lựa chọn hữu ích để tạo tệp y4m là sử dụng FFmpeg.

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

Tạo ảnh AVIF động.

Chạy lệnh này để tạo một hình ảnh AVIF động từ tệp y4m.

./avifenc ice_qcif_15fps.y4m animated.avif

Giờ đây, bạn đã có hình ảnh AVIF động thứ hai của riêng mình!

Kết xuất hình ảnh AVIF động trong một trang web.

Tạo một tệp có tên là avif_animated_example.html.

Mở avif_animated_example.html trong trình soạn thảo văn bản rồi nhập mã sau:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Sao chép tệp nguồn (trong trường hợp trên là ice_qcif_15fps.gif) và tệp AVIF (animated.avif) vào cùng một thư mục với avif_animated_example.html.

Mở trang web trong Chrome.

Một cách để mở tệp HTML là kéo avif_animated_example.html vào Chrome. Một cách khác để mở tệp html là phân phát avif_animated_example.html từ một máy chủ HTTP.

Giờ đây, hình ảnh AVIF có hiệu ứng động của bạn sẽ được kết xuất trong Chrome.

Nếu bạn sử dụng nội dung nghe nhìn mẫu được cung cấp, thì nội dung đó sẽ có dạng như sau:

Sân trượt băng dạng ảnh động

Thay đổi chất lượng mã hoá AVIF.

Tệp ice_qcif_15fps.gif lớn hơn khoảng 7 lần và có chất lượng kém hơn nhiều. Bạn có thể thay đổi chất lượng của AVIF để gần giống với chất lượng của ice_qcif_15fps.gif bằng cách thay đổi tham số chất lượng thành 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Giờ đây, tệp AVIF động và ice_qcif_15fps.gif có chất lượng gần như nhau, nhưng tệp GIF lớn hơn khoảng 22 lần.

8. Xin chúc mừng!

Bạn đã hoàn tất lớp học lập trình về việc phân phát hình ảnh AVIF!

Hy vọng bạn đã hiểu rõ cách AVIF có thể giúp hình ảnh của bạn nhỏ hơn và truyền tải hiệu quả hơn trên web. Bạn có thể tìm hiểu thêm về các tính năng của AVIF trong một bài đăng tuyệt vời của Jake Archibald.