Bạn đã từng xem ảnh GIF động trên một dịch vụ như Imgur hoặc Gfycat chưa? trong công cụ cho nhà phát triển, chỉ để phát hiện ra rằng GIF thực sự là một video? Có một đó là một lý do chính đáng. Ảnh GIF động có thể cực kỳ lớn.
Rất may, đây là một trong những khía cạnh hiệu suất tải mà bạn có thể làm tương đối ít công sức để đạt được lợi ích to lớn! Bằng cách chuyển đổi các ảnh GIF lớn thành bạn có thể tiết kiệm rất nhiều tiền .
Đ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 được thành video. Ngang bằng Công cụ cho nhà phát triển, nhấp vào thẻ Kiểm tra rồi đánh dấu vào hộp Hiệu suất. Sau đó chạy Lighthouse và kiểm tra báo cáo. Nếu có ảnh GIF có thể chuyển đổi được, bạn sẽ thấy nội dung đề xuất "Sử dụng các định dạng video cho nội dung động":
Tạo video MPEG
Có một số cách để chuyển đổi 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 hàm
sau đây 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
-i và để chuyển đổi video đó 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 đồng đều, chẳng hạn như 320px 240 px. Nếu ảnh GIF đầu vào có kích thước lạ, bạn có thể thêm bộ lọc cắt ảnh để tránh FFmpeg gửi 'chiều cao/chiều rộng không chia hết cho 2' lỗi:
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à một định dạng tệp tương đối mới 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 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 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 GIF và video có thể khá đáng kể.
Trong ví dụ này, ảnh GIF ban đầu có dung lượng là 3,7 MB so với phiên bản MP4 là 551 KB và phiên bản WebM, chỉ 341 KB!
Thay thế hình ảnh GIF bằng video
Ảnh GIF động có ba đặc điểm chính mà video cần tái hiện:
- Các 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 được tình trạng lặp lại).
- Họ 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></video>
Phần tử <video> có các thuộc tính này sẽ phát tự động, lặp lại liên tục,
không phát âm thanh và phát nội tuyến (tức là không phát toàn màn hình), tất cả các đặc điểm nổi bật
hành vi dự kiến của GIF động! 🎉
Cuối cùng, phần tử <video> cần có 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, nên hệ thống có thể quay lại định 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 nội dung lớn nhất hiển thị (LCP)
Xin lưu ý rằng mặc dù các phần tử <img> là ứng cử 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 viên LCP. Trong trường hợp mô phỏng GIF động, bạn 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, nhưng sau khi hiểu rằng những nội dung đa phương tiện như vậy sẽ không phải là ứng viên cho LCP và sẽ dùng ứng viên lớn nhất tiếp theo. Vì GIF và <video> thường lớn hơn và tải xuống chậm hơn, nên việc chuyển sang một đề xuất LCP khác có khả năng cải thiện LCP của trang web.