Ảnh sang Base64

Cách sử dụng

1. Kéo thả một ảnh, hoặc chọn tệp. Ảnh được đọc trên máy bạn và không bị tải lên.
2. Sao chép data URI, hoặc dạng HTML, CSS, Markdown đã dựng sẵn.
3. Chú ý dung lượng: base64 làm ảnh lớn hơn khoảng một phần ba.
4. Muốn làm ngược lại, hãy dán data URI và tải về ảnh bên trong.

Tính năng

• Loại tệp được đọc từ chính các byte, không dựa vào tên tệp.
• Có sẵn dạng HTML, CSS và Markdown để dán, không chỉ chuỗi thô.
• Hiển thị dung lượng sau mã hóa cạnh dung lượng gốc, để thấy rõ cái giá phải trả.
• Giải mã data URI trở lại thành ảnh tải về được.
• Chạy hoàn toàn trong trình duyệt.

Câu hỏi thường gặp

Vì sao phải nhận diện loại tệp thay vì lấy theo tên?

Vì tên tệp có thể sai. Một ảnh chụp màn hình đổi tên thành .png nhưng thực chất là JPEG rất hay gặp, và data URI mang sai loại media sẽ không hiển thị — mà không báo lỗi gì. Các byte đầu của tệp ảnh do định dạng quy định nên chúng mới là căn cứ. Khi chúng khác với phần đuôi tệp, công cụ sẽ nói rõ.

Vì sao chuỗi base64 lớn hơn tệp gốc?

Base64 gói ba byte thành bốn ký tự, nên kết quả lớn hơn khoảng 33%, cộng thêm phần tiền tố data:. Đó là sự đánh đổi: bạn bớt được một request HTTP và trả giá bằng dung lượng trên mọi trang có chứa ảnh đó.

Có nên nhúng ảnh theo cách này không?

Với ảnh nhỏ và luôn cần đến — một biểu tượng, một dải màu 1px — thì thường là nên. Với ảnh cỡ lớn thì thường là không: ảnh nhúng không được lưu đệm riêng nên bị tải lại cùng mọi trang chứa nó, và làm chậm chính tệp HTML hay CSS bao quanh. Khoảng từ 100 KB trở lên, request mà bạn tránh được còn rẻ hơn số byte bạn thêm vào.

Ảnh của tôi có bị tải lên không?

Không. Tệp được đọc và mã hóa ngay trong trang, nhờ vậy an toàn với cả ảnh chụp màn hình chứa nội dung riêng tư.

Công cụ liên quan