🔐
← Quay lại hướng dẫn

Cách chuyển đổi hình ảnh thành data URL Base64

· Thẻ: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

Data URL hình ảnh Base64 là gì?

Một data URL hình ảnh Base64 nhúng toàn bộ tệp hình ảnh trực tiếp vào tài liệu web dưới dạng chuỗi văn bản, loại bỏ nhu cầu thực hiện một yêu cầu HTTP riêng để tải hình ảnh. Thay vì trình duyệt tải một tệp bên ngoài, dữ liệu hình ảnh đã có sẵn trong HTML hoặc CSS.

Định dạng trông như thế này:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Phân tích chi tiết:

  • data: — tiền tố sơ đồ URI dữ liệu
  • image/png — loại MIME của hình ảnh được nhúng
  • ;base64 — chỉ ra mã hóa Base64
  • ,iVBORw0... — dữ liệu hình ảnh thực tế được mã hóa Base64

Tại sao chuyển đổi hình ảnh thành Base64?

Nhúng hình ảnh dưới dạng Base64 hữu ích trong một số tình huống:

Giảm số lượng yêu cầu HTTP

Mỗi tệp hình ảnh bên ngoài yêu cầu một yêu cầu HTTP riêng. Data URL Base64 loại bỏ các yêu cầu này, có thể cải thiện thời gian tải trang — đặc biệt trên các kết nối có độ trễ cao hoặc cho các trang có nhiều tài nguyên nhỏ.

Tài liệu tự chứa

Hình ảnh Base64 làm cho các tệp HTML của bạn hoàn toàn di động. Một mẫu email có hình ảnh Base64 hoạt động ngay cả khi máy khách email của người nhận chặn các tài nguyên bên ngoài. Tương tự, một tài liệu HTML có hình ảnh được nhúng có thể được chia sẻ dưới dạng một tệp duy nhất mà không lo lắng về các đường dẫn hình ảnh bị hỏng.

Trang quan trọng về hiệu suất

Đối với các hình ảnh hero ở phía trên màn hình và các phần tử UI quan trọng, việc loại bỏ vòng khứ hồi (round trip) thừa có thể cải thiện các chỉ số như Largest Contentful Paint (LCP). Tuy nhiên, điều này chỉ có lợi cho các hình ảnh nhỏ — đối với hình ảnh lớn, việc nhúng nội tuyến phản tác dụng.

Hoạt động ngoại tuyến

Khi một hình ảnh được nhúng dưới dạng data URL, nó hoạt động mà không cần truy cập mạng. Điều này có giá trị cho các ứng dụng web ngoại tuyến và ứng dụng web tiến bộ (PWA).

Cách chuyển đổi hình ảnh thành Base64

Phương pháp 1: Sử dụng công cụ trực tuyến (Dễ nhất)

Cách nhanh nhất để chuyển đổi hình ảnh thành Base64 là sử dụng một công cụ trực tuyến chuyên dụng. Tải lên hoặc kéo và thả hình ảnh của bạn vào trình mã hóa Base64 trực tuyến miễn phí của chúng tôi, và bạn sẽ nhận được data URL hoàn chỉnh sẵn sàng để dán vào mã của mình.

Phương pháp 2: Sử dụng JavaScript trong trình duyệt

API FileReader cung cấp một cách đơn giản để chuyển đổi các hình ảnh do người dùng chọn thành Base64:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

Phương pháp 3: Sử dụng API Canvas

Nếu bạn cần thay đổi kích thước, cắt xén hoặc nén hình ảnh trước khi chuyển đổi thành Base64, API Canvas là lựa chọn phù hợp:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

Phương pháp 4: Sử dụng Node.js

Ở phía máy chủ, sử dụng mô-đun fs với Buffer để chuyển đổi các tệp hình ảnh thành Base64:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

Phương pháp 5: Sử dụng dòng lệnh

Trên Linux và macOS, bạn có thể sử dụng lệnh base64 tích hợp:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

Cách sử dụng hình ảnh Base64 trong HTML

Trực tiếp trong thẻ <img>:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

Cách sử dụng hình ảnh Base64 trong CSS

Như một hình nền:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

Cân nhắc về hiệu suất và phương pháp tốt nhất

Khi hình ảnh Base64 hữu ích

  • Biểu tượng nhỏ và phần tử UI dưới 10 KB
  • Hình ảnh quan trọng phía trên màn hình chặn quá trình hiển thị
  • Sprite và biểu tượng SVG được sử dụng trên một trang
  • Mẫu email nơi các hình ảnh bên ngoài thường bị chặn
  • Ứng dụng web ưu tiên ngoại tuyến và tài liệu tự chứa

Khi hình ảnh Base64 gây hại

  • Ảnh lớn hoặc hình ảnh độ phân giải cao (100 KB trở lên) — chi phí Base64 và độ trễ phân tích cú pháp gây hại cho hiệu suất
  • Hình ảnh thay đổi thường xuyên — vô hiệu hóa bộ nhớ đệm trình duyệt cho một payload HTML lớn là lãng phí
  • Hình ảnh được chia sẻ trên nhiều trang — các tệp bên ngoài được hưởng lợi từ bộ nhớ đệm trình duyệt dùng chung
  • Hình ảnh phục vụ qua CDN — CDN tối ưu hóa việc phân phối tệp tốt hơn so với dữ liệu nhúng nội tuyến

Quy tắc ngón tay cái 10 KB

Một nguyên tắc được trích dẫn rộng rãi: nếu một hình ảnh dưới 10 KB, hãy cân nhắc nhúng nội tuyến nó dưới dạng Base64. Nếu nó lớn hơn, hãy phục vụ nó như một tệp riêng biệt. Điều này cân bằng chi phí của các yêu cầu HTTP với chi phí của dữ liệu được mã hóa Base64 trong HTML của bạn.

Tuy nhiên, ngưỡng tối ưu phụ thuộc vào tình huống cụ thể của bạn:

  • Đa kênh HTTP/2 (multiplexing) làm giảm hình phạt của nhiều yêu cầu, khiến các tệp bên ngoài trở nên hấp dẫn hơn
  • Trên các kết nối chậm, việc loại bỏ các yêu cầu có thể có giá trị ngay cả đối với các hình ảnh lớn hơn
  • Đối với các tài nguyên trong đường dẫn hiển thị quan trọng, hãy nhúng nội tuyến ngay cả các hình ảnh lớn hơn nếu điều đó có nghĩa là bớt một vòng khứ hồi

Cân nhắc về nén

Nếu bạn đang chuyển đổi hình ảnh JPEG hoặc PNG thành Base64, hãy cân nhắc sử dụng WebP thay thế. WebP cung cấp nén vượt trội ở cùng mức chất lượng, dẫn đến các chuỗi Base64 nhỏ hơn. Nhiều công cụ trực tuyến cho phép bạn mã hóa lại hình ảnh trước khi chuyển đổi thành Base64.

Chuyển đổi hình ảnh của bạn thành Base64

Sẵn sàng nhúng hình ảnh trực tiếp vào mã của bạn? Sử dụng trình mã hóa và giải mã Base64 trực tuyến miễn phí của chúng tôi để tải lên hình ảnh và nhận data URL hoàn chỉnh cho HTML, CSS và JavaScript — không cần cài đặt.