Công cụ chuyển đổi Hình ảnh ⇔ Base64

Chuyển đổi tập tin hình ảnh và Base64 (Data URI) qua lại

Mã hóa hình ảnh thành Base64 để chuyển đổi thành Data URI, hoặc khôi phục hình ảnh từ chuỗi Base64. Hỗ trợ định dạng PNG, JPEG, GIF, WebP. Kéo và thả để thao tác dễ dàng. Tất cả xử lý hoàn tất trên trình duyệt và dữ liệu không được lưu trữ.

Cách sử dụng

Chuyển đổi đơn giản trong 3 bước:

Chọn chế độ chuyển đổi
Chọn tab「Hình ảnh→Base64」hoặc「Base64→Hình ảnh」
Nhập dữ liệu
Chế độ hình ảnh: Kéo và thả hoặc chọn tập tin hình ảnh. Chế độ Base64: Dán chuỗi Base64.
Sử dụng kết quả chuyển đổi
Kết quả chuyển đổi hiển thị ngay lập tức. Sao chép Base64 bằng nút sao chép hoặc lưu hình ảnh bằng nút tải xuống.

Bảo vệ quyền riêng tư: Tất cả xử lý được thực hiện trên trình duyệt và dữ liệu hình ảnh không được gửi hoặc lưu trữ trên máy chủ.

Công cụ chuyển đổi Hình ảnh ⇔ Base64

📁

Kéo và thả tập tin hình ảnh hoặc nhấp để chọn

Định dạng hỗ trợ: PNG, JPEG, GIF, WebP, SVG (khuyến nghị tối đa 10MB)

Xem trước

Tên tập tin

Kích thước tập tin

Kích thước

Định dạng

Kết quả mã hóa Base64 (Data URI)

Nhập chuỗi Base64

Xem trước

Ví dụ ứng dụng thực tế của chuyển đổi hình ảnh Base64

Mã hóa Base64 của hình ảnh được sử dụng trong phát triển web trong các tình huống sau:

1. Nhúng hình ảnh vào HTML hoặc CSS

Nhúng biểu tượng nhỏ hoặc hình ảnh logo trực tiếp vào thẻ <img> của HTML hoặc background-image của CSS giúp giảm yêu cầu HTTP và cải thiện tốc độ tải trang. Đặc biệt hữu ích như một thay thế cho phông chữ biểu tượng.

2. Thay thế cho CSS Sprite

Thay vì sử dụng「CSS Sprite」để gộp nhiều hình ảnh nhỏ thành một tập tin, mã hóa Base64 từng hình ảnh và nhúng vào CSS sẽ giúp quản lý đơn giản hơn.

3. Nhúng hình ảnh vào HTML Email

Vì một số ứng dụng email chặn tải hình ảnh bên ngoài, nhúng hình ảnh quan trọng (như logo) dưới dạng Data URI sẽ đảm bảo hiển thị chắc chắn.

4. Truyền hình ảnh trong REST API

Khi gửi và nhận dữ liệu hình ảnh trong JSON API, mã hóa Base64 cho phép xử lý dữ liệu nhị phân dưới dạng văn bản. Có thể truyền hình ảnh ở định dạng JSON đơn giản mà không cần sử dụng giao tiếp đa phần.

5. Ứng dụng ngoại tuyến

Trong Progressive Web Apps (PWA) hoặc ứng dụng Electron, mã hóa hình ảnh thành Base64 và nhúng vào HTML sẽ đảm bảo hiển thị hình ảnh ngay cả trong môi trường ngoại tuyến.

6. Phát triển ứng dụng di động

Sử dụng hình ảnh được mã hóa Base64 trong React Native, Ionic, Flutter và các framework đa nền tảng khác giúp thống nhất cách xử lý hình ảnh giữa các nền tảng.

Data URI là gì? Hiểu nguyên lý

Data URI (URI dữ liệu, còn gọi là Data URL) là một loại lược đồ URL được sử dụng để nhúng trực tiếp các tập tin nhỏ như hình ảnh hoặc phông chữ vào HTML hoặc CSS. Nó mã hóa nội dung tập tin thành Base64 dưới dạng văn bản và biểu diễn như một phần của URL.

Định dạng Data URI

Data URI được viết theo định dạng sau:

data:[loại MIME];[phương thức mã hóa],[dữ liệu đã mã hóa]

Ví dụ (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Ưu điểm của Data URI

Giảm yêu cầu HTTP: Không cần yêu cầu tập tin bên ngoài, cải thiện tốc độ tải trang
Tập tin đơn: Hoàn tất với một tập tin HTML hoặc CSS, dễ phân phối và quản lý
Hiển thị chắc chắn: Tránh liên kết hình ảnh bên ngoài bị hỏng hoặc bị chặn

Nhược điểm của Data URI

Tăng kích thước tập tin: Mã hóa Base64 làm tăng kích thước dữ liệu khoảng 33%
Hiệu quả bộ nhớ đệm giảm: Khi cập nhật hình ảnh, toàn bộ tập tin HTML/CSS phải tải lại
Giảm khả năng đọc: Mã nguồn dài hơn, khó bảo trì

Thực hành tốt nhất

Khi nào nên sử dụng Data URI

✅ Biểu tượng nhỏ hoặc logo (khuyến nghị dưới 5KB)
✅ Hình ảnh trang trí sử dụng thường xuyên (nền nút, v.v.)
✅ Hình ảnh quan trọng cần hỗ trợ ngoại tuyến

Khi nào không nên sử dụng Data URI

❌ Hình ảnh lớn (trên 10KB): Kích thước tập tin phình to
❌ Hình ảnh cập nhật thường xuyên: Hiệu quả bộ nhớ đệm kém
❌ Hình ảnh sử dụng lại nhiều trang: Nhúng trùng lặp trên mỗi trang

⚠️ Thông thường, khuyến nghị sử dụng Data URI cho hình ảnh nhỏ dưới 5KB. Đối với hình ảnh lớn, sử dụng thẻ <img> thông thường hoặc tải từ tập tin bên ngoài sẽ hiệu quả hơn.

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

Hỗ trợ những định dạng hình ảnh nào?

Hỗ trợ PNG, JPEG, GIF, WebP, SVG và tất cả các định dạng hình ảnh mà trình duyệt hỗ trợ. Phổ biến nhất là PNG và JPEG.

Có giới hạn kích thước hình ảnh có thể chuyển đổi không?

Về mặt kỹ thuật không có giới hạn, nhưng để cân nhắc hiệu suất và bộ nhớ trình duyệt, khuyến nghị dưới 10MB. Thực tế, việc sử dụng hình ảnh nhỏ dưới 5KB là hiệu quả nhất.

Mã hóa Base64 làm tăng kích thước hình ảnh bao nhiêu?

Mã hóa Base64 làm tăng kích thước tập tin gốc lên khoảng 133% (tăng khoảng 33%). Ví dụ, hình ảnh 9KB sẽ trở thành chuỗi Base64 khoảng 12KB.

PNG trong suốt có thể chuyển đổi thành Base64 không?

Có, hình ảnh PNG trong suốt có thể chuyển đổi trực tiếp. Thông tin trong suốt được giữ lại, ngay cả khi nhúng vào HTML hoặc CSS cũng hiển thị trong suốt chính xác.

Làm thế nào để nhúng chuỗi Base64 vào HTML?

Dán trực tiếp vào thuộc tính src của thẻ <img>. Ví dụ: <img src="data:image/png;base64,iVBORw0KG...">

Làm thế nào để sử dụng làm background-image của CSS?

Dán vào hàm url() như thế này: background-image: url('data:image/png;base64,iVBORw0KG...');

Hình ảnh đã tải lên có được lưu trữ trên máy chủ không?

Không, tất cả xử lý hoàn tất trên trình duyệt. Dữ liệu hình ảnh không được gửi đến máy chủ.

Có thể sử dụng trên trang web thương mại không?

Có, công cụ này hoàn toàn miễn phí và có thể sử dụng tự do cho cả mục đích thương mại và phi thương mại.