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à giúp trang web tải nhanh hơn.

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 nhỏ hơn nhiều so với hình ảnh JPEG, PNG, GIF hoặc WebP có cùng chất lượng hoặc chất lượng tốt 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 kết xuất 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 tại đường liên kết nà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 có thể chuyển đổi hình ảnh của bạn thành hình ảnh AVIF.

1. Mở Squoosh.
2. Thả một hình ảnh cục bộ vào Squoosh.

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

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.

Hình ảnh mẫu ban đầu là 3340 kB và hình ảnh nén là 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!

4. 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.

Bạn có thể xem hình ảnh AVIF bằng cách kéo hình ảnh đó vào Chrome.

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 mà bạn muốn chuyển đổi sang 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.

Chrome sử dụng libavif để kết xuất hình ảnh AVIF.

1. Lấy mã.

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

libyuv rất quan trọng để tăng tốc hiệu suất của các lượt chuyển đổi màu.

3. 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 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

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

Các tham số cơ bản nhất để avifenc chạy 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!

2. 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 chất lượng cao (-q 90) sẽ lớn hơn nhiều so với tệp chất lượng thấp (-q 20), nhưng tệp chất lượng cao sẽ trông đẹp hơn nhiều.

avifenc có nhiều lựa chọn sẽ ảnh hưởng đến cả chất lượng và tốc độ. Nếu bạn muốn xem các tuỳ chọn và tìm hiểu thêm về các tuỳ chọn đó, chỉ cần chạy ./avifenc

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

Giờ là lúc cho cả thế giới thấy thành quả của bạn.

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

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

Mở avif_example.html trong trình chỉnh sửa 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 (example.avif) vào cùng 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 một phương án dự phòng là JPEG nếu trình duyệt không hỗ trợ. Tìm hiểu thêm về phần tử picture.

2. 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 hiển thị 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 hình ảnh AVIF động bằng FFmpeg

Việc cài đặt FFmpeg trên hệ thống nằm ngoài phạm vi của lớp học lập trình này. Để biết thêm thông tin về cách tải FFmpeg trên hệ thống của bạn, vui lòng xem tài liệu về FFmpeg.

Tôi đã tạo một tệp y4m để bạn sử dụng trong trường hợp bạn không có tệp nội dung nghe nhìn nguồn: ice_qcif_15fps.y4m. Tệp này thuộc Xiph.org Video Test Media.

Tệp Y4m không được nén nên có thể có kích thước rất lớn.

1. Tạo ảnh AVIF động.

Chạy lệnh này để tạo 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!

2. Hiển thị hình ảnh AVIF động trên một trang web.

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

Dưới đây là tệp GIF để bạn sử dụng trong trường hợp không có tệp nội dung nghe nhìn nguồn: ice_qcif_15fps.gif.

Mở avif_animated_example.html trong trình chỉnh sửa 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 thư mục với avif_animated_example.html.

3. 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á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:

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 cách 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 ảnh AVIF động bằng avifenc

1. Chuyển đổi nội dung nghe nhìn nguồn của bạ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 hay để tạo tệp y4m là sử dụng FFmpeg.

Tệp Y4m không được nén nên có thể rất lớn.

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

2. Tạo ảnh AVIF động.

Tôi đã tạo một tệp y4m để bạn sử dụng trong trường hợp bạn không có tệp nội dung nghe nhìn nguồn: ice_qcif_15fps.y4m. Tệp này thuộc Xiph.org Video Test Media.

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!

3. 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.

Tôi đã tạo một tệp gif để bạn sử dụng trong trường hợp bạn không có tệp nội dung nghe nhìn nguồn: ice_qcif_15fps.gif.

Mở avif_animated_example.html trong trình chỉnh sửa 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 thư mục với avif_animated_example.html.

4. 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áy chủ HTTP.

Giờ đây, hình ảnh AVIF độ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:

Ngoại trừ AVIF động, chất lượng tốt hơn nhiều.

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 cách khác là mở Công cụ cho nhà phát triển Chrome và xem animated.avif đã được tải xuống.

5. 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 khớp 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 tương đương 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 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 qua 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.