CodeKitHubCông Cụ Này Là Gì?
Base64 là cách biểu diễn dữ liệu nhị phân — như dữ liệu byte thô của một ảnh — dưới dạng văn bản thuần, chỉ dùng chữ cái, số và một số ký hiệu nhất định. Vì là văn bản thuần, một ảnh đã mã hóa Base64 có thể được nhúng trực tiếp vào HTML, CSS hoặc JSON thay vì phải tham chiếu đến một file riêng.
Một "data URL" bọc văn bản Base64 đó bằng một tiền tố ngắn (data:image/png;base64,) cho trình duyệt biết đây là loại file gì, để có thể đặt trực tiếp vào thuộc tính src hoặc url() và hiển thị mà không cần thêm yêu cầu mạng nào.
Tại Sao Nên Dùng?
- Nhận cả hai định dạng cùng lúc — data URL đầy đủ cho HTML/CSS, và Base64 thô (không tiền tố) để nhúng vào JSON hoặc file config.
- Không cần yêu cầu tới máy chủ: loại bỏ một request HTTP cho icon nhỏ, avatar hoặc ảnh nội tuyến.
- Giữ nguyên chính xác dữ liệu byte gốc của file — không mã hóa lại hay mất chất lượng, khác với các công cụ giải mã rồi lưu lại ảnh.
- Hiển thị chênh lệch dung lượng để bạn biết mình đang đánh đổi những gì để lấy sự tiện lợi.
- Riêng tư: file được đọc cục bộ bằng FileReader API của trình duyệt và không bao giờ rời khỏi thiết bị của bạn.
Cách Sử Dụng
- Nhấn vào khu vực tải lên hoặc kéo thả một file ảnh vào đó.
- Sao chép data URL đầy đủ nếu bạn định dán vào <img src> hoặc CSS background-image.
- Sao chép Base64 thô (không có tiền tố data:) nếu bạn định nhúng giá trị đó vào JSON, YAML hoặc một định dạng config khác đã biết trước loại file.
- Xem ghi chú về dung lượng — văn bản Base64 nặng hơn khoảng một phần ba so với file nhị phân gốc.
Ví dụ
Đầu vào
Một file icon PNG dung lượng 12 KB.Đầu ra
data:image/png;base64,iVBORw0KGgoAAAANSU... (khoảng 16 KB văn bản) cộng với chính chuỗi đó nhưng không có tiền tố data:.Mức tăng khoảng 33% dung lượng là bản chất vốn có của mã hóa Base64 (3 byte nhị phân trở thành 4 ký tự văn bản) — không phải lỗi của công cụ.
Mỗi định dạng dùng ở đâu
| Định dạng | Ứng dụng thường gặp |
|---|---|
| Data URL đầy đủ | HTML <img src="...">, CSS background-image: url(...), ảnh nội tuyến trong email |
| Base64 thô | Payload JSON API, file YAML/config, trường BLOB trong cơ sở dữ liệu, giao thức nhị phân tùy chỉnh |
Base64 và dung lượng ảnh — sự đánh đổi trong thực tế
Mức tăng khoảng 33% có nghĩa là nhúng Base64 tốt nhất nên dùng cho tài nguyên nhỏ: một icon 2 KB trở thành khoảng 2,7 KB văn bản nội tuyến vô hại, nhưng một bức ảnh 500 KB sẽ trở thành khoảng 665 KB văn bản nằm ngay trong HTML của bạn, làm chậm quá trình phân tích trang và không thể cache riêng biệt với trang.
Nếu bạn nhúng nhiều ảnh hoặc ảnh lớn hơn, hãy cân nhắc lợi ích tiết kiệm một request so với chi phí dung lượng trang — và cân nhắc nén trước.
Câu Hỏi Thường Gặp
Vì sao chuỗi Base64 lại lớn hơn nhiều so với file ảnh gốc?
Base64 mã hóa mỗi 3 byte dữ liệu nhị phân thành 4 ký tự văn bản, đây là mức tăng cố định khoảng 33% dung lượng. Với một ảnh 100 KB, hãy dự kiến khoảng 133 KB văn bản Base64. Điều này bình thường và không thể tránh khỏi — đó là cái giá để biểu diễn dữ liệu nhị phân dưới dạng văn bản an toàn, có thể mang đi khắp nơi.
Sự khác biệt giữa data URL và chuỗi Base64 thô là gì?
Data URL bao gồm tiền tố data:image/png;base64, cho trình duyệt hoặc trình hiển thị biết đoạn văn bản theo sau giải mã ra kiểu MIME nào. Hãy dán data URL đầy đủ vào src của HTML hoặc url() của CSS. Base64 thô (mọi thứ sau dấu phẩy) là thứ bạn cần khi hệ thống đã biết loại file từ một trường khác — ví dụ một trường JSON như { "format": "png", "data": "<base64 thô>" }.
Khi nào tôi nên nhúng ảnh dưới dạng Base64 thay vì liên kết đến một file?
Nhúng Base64 hữu ích cho các ảnh nhỏ, dùng đi dùng lại thường xuyên (icon, logo, hình ảnh giao diện nhỏ) khi việc tiết kiệm một request HTTP đáng giá hơn phần chi phí dung lượng tăng khoảng 33%, hoặc trong các trường hợp không thể dùng file riêng, như email nội tuyến hay file HTML xuất ra dạng một file duy nhất. Với ảnh lớn hoặc bất kỳ ảnh nào được dùng lại trên nhiều trang, một file liên kết thông thường có cache trình duyệt gần như luôn tốt hơn.
Chuyển sang Base64 có làm thay đổi hoặc nén ảnh của tôi không?
Không. Base64 là một cách mã hóa văn bản không thất thoát trên chính xác các byte gốc — nó không đụng đến pixel, độ phân giải hay mức nén. Nếu bạn muốn file nhỏ hơn, hãy nén ảnh trước bằng công cụ nén ảnh, rồi mới chuyển kết quả đã nén sang Base64.
Ảnh của tôi có bị tải lên đâu không?
Không. File được đọc trực tiếp trên trình duyệt của bạn bằng FileReader API và mã hóa cục bộ — nó không bao giờ được gửi qua mạng.