Cách chuyển ảnh sang Base64
- Kéo thả ảnh vào ô, nhấp để chọn ảnh hoặc dán từ bộ nhớ tạm bằng Ctrl+V.
- Chọn định dạng đầu ra: data URI, Base64 thuần, HTML, CSS, Markdown hoặc JSON.
- Nhấn Sao chép rồi dán mã vào HTML, CSS, mẫu email hoặc request API của bạn.
Khi nào nên nhúng ảnh dạng Base64?
Ảnh Base64 nhúng trực tiếp (inline) giúp tiết kiệm một HTTP request, rất hữu ích cho icon nhỏ, chữ ký email, tài liệu HTML chỉ gồm một file và dữ liệu gửi qua API. Vì Base64 lớn hơn file gốc khoảng 33% và không thể được cache riêng, hãy dùng file ảnh thông thường cho ảnh chụp và mọi ảnh lớn hơn vài kilobyte.
Giải thích các định dạng đầu ra
- Data URI –
data:image/png;base64,…dùng cho thuộc tínhsrcvà CSS. - Chỉ chuỗi Base64 – chuỗi thuần dành cho API và cơ sở dữ liệu.
- HTML / CSS / Markdown – đoạn mã hoàn chỉnh, dán vào là dùng được ngay.
- JSON – tên file, kiểu MIME và dữ liệu trong cùng một đối tượng.
Câu hỏi thường gặp
Chuyển sang Base64 có làm ảnh nặng hơn không?
Có, nặng hơn khoảng một phần ba. Một ảnh PNG 30 KB sẽ thành khoảng 40 KB văn bản Base64. Nếu dung lượng là yếu tố quan trọng, hãy nén hoặc giảm kích thước ảnh trước.
Có thể chuyển những định dạng ảnh nào?
Mọi định dạng mà trình duyệt của bạn mở được: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF và nhiều định dạng khác. Kiểu MIME chính xác được tự động thêm vào data URI.
Làm sao dùng ảnh Base64 trong CSS?
Chọn định dạng CSS và dán kết quả vào quy tắc CSS của bạn, ví dụ .logo { background-image: url("data:image/png;base64,…"); }.