Bạn đã bao giờ thấy một ảnh GIF động trên một dịch vụ như Imgur hoặc Gfycat, kiểm tra ảnh đó trong các công cụ dành cho nhà phát triển và chỉ phát hiện ra rằng ảnh GIF đó thực sự là một video chưa? Có một lý do chính đáng cho việc đó. Ảnh GIF động có thể có kích thước rất lớn.
Rất may, đây là một trong những khía cạnh về hiệu suất tải mà bạn có thể thực hiện tương đối ít việc để đạt được lợi ích to lớn! Bằng cách chuyển đổi ảnh GIF lớn sang video, bạn có thể tiết kiệm đáng kể băng thông của người dùng.
Đo lường trước
Sử dụng Lighthouse để kiểm tra trang web của bạn xem có ảnh GIF nào có thể chuyển đổi thành video hay không. Trong Công cụ cho nhà phát triển, hãy nhấp vào thẻ Kiểm tra rồi đánh dấu vào hộp Hiệu suất. Sau đó, hãy chạy Lighthouse và kiểm tra báo cáo. Nếu có GIF có thể chuyển đổi, bạn sẽ thấy một đề xuất "Sử dụng định dạng video cho nội dung động":
Tạo video MPEG
Có nhiều 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 -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p 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 thành một video có tên là my-animation.mp4.
Bộ mã hoá libx264 chỉ hoạt động với những tệp có kích thước chẵn, chẳng hạn như 320px x 240px. Nếu GIF đầu vào có kích thước lẻ, bạn có thể thêm bộ lọc cắt để tránh FFmpeg đưa ra lỗi "chiều cao/chiều rộng không chia hết cho 2":
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Tạo video WebM
Mặc dù MP4 đã xuất hiện từ năm 1999, nhưng WebM là một định dạng tệp tương đối mới, được phát hành lần đầu vào năm 2010. 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 nên việc tạo cả hai là hợp lý.
Để dùng FFmpeg chuyển đổi my-animation.gif sang 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
So sánh sự khác biệt
Mức tiết kiệm chi phí giữa ảnh GIF và video có thể khá đáng kể.
Trong ví dụ này, ảnh GIF ban đầu có kích thước 3,7 MB, so với phiên bản MP4 có kích thước 551 KB và phiên bản WebM chỉ có 341 KB!
Thay thế thẻ img GIF bằng một 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></video>
Một phần tử <video> có các thuộc tính này sẽ tự động phát, lặp lại vô tận, không phát âm thanh và phát nội tuyến (tức là không ở chế độ toàn màn hình), tất cả các hành vi đặc trưng dự kiến của GIF động! 🎉
Cuối cùng, phần tử <video> yêu cầu một hoặc nhiều phần tử con <source> trỏ đến các tệp video khác nhau mà trình duyệt có thể chọn, tuỳ thuộc vào khả năng hỗ trợ định dạng của trình duyệt. Cung cấp cả WebM và MP4 để nếu trình duyệt không hỗ trợ WebM, thì trình duyệt đó có thể chuyển về MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Ảnh hưởng đến Thời gian hiển thị nội dung lớn nhất (LCP)
Xin lưu ý rằng mặc dù các phần tử <img> là các thành phần có thể là LCP, nhưng các phần tử <video> không có poster hình ảnh không phải là các thành phần có thể là LCP. Giải pháp trong trường hợp mô phỏng ảnh GIF động là không thêm thuộc tính poster vào các phần tử <video>, vì hình ảnh đó sẽ không được dùng.
Điều này có ý nghĩa gì đối với trang web của bạn? Bạn nên sử dụng <video> thay vì ảnh GIF động, nhưng cần hiểu rằng loại nội dung nghe nhìn này sẽ không phải là ứng cử viên cho LCP và thay vào đó, ứng cử viên lớn nhất tiếp theo sẽ được sử dụng. Vì ảnh GIF và <video> thường có kích thước lớn hơn và do đó tải xuống chậm hơn, nên việc chuyển sang một ứng cử viên LCP khác có thể sẽ cải thiện LCP của trang web.