Chuyển ảnh sang Base64

Công cụ này làm gì

Công cụ này biến ảnh thành văn bản Base64 và một data URI sẵn sàng để dán. Data URI nhúng ảnh trực tiếp vào HTML, CSS, Markdown, JSON hoặc email, nên trang cần ít hơn một yêu cầu HTTP và đoạn mã hoạt động mà không cần lưu trữ tệp riêng. Nó cũng hoạt động theo chiều ngược lại: dán Base64 hoặc data URI để xem trước ảnh và tải xuống.

Cách sử dụng

1. Thả ảnh vào vùng thả, nhấn Chọn ảnh, hoặc nhấn Ví dụ để tải một logo SVG.
2. Bản xem trước hiển thị ảnh kèm loại, kích thước tệp, kích thước Base64 và kích thước ảnh.
3. Chọn định dạng Đầu ra:
   • Data URI: data:image/png;base64,…, cho thuộc tính src và JSON.
   • Chỉ Base64: chuỗi thuần, có thể ngắt dòng ở 76 ký tự để dùng kiểu MIME và PEM.
   • Nền CSS: một khai báo background-image: url("…"); hoàn chỉnh.
   • HTML <img>: một thẻ ảnh với data URI làm src.
   • Markdown: ![image](data:…).
4. Sao chép kết quả. Để giải mã, dán Base64 hoặc data URI vào ô đầu vào và nhấn Tải ảnh.

Ví dụ

Một ảnh PNG 2×1 điểm ảnh trở thành:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Dùng trong CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Khi nào nên nhúng ảnh trực tiếp

Nhúng trực tiếp có ích với những ảnh nhỏ, dùng thường xuyên như biểu tượng, nền nhỏ, biểu tượng đang tải và chữ ký email. Nó không phù hợp với ảnh chụp và đồ họa lớn: Base64 làm tăng kích thước khoảng một phần ba, ảnh không thể được cache riêng khỏi trang hoặc stylesheet, và nó làm chậm việc phân tích phần còn lại của tệp. Theo kinh nghiệm, hãy giữ ảnh nhúng dưới vài kilobyte. Với SVG, data URI mã hóa phần trăm (data:image/svg+xml,…) thường nhỏ hơn Base64, và công cụ chấp nhận cả hai.