Bạn đã bao giờ nhìn thấy ảnh GIF động trên một dịch vụ như Imgur hoặc Gfycat, kiểm tra ảnh này trong các công cụ cho nhà phát triển của bạn và chỉ để phát hiện ra rằng GIF thực sự là một video chưa? Có lý do chính đáng cho điều đó. GIF động có thể rất rất lớn.
Rất may, đây là một trong những khía cạnh của hiệu suất tải mà bạn có thể thực hiện tương đối ít công việc để nhận được những lợi ích lớn! Bằng cách chuyển đổi ảnh GIF lớn thành video, bạn có thể tiết kiệm lớn 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 để tìm những ảnh GIF có thể chuyển đổi thành video. Trong DevTools, hãy nhấp vào thẻ Inspections (Kiểm tra) rồi chọn hộp đánh dấu Performance (Hiệu suất). Sau đó, hãy chạy Lighthouse và kiểm tra báo cáo. Nếu có bất kỳ ảnh GIF nào có thể chuyển đổi, bạn sẽ thấy đề xuất "Sử dụng định dạng video cho nội dung độ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.
Để sử dụng FFmpeg nhằm chuyển đổi ảnh GIF, hãy my-animation.gif sang 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 -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p 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 rồi chuyển đổi dữ liệu đó thành video có tên my-animation.mp4.
Bộ mã hoá libx264 chỉ hoạt động với các tệp có kích thước bằng nhau, chẳng hạn như 320px x 240px. Nếu ảnh GIF đầu vào có kích thước lẻ, bạn có thể thêm bộ lọc cắt để tránh FFmpeg gửi 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 đã có từ năm 1999, nhưng WebM là đị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 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, việc tạo cả hai là hợp lý.
Để 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
So sánh sự khác biệt
Việ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 (551 KB) và phiên bản WebM chỉ có 341 KB!
Thay thế ảnh GIF bằng video
GIF động có 3 đặc điểm chính mà video cần tái tạo:
- Những video này sẽ tự động phát.
- Chúng lặp lại liên tục (thường là nhưng có thể tránh lặp lại).
- Chúng 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></video>
Phần tử <video> có các thuộc tính này sẽ tự động phát, lặp lại liên tục, không phát âm thanh và phát cùng dòng (tức là không phát toàn màn hình), tất cả các hành vi đặc trưng đáng mong đợi ở ảnh 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 để trình duyệt không hỗ trợ WebM, trình duyệt có thể quay lại dùng 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à ứng viên cho LCP, nhưng các phần tử <video> không có hình ảnh poster không phải là ứng cử viên LCP. Giải pháp trong trường hợp mô phỏng GIF động là không nên thêm thuộc tính poster vào các phần tử <video>, vì hình ảnh đó sẽ không được sử dụng.
Ảnh hưởng đối với trang web của bạn Bạn nên tiếp tục sử dụng <video> thay vì ảnh GIF động. Tuy nhiên, khi hiểu rằng các nội dung đa phương tiện đó sẽ không ứng cử viên cho LCP, ứng cử viên lớn nhất tiếp theo sẽ được sử dụng. Vì GIF và <video> thường lớn hơn và tốc độ tải xuống chậm hơn, nên việc chuyển sang một LCP khác có thể sẽ cải thiện LCP của trang web.