Mục Cơ hội trong danh sách báo cáo Lighthouse tất cả ảnh GIF động, cùng với thời gian tiết kiệm ước tính tính bằng giây bạn đạ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 có 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 nhiều thời gian băng thô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 để 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 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 đó thành một video có tên là 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:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Thay thế hình ảnh GIF bằng video
Ảnh GIF động có 3 đặc điểm chính mà video cần mô phỏng:
- 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 sang video HTML5
Nhiều CDN hình ảnh hỗ trợ chuyển đổi video GIF sang HTML5. Bạn tải một GIF vào CDN của 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 hoạt ảnh, hãy sử dụng
amp-anim để giảm thiểu CPU
khi nội dung nằm ngoài màn hình.