🖼️ Trình chuyển đổi ảnh Base64

Chuyển ảnh sang chuỗi Base64 hoặc khôi phục Base64 thành ảnh.

Tệp ảnh

📁

Nhấp hoặc kéo thả ảnh vào đây

Bao gồm Data URL

HƯỚNG DẪN

Tìm hiểu thêm

1. Mã hóa Base64 là gì

Base64 là một phương pháp mã hóa chuyển dữ liệu nhị phân thành chuỗi ASCII. Nó cho phép các tệp nhị phân như ảnh, âm thanh và video được biểu diễn dưới dạng văn bản, giúp truyền dữ liệu nhị phân qua các giao thức dựa trên văn bản như email, JSON và XML. Chỉ dùng 64 ký tự ASCII (A-Z, a-z, 0-9, +, /) để biểu diễn toàn bộ dữ liệu nhị phân. Hữu ích khi chèn ảnh nội tuyến trong HTML bằng Data URL hoặc đưa ảnh vào phản hồi API. Tuy nhiên, nó làm tăng dung lượng gốc khoảng 33%.

2. Trường hợp sử dụng ảnh Base64

Ảnh Base64 được dùng trong nhiều tình huống phát triển web. Chèn nội tuyến các biểu tượng nhỏ làm CSS background-image giúp giảm số lượng yêu cầu HTTP, cải thiện tốc độ tải trang. Dùng trong mẫu email để tránh bị chặn ảnh từ bên ngoài. Khi triển khai toàn bộ trang web dưới dạng một tệp HTML duy nhất, có thể nhúng tất cả ảnh dưới dạng Base64. Trong RESTful API, ảnh có thể được đưa trực tiếp vào phản hồi JSON mà không cần tải tệp riêng. Cũng được dùng khi truyền ảnh tạo bằng Canvas API lên máy chủ.

3. Định dạng Data URL

Data URL là một lược đồ dùng để biểu diễn tệp dưới dạng URL. Định dạng: data:[<mediatype>][;base64],<data>. Ví dụ: data:image/png;base64,iVBORw0KG... Mediatype chỉ định kiểu MIME như image/png, image/jpeg, image/gif. ;base64 cho biết phương pháp mã hóa, sau đó là chuỗi Base64 thực tế. Có thể dùng trực tiếp trong thẻ img của HTML như <img src="data:image/png;base64,...">. Cũng được dùng trong CSS như background: url(data:image/svg+xml;base64,...). Trình duyệt xử lý Data URL như URL thông thường để hiển thị ảnh.

4. Lưu ý về tối ưu hiệu năng

Cần cân nhắc hiệu năng khi dùng ảnh Base64. Ảnh nhỏ (dưới 1-2KB) có lợi khi chèn nội tuyến thay vì chịu chi phí của yêu cầu HTTP. Ảnh lớn có thể chậm hơn do tăng kích thước khoảng 33% và chi phí phân tích chuỗi Base64. Ảnh Base64 không thể tận dụng bộ nhớ đệm của trình duyệt, nên mỗi lần vẫn tải cùng HTML/CSS. Ảnh dùng thường xuyên nên được cung cấp dưới dạng tệp riêng để tận dụng cache. Nén Gzip rất hiệu quả với chuỗi Base64, vì vậy hãy bật trên máy chủ. Base64 phù hợp cho ảnh trang trí hoặc biểu tượng, không nên dùng cho nội dung quan trọng.

5. Lưu ý về bảo mật

Có rủi ro bảo mật khi dùng ảnh Base64. Khi hiển thị ảnh người dùng tải lên đã chuyển sang Base64, hãy cảnh giác với các cuộc tấn công XSS. Ảnh SVG đặc biệt nguy hiểm vì có thể chứa JavaScript. Các header Content-Security-Policy có thể hạn chế việc dùng lược đồ data:. Đặt giới hạn dung lượng tệp để ngăn tấn công làm cạn bộ nhớ. Xác thực kiểu ảnh để chỉ xử lý các MIME type được phép (image/png, image/jpeg). Việc kiểm tra phía máy chủ nên xác nhận đó là tệp ảnh thật và quét mã độc.

6. Chuyển đổi Base64 theo ngôn ngữ lập trình

Hầu hết ngôn ngữ lập trình đều hỗ trợ mã hóa Base64 sẵn có. JavaScript dùng btoa() để mã hóa, atob() để giải mã, và FileReader API để đọc tệp dưới dạng Base64. Python cung cấp b64encode() và b64decode() trong module base64. PHP dùng các hàm base64_encode() và base64_decode(). Java dùng getEncoder() và getDecoder() thông qua lớp java.util.Base64. Node.js mã hóa bằng Buffer.from(data).toString("base64") và giải mã bằng Buffer.from(base64, "base64"). Việc đọc tệp ảnh và chuyển sang Base64 có thể dễ dàng triển khai bằng thư viện chuẩn trong mọi ngôn ngữ.

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

Khi nào nên bật hoặc tắt tùy chọn "Bao gồm Data URL"?

Giữ bật nếu bạn định dán kết quả trực tiếp vào thẻ img của HTML hoặc CSS background-image, vì cần tiền tố data:image/png;base64,. Tắt nếu bạn chỉ cần chuỗi Base64 thô cho API máy chủ.

Hỗ trợ những định dạng ảnh nào (PNG, JPG, GIF, SVG)?

Bạn có thể tải lên hầu hết các định dạng raster và vector được trình duyệt hỗ trợ - PNG, JPG, GIF, WebP, SVG và nhiều hơn nữa - để chuyển sang Base64, và khi giải mã sẽ khôi phục ảnh bằng MIME type gốc.

Nếu tôi chuyển chuỗi Base64 ngược lại thành ảnh, nó có giống hệt ảnh gốc không?

Có, Base64 là một dạng mã hóa không mất dữ liệu, nên khi giải mã sẽ khôi phục bản sao giống hệt từng pixel của tệp gốc.

Vì sao chuyển ảnh lớn lại thấy chậm hoặc tạo ra chuỗi rất dài?

Mã hóa Base64 làm tăng kích thước khoảng 33% so với dữ liệu nhị phân gốc, và vì được xử lý dưới dạng chuỗi trong bộ nhớ trình duyệt, ảnh càng lớn thì càng mất thời gian và cho ra chuỗi đầu ra dài hơn.

Có an toàn để dùng Base64 đã chuyển đổi trực tiếp trên website của tôi không?

Với việc nhúng ảnh thông thường thì ổn, nhưng nếu bạn hiển thị nguyên trạng các tệp do người dùng tải lên, SVG có thể chứa script nhúng sẵn, nên dịch vụ sản xuất cũng nên thêm xác thực phía máy chủ.