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:
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 đá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 dữ liệu 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 ảnh 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 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 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 của bạ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ó 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).
- Chúng im lặng.
Thật may là bạn có thể tạo lại những hành vi này bằng cách sử dụ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 ảnh GIF lên CDN hình ảnh và CDN hình ảnh sẽ 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.