Sử dụng các định dạng video cho nội dung động

Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả ảnh GIF động, cùng với thời lượng ước tính mà bạn có thể tiết kiệm được (tính bằng giây) khi chuyển đổi các ảnh GIF này thành video:

Ảnh chụp màn hình Lighthouse sử dụng định dạng video để kiểm tra nội dung động

Lý do bạn nên thay thế ảnh GIF động bằng video

Ảnh GIF lớn không hiệu quả trong việc phân phối nội dung động. Bằng cách chuyển đổi ảnh GIF lớn thành video, bạn có thể tiết kiệm đáng kể băng thông của người dùng. Hãy cân nhắc sử dụng video MPEG4/WebM cho ảnh động và PNG/WebP cho ảnh tĩnh thay vì ảnh GIF để tiết kiệm byte mạng.

Tạo video MPEG

Có một số cách để chuyển đổi ảnh GIF thành video. FFmpeg là công cụ được sử dụng trong hướng dẫn này. Để sử dụng FFmpeg nhằm chuyển đổi tệp GIF, my-animation.gif thành video MP4, hãy chạy lệnh sau trong bảng điều khiển:

ffmpeg -i my-animation.gif my-animation.mp4

Thao tác này sẽ yêu cầu FFmpeg lấy my-animation.gif làm dữ liệu đầu vào, được biểu thị bằng cờ -i và chuyển đổi thành một video có tên my-animation.mp4.

Tạo video WebM

Video WebM nhỏ hơn nhiều so với video MP4, nhưng không phải trình duyệt nào cũng hỗ trợ WebM. Vì vậy, bạn nên tạo cả hai định dạng.

Để sử dụng FFmpeg nhằm chuyển đổi my-animation.gif thành video WebM, hãy chạy lệnh sau trong bảng điều khiển:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Thay thế ảnh GIF bằng video

Ảnh GIF động có ba đặc điểm chính mà video cần tái hiện:

  • Các video này sẽ tự động phát.
  • Các vòng lặp này lặp lại liên tục (thường là như vậy, nhưng bạn có thể ngăn chặn việc lặp lại).
  • Họ im lặng.

May mắn là bạn có thể tạo lại các hành vi này bằng phần tử <video>.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

Sử dụng dịch vụ chuyển đổi ảnh GIF thành video HTML5

Nhiều CDN hình ảnh hỗ trợ chuyển đổi video GIF sang HTML5. Bạn tải ảnh GIF lên CDN hình ảnh và CDN hình ảnh trả về một video HTML5.

Hướng dẫn dành riêng cho ngăn xếp

AMP

Đối với nội dung ảnh động, hãy sử dụng amp-anim để giảm thiểu mức sử dụng CPU khi nội dung nằm ngoài màn hình.

Drupal

Hãy cân nhắc tải ảnh GIF lên một dịch vụ có thể nhúng ảnh đó ở dạng video.

Tài nguyên