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. Sử dụng AVIF, bạn có thể giảm kích thước hình ảnh và làm cho trang web tải nhanh hơn.

AVIF là gì?

AVIF là một định dạng hình ảnh mới bắt nguồn từ bit video AV1. AVIF được thiết kế để mang lại hiệu quả nén.

Tại sao nên sử 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ó 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 có định dạng AVIF từ ảnh của bạn
• Cách kết xuất hình ảnh AVIF trong một trang web

Bạn cần có

• Chrome phiên bản 85 trở lên
• Trình chỉnh sửa văn bản
• cmake
• git
• nhân viên hỗ trợ
• Một hình ảnh. Tôi đã cung cấp một báo cáo 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 ảnh thành hình ảnh AVIF.

1. Mở https://squoosh.app
2. Thả hình ảnh cục bộ vào Squoosh.

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

Sau đó, Squoosh sẽ nén hình ảnh của bạn thành một hình ảnh AVIF. Sau khi hoàn tất, Squoosh sẽ hiển thị nút tải xuống cùng với một vài 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 ổ cục bộ của bạn.

Bạn có thể xem hình ảnh AVIF của mình 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. Xây dựng 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 bạn có nhiều hình ảnh muốn chuyển đổi sang AVIF thì sử dụng bộ mã hoá dòng lệnh, avifenc, có lẽ là một lựa chọn tốt.

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. Bạn có thể tìm thêm thông tin tại libavif. Chúng ta sẽ xây dựng avifenc để nó được 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 sang thư mục tiện ích 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. 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Xây dựng avifenc.

make

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

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

1. Tạo hình ả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 example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a Độ sắc nét=3 -y 420" là các chế độ cài đặt nên dùng cho hình ảnh 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ờ bạn đã có hình ảnh AVIF thứ hai của riêng mình!

2. Tôi đang tăng tốc cho bộ mã hoá.

Một tham số có thể phù hợp để 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 dòng lệnh này.

./avifenc happy_dog.jpg example.avif --jobs 8

Thao tác này sẽ yêu cầu avifenc sử dụng 8 luồng khi tạo hình ảnh AVIF. Trên máy của tôi, tốc độ mã hoá AVIF tăng lên gấp 5 lần.

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

Bây giờ, hãy cho cả thế giới biết tất cả nỗ lực của bạn.

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

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 và nhập mã này:

<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 thư mục với avif_example.html.

Chúng ta sẽ sử dụng phần tử để kết xuất hình ảnh AVIF nếu trình duyệt hỗ trợ AVIF và kết xuất hình ảnh dự phòng cho 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ề tại đây.

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

Bây giờ, hình ảnh AVIF của bạn sẽ được kết xuất trong Chrome. Bạn có thể kiểm tra điều này 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

1. Chuyển đổi nội dung đa phương tiện nguồ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 tuyệt vời để tạo tệp y4m là sử dụng FFmpeg.

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

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

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

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. Đây là tệp lấy từ Xiph.org Video Test Media (Phương tiện kiểm tra video Xiph.org).

Chạy lệnh này để tạo 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 của riêng mình!

3. Kết xuất hình ảnh AVIF động trên một trang web.

Tạo một tệp có tên 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.

Lưu ý rằng tệp gif lớn hơn khoảng 35 lần và chất lượng kém hơn nhiều.

Mở avif_animated_example.html trong trình chỉnh sửa văn bản và nhập mã này:

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

Bây giờ, hình ảnh AVIF động của bạn sẽ được kết xuất trong Chrome.

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

Ngoại trừ ảnh 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 bằng cách nhấp chuột phải vào hình ảnh đó và 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. Xin chúc mừng!

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

Hy vọng bạn đã hiểu rõ cách AVIF có thể giúp làm cho hình ảnh của bạn nhỏ hơn và truyền qua web hiệu quả hơn. 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.