Cách dùng Ảnh sang Base64
- Trong tab Ảnh → Base64, kéo thả hoặc chọn một ảnh. Ảnh được đọc cục bộ trên máy bạn, không tải lên đâu cả.
- Sao chép data URI, hoặc đoạn CSS background hay <img> đã làm sẵn. Bỏ chọn “tiền tố data:” nếu bạn chỉ cần Base64 thuần.
- Với file SVG, chuyển sang URL-encoded — thường sẽ ngắn hơn Base64.
- Để làm ngược lại, mở tab Base64 → Ảnh, dán chuỗi và tải file đã giải mã về.
Công cụ chuyển ảnh sang Base64 là gì?
Base64 là cách biểu diễn dữ liệu nhị phân chỉ bằng 64 ký tự văn bản an toàn (A–Z, a–z, 0–9, + và /). Chuyển ảnh sang Base64 cho phép bạn nhúng trực tiếp ảnh vào HTML, CSS, JSON hoặc mẫu email dưới dạng data URI, thay vì liên kết tới một file riêng:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Phần trước dấu phẩy khai báo kiểu MIME; phần còn lại là nội dung file đã mã hóa. Trình duyệt xử lý nó y như một URL ảnh thông thường, nên có thể dùng trong <img src>, thuộc tính CSS background-image, <link rel="icon"> và mã canvas.
Dung lượng tăng thêm 33%
Base64 biểu diễn mỗi 3 byte của file bằng 4 ký tự, nên chuỗi mã hóa lớn hơn bản gốc khoảng 33% (cộng thêm tiền tố data: ngắn). Nén Gzip hoặc Brotli trên máy chủ giúp giảm bớt phần nào, nhưng chi phí lớn hơn nằm ở cấu trúc: ảnh nhúng sẽ được tải lại cùng mỗi file HTML hoặc CSS chứa nó, không thể cache riêng, và làm file stylesheet — vốn chặn quá trình hiển thị — nặng thêm.
Khi nào nên nhúng ảnh (và khi nào không)
- Phù hợp: icon nhỏ, biểu tượng tải, sprite giao diện dưới vài KB, ảnh trong chữ ký email HTML khi ảnh bên ngoài bị chặn, báo cáo HTML một file, và dữ liệu mẫu trong code.
- Không phù hợp: ảnh chụp, ảnh banner đầu trang và mọi ảnh trên khoảng 10–20 KB. Hãy phục vụ những ảnh này như file thông thường, có cache, nén và
loading="lazy". Nên giảm dung lượng trước bằng Công cụ nén ảnh.
SVG: mã hóa URL tốt hơn Base64
SVG vốn đã là văn bản nên hoàn toàn không cần Base64. Một data URI mã hóa URL như data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… chỉ escape vài ký tự (<, >, #, %) và thường ngắn hơn 20–30% so với bản Base64 — đồng thời vẫn dễ đọc và nén Gzip tốt hơn. Công cụ này cung cấp cả hai cách cho file SVG. Nếu bạn thường xuyên làm việc với SVG trong CSS, công cụ SVG sang CSS cũng rất hữu ích.
Giải mã Base64 thành ảnh
Dán một data URI đầy đủ hoặc chuỗi Base64 thuần (base64url với - và _ cũng được). Công cụ tự nhận diện định dạng thật dựa trên magic bytes của file — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO hoặc BMP — hiển thị bản xem trước kèm kích thước, và cho phép tải file về với đúng đuôi mở rộng. Với chuỗi Base64 không phải ảnh, hãy dùng Công cụ mã hóa/giải mã Base64 tổng quát.
Cũng được tìm dưới tên: chuyển ảnh sang base64, image to base64, base64 sang ảnh, data uri, png to base64, svg to data uri, img src base64, css background base64.
Các công cụ dùng kèm tốt với Ảnh sang Base64
- Tạo Favicon — Tạo bộ favicon đầy đủ từ logo, một chữ cái hoặc một emoji: favicon.ico nhiều kích thước, Apple touch icon, icon Android/PWA, webclip cho Webflow, web manifest và các thẻ HTML để dán vào trang.
- Mã hóa / Giải mã URL — Mã hóa văn bản để dùng an toàn trong URL, giải mã chuỗi đã mã hóa về dạng dễ đọc và tách mọi URL thành các phần cùng tham số truy vấn.
- Tạo mã vạch — Tạo mã vạch quét được cho sản phẩm, kho hàng, vận chuyển và thư viện.
- Quét mã QR — Hướng camera vào mã QR, hoặc thả một ảnh hay ảnh chụp màn hình có chứa mã QR.
Câu hỏi thường gặp
Tại sao chuỗi Base64 lớn hơn ảnh của tôi?
Làm thế nào để dùng ảnh Base64 trong CSS?
url(): background-image: url("data:image/png;base64,…");. Đoạn CSS ở trên có thể dán ngay — chỉ cần đổi tên selector.Nhúng ảnh dạng Base64 có giúp trang tải nhanh hơn không?
Chuyển đổi ảnh riêng tư ở đây có an toàn không?
Tại sao chuỗi Base64 tôi dán lại báo lỗi?
url() và dấu nháy.