Mã hóa

Data URI / Ảnh Base64

Mã hóa ảnh thành Data URI (data:image/…;base64,…) để chèn vào CSS/HTML, và giải mã Data URI hoặc Base64 thô trở lại thành tệp — tất cả ngay trong trình duyệt.

Bản xem trước ảnh sẽ hiện ở đây.

A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.

How to use it

Common uses

Things to keep in mind

Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.

A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.

Bài viết về công cụ này: Data URI: khi nào nên nhúng hình ảnh trực tiếp vào mã

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

Khi nào nên dùng Data URI thay vì tệp ảnh thông thường?

Data URI hữu ích cho các ảnh nhỏ, dùng thường xuyên như biểu tượng hay logo, khi bạn muốn tránh thêm một yêu cầu HTTP — ví dụ nhúng ảnh trực tiếp vào CSS hoặc HTML inline.

Dùng Data URI cho ảnh có nhược điểm gì không?

Có. Chúng làm tăng kích thước tệp (lớn hơn khoảng 33% so với ảnh gốc do Base64), không được trình duyệt lưu cache riêng như một URL ảnh thật, và nhiều trình duyệt cũng như ứng dụng email giới hạn kích thước Data URI.

Công cụ này có tải ảnh của tôi lên đâu không?

Không. Ảnh được đọc và mã hóa hoàn toàn trong trình duyệt của bạn — không bao giờ được gửi tới máy chủ.

Có thể dùng Data URI cho SVG mà không cần Base64 không?

Có. SVG là văn bản (XML), nên thay vì Base64, chỉ cần percent-encoding các ký tự đặc biệt: data:image/svg+xml,%3Csvg...%3E. Cách này gọn hơn và vẫn chỉnh sửa được ngay trong tệp CSS.

Có thể chèn Data URI vào thuộc tính href hay background-image không?

Có, Data URI hoạt động ở bất cứ đâu cần tham chiếu đến tài nguyên — trong src, href, background-image trong CSS và cả trong @import. Cú pháp và giới hạn kích thước giống hệt như với thẻ img.

Bài viết: Mã hóa

Base64: mã hóa để làm gì và hoạt động ra sao

Base64 biến dữ liệu nhị phân thành văn bản ASCII như thế nào và khi nào thực sự cần đến nó.

Base32: khác gì với Base64 và khi nào tiện hơn

Bảng chữ cái Base32 không phân biệt hoa thường và các trường hợp nó tiện hơn Base64.

URL Encode/Decode: percent-encoding trong liên kết

Các ký tự đặc biệt trong địa chỉ và tham số trở thành chuỗi %XX như thế nào.

HTML Entities: cách hiển thị ký tự đặc biệt an toàn

Vì sao các ký tự < > & cần được escape và điều đó giúp tránh hỏng mã HTML thế nào.

JWT: cấu trúc token và "giải mã" JWT nghĩa là gì

Header, payload và signature của JWT, và vì sao giải mã không giống với xác minh chữ ký.

Unicode Escape: chuỗi \uXXXX nghĩa là gì

Chuỗi kiểu \u0041 trong JSON và chuỗi JS đến từ đâu và chúng nghĩa là gì.

ROT13 và mật mã Caesar: thay thế ký tự đơn giản

Vì sao dịch 13 chữ cái khiến ROT13 tự nghịch đảo, và vì sao ngày nay người ta vẫn dùng nó.

Punycode: tên miền quốc tế hóa hoạt động thế nào trong DNS

Một tên miền chứa ký tự không phải Latinh trở thành dạng ASCII với tiền tố xn-- như thế nào.

Mã Morse: văn bản biến thành chấm và gạch ra sao

Nguyên lý mã hóa chữ cái thành chấm và gạch, và mã Morse còn được dùng ở đâu hiện nay.

Gzip + Base64: nén dữ liệu để truyền dưới dạng văn bản

Vì sao dữ liệu nhị phân đã nén còn được mã hóa Base64 trước khi đưa vào trường văn bản.

XML Entities: escape ký tự trong tài liệu XML

Năm entity XML bắt buộc, thiếu chúng tài liệu sẽ hỏng khi phân tích cú pháp.