Ảnh Base64 là gì? Khi nào nên nhúng ảnh dạng Data URI
Bình thường, một trang web hiển thị ảnh bằng cách trỏ tới file ảnh riêng: <img src="/logo.png">. Trình duyệt phải gửi thêm một yêu cầu để tải file đó. Base64 là cách khác: biến nội dung file ảnh thành một chuỗi ký tự và nhúng thẳng vào HTML, CSS hay JSON. Không cần file riêng, không cần yêu cầu riêng.
Base64 là gì?
Base64 là cách mã hoá dữ liệu nhị phân (như file ảnh) thành văn bản chỉ gồm 64 ký tự an toàn: chữ hoa A–Z, chữ thường a–z, số 0–9 và hai ký tự + và /. Văn bản này có thể đặt ở bất kỳ đâu chấp nhận chữ: mã HTML, file CSS, dữ liệu JSON, nội dung email.
Khi dùng cho ảnh, chuỗi Base64 thường được đặt trong một Data URI có dạng: data:image/png;base64,iVBORw0KGgo… — phần đầu cho trình duyệt biết đây là ảnh PNG, phần sau là dữ liệu.
Vì sao ảnh Base64 nặng hơn file gốc?
Base64 dùng 4 ký tự để biểu diễn mỗi 3 byte dữ liệu, nên chuỗi luôn lớn hơn file gốc khoảng 33%. Một ảnh 30 KB thành chuỗi khoảng 40 KB. Với ảnh nhỏ thì không đáng kể; với ảnh lớn thì rất lãng phí.
Khi nào nên dùng Base64?
- Icon rất nhỏ (vài KB) dùng trong CSS, để tránh thêm một yêu cầu tải file.
- Ảnh trong email HTML ở một số trường hợp, khi không muốn phụ thuộc ảnh lưu trên máy chủ (lưu ý nhiều trình đọc email chặn hoặc không hiển thị ảnh Base64).
- Ảnh trong dữ liệu JSON gửi qua API, khi API chỉ nhận văn bản.
- Ảnh giữ chỗ (placeholder) siêu nhỏ, ví dụ ảnh mờ 20 pixel hiện trước trong lúc ảnh thật đang tải.
- File HTML độc lập cần gửi cho người khác mà không kèm thư mục ảnh.
Khi nào không nên dùng?
- Ảnh lớn (ảnh sản phẩm, ảnh bài viết): nặng thêm 33%, làm file HTML/CSS phình to và chặn trang hiển thị.
- Ảnh dùng lại ở nhiều trang: file ảnh riêng được trình duyệt lưu cache một lần; ảnh Base64 nằm trong HTML thì mỗi trang tải lại từ đầu.
- Khi cần SEO cho ảnh: ảnh Base64 không có đường dẫn riêng nên không xuất hiện trên Google Hình ảnh.
Cách chuyển ảnh sang Base64
- Mở công cụ Image to Base64 trên Convert.com.vn.
- Tải ảnh lên (nên nén và thu nhỏ trước).
- Bấm Copy chuỗi Base64. Chuỗi trả về là Data URI đầy đủ (đã có sẵn tiền tố
data:image/...;base64,), dán dùng được ngay. Nếu nơi bạn dán chỉ cần phần dữ liệu, xoá phần đứng trước dấu phẩy.
Công cụ xử lý hoàn toàn trên trình duyệt của bạn, ảnh không được tải lên máy chủ.
Ví dụ sử dụng
- Trong HTML:
<img src="data:image/png;base64,iVBOR…" alt="Icon" width="24" height="24"> - Trong CSS:
background-image: url("data:image/svg+xml;base64,PHN2Zy…"); - Trong JSON:
{ "avatar": "data:image/webp;base64,UklGR…" }
Với icon SVG, đôi khi bạn không cần Base64: SVG là văn bản nên có thể dán thẳng mã <svg> vào HTML. Dùng công cụ Image to SVG Code nếu bạn cần lấy mã SVG từ ảnh.
Câu hỏi thường gặp
Base64 có phải là cách mã hoá để bảo mật ảnh không?
Không. Base64 chỉ là cách biểu diễn dữ liệu bằng chữ, ai cũng giải mã ngược lại được trong vài giây. Đừng dùng Base64 với ý định giấu hay bảo vệ ảnh; nếu cần bảo mật, hãy dùng mã hoá thật sự hoặc phân quyền truy cập file.
Ảnh Base64 có làm trang web chậm đi không?
Với icon vài KB thì không đáng kể, thậm chí có thể nhanh hơn một chút vì bớt một yêu cầu tải file. Với ảnh lớn thì có: HTML hoặc CSS phình to, trình duyệt phải tải và phân tích hết chuỗi trước khi hiển thị nội dung, và ảnh không được lưu cache riêng. Quy tắc an toàn là chỉ nhúng ảnh dưới khoảng 5–10 KB.
Làm sao chuyển chuỗi Base64 ngược lại thành file ảnh?
Cách nhanh nhất là dán nguyên chuỗi Data URI (bắt đầu bằng data:image/) vào thanh địa chỉ trình duyệt, ảnh sẽ hiện ra và bạn có thể bấm chuột phải để lưu. Lập trình viên có thể giải mã bằng hàm có sẵn trong hầu hết ngôn ngữ, ví dụ atob() trong JavaScript hoặc base64.b64decode() trong Python.
Có nên nhúng ảnh Base64 vào email marketing?
Cần thận trọng. Một số trình đọc email phổ biến không hiển thị ảnh nhúng dạng Data URI, và email chứa chuỗi dài có thể bị bộ lọc thư rác đánh giá thấp. Phần lớn email marketing dùng ảnh lưu trên máy chủ và chèn bằng đường dẫn thông thường.
Tóm lại
Base64 tiện cho icon rất nhỏ, ảnh trong email hoặc dữ liệu API, nhưng làm ảnh nặng thêm khoảng 33% và mất lợi ích cache. Với ảnh thông thường trên website, file ảnh riêng ở định dạng WEBP vẫn là lựa chọn tốt hơn.
