Mục Cơ hội trong 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 (tính bằng giây) đạt được bằng cách chuyển đổi những ả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 dùng trong hướng dẫn này.
Để dùng FFmpeg chuyển đổi GIF my-animation.gif sang video MP4, hãy chạy lệnh sau trong bảng điều khiển:
ffmpeg -i my-animation.gif my-animation.mp4
Lệnh này yêu cầu FFmpeg lấy my-animation.gif làm đầu vào, được biểu thị bằng cờ -i và chuyển đổi đầu vào đó thành một video có tên là my-animation.mp4.
Tạo video WebM
Video WebM có kích thước 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.
Để 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ó 3 đặc điểm chính mà video cần sao chép:
- Các video này sẽ tự động phát.
- Chúng lặp lại liên tục (thường là 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 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 một dịch vụ chuyển đổi ảnh GIF thành video HTML5
Nhiều CDN hình ảnh hỗ trợ việc chuyển đổi GIF sang video HTML5. Bạn tải một GIF lên CDN hình ảnh và CDN hình ảnh sẽ trả về một video HTML5.
Hướng dẫn cụ thể theo ngăn xếp
AMP
Đối với nội dung độ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ể giúp bạn nhúng ảnh đó ở dạng video.