Mục Cơ hội của báo cáo Lighthouse liệt kê tất cả ảnh GIF động, cùng với mức tiết kiệm ước tính số giây đạt được bằng cách chuyển đổi các ảnh GIF này thành video:
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 cho người dùng. Hãy cân nhắc sử dụng video MPEG4/WebM cho ảnh động và PNG/WebP cho hình ảnh tĩnh thay vì GIF để lưu 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 của bạ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 dữ liệu này thành 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 tất cả trình duyệt đều hỗ trợ WebM, vì vậy, bạn nên tạo cả hai.
Để 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 của bạn:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Thay thế hình ảnh GIF bằng video
GIF động có ba đặc điểm chính mà video cần sao chép:
- Video sẽ tự động phát.
- Chúng lặp lại liên tục (thường nhưng có thể tránh lặp lại).
- Chúng sẽ im lặng.
Thật may là bạn có thể tạo lại những 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>
Hãy sử dụng một 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 của hình ảnh và CDN hình ảnh sẽ trả về 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 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.