Image to Base64 Converter

Convert images to Base64-encoded data URIs for embedding in HTML, CSS, or JSON. Drag and drop any PNG, JPEG, SVG, WebP, or GIF — the encoding happens instantly in your browser.

Chuyển ảnh sang Base64

Chuyển đổi ảnh sang định dạng Base64 ngay lập tức. Hoàn hảo để nhúng ảnh vào CSS, HTML, hoặc data URI.

Tải ảnh lên

Kéo thả ảnh vào đây hoặc nhấn để tải lên

Hỗ trợ JPG, PNG, GIF, WebP, SVG (Tối đa 10MB)

Mẹo

Ảnh Base64 có thể nhúng trực tiếp vào HTML/CSS

Dùng "Chỉ sao chép dữ liệu" để lấy chuỗi base64 không có tiền tố

Ảnh lớn hơn sẽ tạo chuỗi Base64 dài hơn

Ảnh Base64 lớn hơn ~33% so với file gốc

Hoàn hảo cho icon nhỏ, logo, hoặc ảnh inline

Kết quả Base64

Tải ảnh lên để xem biểu diễn Base64

Ví dụ sử dụng
<img src="data:image/png;base64,..." alt="Image" />
.bg-image {
  background-image: url(data:image/png;base64,...);
}
const imageData = 'data:image/png;base64,...';
const img = new Image();
img.src = imageData;

Công cụ liên quan

Tất cả công cụ

About Image to Base64 Converter

Convert images to Base64 encoded strings for embedding directly in HTML, CSS, or JSON. Drag and drop any image file for instant conversion. No data leaves your browser.

Key Features

  • -Drag and drop file upload
  • -Instant Base64 conversion
  • -Data URI format output ready for HTML/CSS
  • -One-click copy to clipboard
  • -Support for PNG, JPEG, SVG, WebP, and GIF
  • -Shows encoded string length and size

Use Cases

CSS Backgrounds

Embed small images directly in CSS to reduce HTTP requests and improve page load performance.

HTML Email Templates

Include images inline in email templates without relying on external image hosting.

API Payloads

Send images as Base64 strings in JSON API requests when file upload is not available.

Single-File Applications

Bundle all image assets into one HTML file for offline-capable applications.

Frequently Asked Questions

What is Base64 encoding?
Base64 is a method of encoding binary data as ASCII text. It increases file size by approximately 33% but allows images to be embedded directly in text-based formats like HTML, CSS, and JSON.
When should I use Base64 images?
Best for small images like icons, logos, and thumbnails (under 10KB). For larger images, standard file references with proper caching are more efficient.
Does Base64 affect performance?
Base64 images increase the size of your HTML or CSS. Use it selectively for small assets where reducing HTTP requests matters more than raw file size.
Image to Base64 Converter - Free Online | atdev.blog