Bộ mã hóa ảnh Base64
Mã hóa ảnh thành Data URI Base64 cho HTML và CSS
Thả ảnh vào đây hoặc nhấp để tải lên
Hỗ trợ PNG, JPG, SVG, WebP, GIF, AVIF
Mã hóa ảnh Base64 là gì?
Mã hóa ảnh Base64 chuyển đổi dữ liệu nhị phân của ảnh thành chuỗi ASCII có thể nhúng trực tiếp vào HTML, CSS hoặc JSON mà không cần tham chiếu đến tệp bên ngoài. Kết quả là một data URI — chuỗi khép kín bắt đầu bằng data:image/png;base64, theo sau là các byte ảnh được mã hóa Base64. Trình duyệt xử lý data URI giống hệt như URL ảnh bên ngoài: giải mã nội dung Base64 và hiển thị ảnh ngay trong trang.
Kỹ thuật này được định nghĩa bởi RFC 2397 (sơ đồ data URI) và RFC 4648 (mã hóa Base64). Khi ảnh được mã hóa Base64, mỗi 3 byte dữ liệu nhị phân điểm ảnh trở thành 4 ký tự ASCII, làm tăng kích thước khoảng 33%. Dù có chi phí này, ảnh nhúng trực tiếp giúp loại bỏ một yêu cầu HTTP cho mỗi tài nguyên — một tối ưu hóa đáng kể khi ảnh nhỏ (biểu tượng, logo, điểm ảnh theo dõi 1x1) và độ trễ khứ hồi của một yêu cầu riêng vượt quá chi phí của các byte thêm.
Data URI được hỗ trợ trong tất cả các trình duyệt hiện đại, ứng dụng email (có một số hạn chế) và mọi ngữ cảnh chấp nhận cú pháp URI tiêu chuẩn. Chúng được sử dụng rộng rãi trong ứng dụng một trang, mẫu email HTML, SVG sprite và khai báo CSS background-image nơi giảm tổng số yêu cầu mạng cải thiện thời gian tải nhận thức.
Tại sao nên dùng Bộ mã hóa ảnh Base64 này?
Công cụ này chuyển đổi bất kỳ ảnh nào thành data URI sẵn sàng sử dụng ngay trong trình duyệt — không cần tải lên, không cần máy chủ, không cần tài khoản.
Các trường hợp sử dụng mã hóa ảnh Base64
Cấu trúc Data URI
Một data URI mã hóa định dạng ảnh và nội dung nhị phân trong một chuỗi duy nhất. Hiểu cấu trúc của nó giúp ích khi xây dựng hoặc phân tích data URI theo chương trình:
| Thành phần | Mô tả |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type of the image |
| ;base64, | Encoding declaration |
| iVBORw0KGgo... | Base64-encoded binary data |
So sánh định dạng ảnh cho mã hóa Base64
Lựa chọn định dạng ảnh ảnh hưởng đến kích thước đầu ra Base64, hỗ trợ trình duyệt và đặc tính hiển thị. Sử dụng định dạng phù hợp nhất với loại nội dung của bạn:
| Định dạng | Kiểu MIME | Độ trong suốt | Phù hợp nhất cho |
|---|---|---|---|
| PNG | image/png | Yes | Screenshots, icons, UI elements |
| JPEG | image/jpeg | No | Photos, gradients, large images |
| SVG | image/svg+xml | Yes | Logos, icons, scalable graphics |
| WebP | image/webp | Yes | Modern web images, smaller files |
| GIF | image/gif | Yes (1-bit) | Simple animations, small icons |
| ICO | image/x-icon | Yes | Favicons |
Ví dụ mã lập trình
Cách chuyển đổi ảnh sang data URI Base64 trong các ngôn ngữ và môi trường phổ biến:
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file)
// reader.result → "data:image/png;base64,iVBORw0KGgo..."
})
}
// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."
// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."import base64
# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
encoded = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."
# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"
with open('photo.jpg', 'rb') as f:
b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:{mime};base64,{b64}'import { readFileSync } from 'fs'
import { lookup } from 'mime-types'
// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"
const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."
// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
return `data:${mimeType};base64,${buf.toString('base64')}`
}# Encode an image to Base64 (macOS) base64 -i logo.png | tr -d '\n' # Encode an image to a full data URI (Linux) echo -n "data:image/png;base64,$(base64 -w 0 logo.png)" # Encode and copy to clipboard (macOS) echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy # Detect MIME type and encode (Linux, requires file command) MIME=$(file -b --mime-type image.webp) echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"