Cách mã hóa ảnh thành Base64 online

Tháng 6, 2026 · 9 phút đọc

Base64 là phương pháp mã hóa phổ biến trong lập trình web, giúp nhúng trực tiếp ảnh vào HTML hoặc CSS mà không cần file riêng. Bài viết này sẽ giải thích Base64 là gì, khi nào nên sử dụng, và hướng dẫn cách mã hóa ảnh thành Base64 online miễn phí.

Base64 là gì?

Base64 là phương pháp mã hóa dữ liệu nhị phân (binary) thành chuỗi ký tự ASCII. Tên "Base64" xuất phát từ việc sử dụng 64 ký tự để biểu diễn dữ liệu:

  • A-Z (26 ký tự in hoa)
  • a-z (26 ký tự thường)
  • 0-9 (10 chữ số)
  • + và / (2 ký tự đặc biệt)
  • = (ký tự padding ở cuối)

Khi bạn mã hóa một file ảnh sang Base64, dữ liệu nhị phân của ảnh sẽ được chuyển thành một chuỗi ký tự dài. Chuỗi này có thể được nhúng trực tiếp vào HTML, CSS, JSON, hoặc bất kỳ định dạng văn bản nào.

Cách Base64 hoạt động

Quy trình mã hóa Base64 khá đơn giản:

  1. Lấy dữ liệu nhị phân (binary) của file
  2. Chia thành các nhóm 3 byte (24 bit)
  3. Chia mỗi nhóm thành 4 phần, mỗi phần 6 bit
  4. Mỗi phần 6 bit được ánh xạ thành 1 ký tự trong bảng Base64
  5. Nếu số byte không chia hết cho 3, thêm ký tự "=" ở cuối

Kết quả: Dữ liệu Base64 lớn hơn dữ liệu gốc khoảng 33%. Đây là nhược điểm lớn khi mã hóa file lớn.

Khi nào nên dùng Base64 cho ảnh?

Nên dùng Base64 khi:

  • Icon, logo nhỏ: Dưới 10KB, giúp giảm số lượng HTTP request
  • Ảnh nền nhỏ: Pattern, texture nhỏ lặp lại
  • Email HTML: Nhúng ảnh trực tiếp vào email không cần file đính kèm
  • API response: Truyền ảnh qua API dạng JSON
  • Data URI trong CSS: Nhúng ảnh nhỏ vào stylesheet
  • Ứng dụng offline: Khi không muốn phụ thuộc vào file bên ngoài

Không nên dùng Base64 khi:

  • Ảnh lớn (trên 10KB): Kích thước tăng 33%, tốn băng thông
  • Ảnh cần cache: Ảnh Base64 không được cache riêng biệt bởi trình duyệt
  • Nhiều ảnh: Tạo HTML/CSS rất lớn, ảnh hưởng hiệu suất
  • SEO: Ảnh Base64 không được index bởi công cụ tìm kiếm

Cách mã hóa ảnh thành Base64 online

Sử dụng công cụ Base64 của ToolHub để mã hóa ảnh nhanh chóng:

  1. Truy cập ToolHub Base64 Encoder
  2. Chọn tab "Image to Base64"
  3. Kéo thả ảnh vào vùng upload hoặc nhấn "Chọn tệp"
  4. Công cụ sẽ tự động mã hóa ảnh thành chuỗi Base64
  5. Nhấn "Copy" để sao chép chuỗi Base64
  6. Sử dụng chuỗi này trong HTML, CSS, hoặc code của bạn

Cách nhúng ảnh Base64 vào HTML

Sử dụng Data URI để nhúng ảnh Base64 trực tiếp vào thẻ <img>:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Định dạng Data URI:

data:[<mediatype>][;base64],<data>
  • image/png - Loại MIME của ảnh
  • base64 - Phương thức mã hóa
  • iVBORw0KGgo... - Dữ liệu ảnh đã mã hóa

Cách nhúng ảnh Base64 vào CSS

Nhúng ảnh nhỏ vào CSS để giảm HTTP request:

/* Icon nhỏ */
.icon-check {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDVMNiAxMkwzIDkiIHN0cm9rZT0iIzEwYjk4MSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+");
  width: 16px;
  height: 16px;
}

/* Pattern nền nhỏ */
.bg-pattern {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
  background-repeat: repeat;
}

Cách nhúng ảnh Base64 vào Email HTML

Khi gửi HTML email, nhúng ảnh Base64 giúp ảnh hiển thị mà không cần file đính kèm:

<html>
<body>
  <h1>Xin chào</h1>
  <img src="data:image/png;base64,iVBORw0KGgo..."
       alt="Logo"
       width="200">
  <p>Nội dung email...</p>
</body>
</html>

Lưu ý: Một số client email (như Outlook) có thể không hiển thị ảnh Base64. Hãy test trước khi gửi.

Base64 trong JavaScript

Chuyển file ảnh sang Base64:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    reader.readAsDataURL(file);
  });
}

// Sử dụng
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64 = await fileToBase64(file);
  console.log(base64); // data:image/png;base64,iVBORw0KGgo...
});

Chuyển Base64 sang Blob (để tải về):

function base64ToBlob(base64, mimeType) {
  const byteString = atob(base64.split(',')[1]);
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeType });
}

Base64 trong Python

import base64

# Mã hóa file ảnh sang Base64
with open("anh.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("utf-8")
    print(f"data:image/png;base64,{encoded}")

# Giải mã Base64 sang file ảnh
base64_string = "iVBORw0KGgo..."
with open("anh_output.png", "wb") as f:
    f.write(base64.b64decode(base64_string))

So sánh Base64 vs URL ảnh

Tiêu chíBase64 (Data URI)URL ảnh (src)
HTTP RequestKhông cần (nhúng trong HTML)Cần request riêng
Kích thướcLớn hơn 33%Kích thước gốc
CacheKhông cache riêngCache bởi trình duyệt
Tải ban đầuChậm hơn (HTML lớn)Nhanh hơn (tải song song)
Phù hợp choẢnh nhỏ dưới 10KBMọi kích thước ảnh
SEOKhông index đượcIndex được

Những lỗi thường gặp với Base64

  • Quên tiền tố data URI: Phải có data:image/png;base64, trước chuỗi Base64
  • Sai loại MIME: PNG là image/png, JPG là image/jpeg, GIF là image/gif
  • Dùng cho ảnh lớn: Ảnh trên 10KB sẽ khiến HTML/CSS rất lớn, ảnh hưởng hiệu suất
  • Nhầm Base64 là mã hóa bảo mật: Base64 chỉ là encoding, ai cũng có thể decode
  • Không tối ưu ảnh trước: Hãy nén ảnh trước khi mã hóa để giảm kích thước

Mẹo sử dụng Base64 hiệu quả

  • Chỉ dùng cho ảnh nhỏ: Dưới 10KB là lý tưởng, tối đa 20KB
  • Nén ảnh trước: Sử dụng công cụ nén ảnh trước khi mã hóa
  • Chuyển sang WebP: WebP nhỏ hơn JPG/PNG, giúp chuỗi Base64 ngắn hơn
  • Sử dụng SVG cho icon: SVG Base64 thường nhỏ hơn bitmap rất nhiều
  • Kiểm tra kích thước: Nếu chuỗi Base64 quá dài, có thể bạn nên dùng URL thay vì Base64

Câu hỏi thường gặp

Base64 là gì?
Base64 là phương pháp mã hóa dữ liệu nhị phân (binary) thành chuỗi ký tự ASCII, sử dụng 64 ký tự: A-Z, a-z, 0-9, +, /. Base64 thường được dùng để nhúng ảnh vào HTML, CSS, hoặc truyền dữ liệu qua API dưới dạng text.
Khi nào nên dùng Base64 cho ảnh?
Nên dùng Base64 cho ảnh nhỏ (dưới 10KB) như icon, logo, ảnh nền nhỏ. Không nên dùng cho ảnh lớn vì kích thước tăng 33% và không được cache bởi trình duyệt. Base64 lý tưởng cho email HTML và Data URI trong CSS.
Mã hóa Base64 có an toàn không?
Base64 không phải là mã hóa bảo mật. Nó chỉ là phương pháp encoding để truyền dữ liệu. Bất kỳ ai cũng có thể decode Base64 để xem nội dung gốc. Nếu cần bảo mật, hãy sử dụng mã hóa thực sự như AES.
Base64 có phải là nén dữ liệu không?
Không, Base64 không nén dữ liệu. Ngược lại, dữ liệu Base64 lớn hơn dữ liệu gốc khoảng 33%. Nếu muốn giảm kích thước ảnh, hãy sử dụng công cụ nén ảnh trước khi mã hóa Base64.
Làm sao để biết ảnh đã mã hóa Base64 đúng?
Dán chuỗi Base64 vào trình duyệt với tiền tố "data:image/png;base64,". Nếu ảnh hiển thị đúng, mã hóa đã thành công. Bạn cũng có thể sử dụng công cụ Base64 Decoder để kiểm tra.

Mã hóa ảnh thành Base64 ngay

Sử dụng công cụ Base64 miễn phí của ToolHub - encode và decode nhanh chóng.

Mở Base64 Encoder →

Bài viết liên quan

Related Tools

🔧

Base64 Encoder

Encode text and files to Base64
🔧

Image Compress

Compress images before encoding
🔧

Image Resize

Resize images for web