Cách sử dụng
- Thả tệp GIF vào vùng thả, nhấp để chọn tệp hoặc dán ảnh.
- Chọn Giữ định dạng gốc và để Chiều rộng tối đa ở Kích thước gốc để giữ lại ảnh động.
- Kiểm tra dung lượng gốc và dung lượng sau mã hóa; GIF động tăng kích thước rất nhanh.
- Sao chép đầu ra thẻ img hoặc CSS background-image, hoặc lấy phiên bản data URI, Base64 thuần hay Markdown.
Về định dạng GIF
GIF (Graphics Interchange Format, kiểu MIME image/gif) ra đời từ năm 1987. Mỗi khung hình dùng bảng màu tối đa 256 màu, được nén không mất dữ liệu bằng LZW. Độ trong suốt chỉ có hai trạng thái: một màu trong bảng có thể được đánh dấu là trong suốt, nhưng không có độ mờ một phần. Một tệp có thể chứa nhiều khung hình với thời gian trễ riêng và số lần lặp, đó là lý do GIF trở thành định dạng của các đoạn ảnh động ngắn.
Chuỗi Base64 của GIF bắt đầu bằng R0lGODlh với phiên bản GIF89a phổ biến, hoặc R0lGODdh với phiên bản GIF87a cũ hơn.
Giữ lại ảnh động
Khi bạn giữ định dạng gốc, công cụ mã hóa nguyên các byte của tệp. Vì vậy data URI chuyển động y hệt tệp gốc, dù bạn dùng nó trong thẻ <img> hay làm nền CSS.
Việc chuyển sang PNG, JPEG hoặc WebP, hay đặt chiều rộng tối đa, sẽ vẽ lại ảnh trong trình duyệt, và chỉ khung hình đầu tiên được giữ lại. Điều này hữu ích khi bạn muốn một ảnh xem trước tĩnh của ảnh động, còn nếu cần bản động thì hãy tắt cả hai tùy chọn.
Khi nào data URI GIF vẫn hợp lý
- Biểu tượng tải xoay vòng nhỏ và biểu tượng trạng thái động trong CSS.
- Điểm ảnh trong suốt 1x1 kinh điển, dùng làm
srcgiữ chỗ. Nó chỉ chiếm vài chục byte và chưa tới 100 ký tự Base64. - Hình vẽ nét đơn giản với ít màu, khi đó GIF rất gọn.
Ảnh động lớn thì không phù hợp. Một ảnh GIF phản ứng 2 MB biến thành khoảng 2,7 MB văn bản không thể lưu đệm riêng; một tệp video lưu trên máy chủ hoặc WebP động nhẹ hơn nhiều.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Câu hỏi thường gặp
GIF của tôi có còn chuyển động sau khi mã hóa Base64 không?
Có, miễn là bạn giữ định dạng gốc và không thay đổi kích thước. Base64 lưu toàn bộ tệp, bao gồm mọi khung hình và thiết lập lặp lại.
Vì sao GIF của tôi ngừng chuyển động sau khi chuyển đổi?
Khi chuyển sang PNG, JPEG hoặc WebP, hoặc khi thay đổi kích thước, ảnh được vẽ lại từ khung hình đầu tiên. Công cụ không tạo được tệp PNG hay WebP động, nên hãy giữ GIF gốc nếu muốn giữ chuyển động.