Công cụ chuyển ảnh sang Base64 (Data URI)

Ảnh sang Base64 là gì?

Công cụ này mã hóa file ảnh thành Base64 để nhúng trực tiếp vào HTML, CSS, JSON hoặc Markdown. Nó xuất data URI đầy đủ (data:image/png;base64,…), chuỗi Base64 thô, và các đoạn mã <img>, CSS background-image và Markdown sẵn sàng sao chép, kèm kích thước ảnh và phần dung lượng tăng thêm do Base64.

Cách sử dụng Ảnh sang Base64

1. Thả, chọn hoặc dán ảnh (PNG, JPEG, GIF, WebP, SVG, ICO…).
2. Xem định dạng được phát hiện, kích thước ảnh, dung lượng file và độ dài data URI.
3. Bấm Sao chép bên cạnh biến thể bạn cần: data URI, Base64 thô, đoạn HTML, CSS background hoặc Markdown.

Ví dụ

PNG 30×30 tô màu #3366CC (99 byte)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC

Khi nào nên dùng Ảnh sang Base64

Nhúng trực tiếp ảnh rất nhỏ như icon, logo nhỏ hoặc ảnh giữ chỗ để tiết kiệm một request HTTP, nhúng ảnh vào HTML một file, email hoặc API JSON, hay vào CSS cần tự chứa. Tránh dùng cho ảnh lớn hơn khoảng 20 KB: chúng làm phình HTML/CSS và không được cache riêng.

Ảnh sang Base64 hoạt động như thế nào

Các byte của file được đọc bằng File.arrayBuffer(), định dạng thật được nhận diện từ magic bytes (ví dụ 89 50 4E 47 cho PNG) thay vì tin vào phần mở rộng, và các byte được mã hóa Base64 bằng btoa. Data URI có dạng data:<mime>;base64,<base64>. Base64 biểu diễn mỗi 3 byte bằng 4 ký tự, nên văn bản lớn hơn file khoảng 33%.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Nhúng một icon nhỏ trực tiếp vào file CSS.
• ✓ Đưa logo vào mẫu email HTML hoặc trang một file dùng offline.
• ✓ Gửi ảnh bên trong payload JSON tới API.
• ✓ Viết tài liệu Markdown hoặc Jupyter tự chứa.

Câu Hỏi Thường Gặp

Khám phá thêm danh mục