Công cụ tạo Data URI

Tạo Data URI là gì?

Data URI nhúng trực tiếp một file vào HTML, CSS hoặc JSON dưới dạng data:<mime>;base64,<data>, nên không cần request riêng. Công cụ này chuyển mọi file (ảnh, font, SVG, PDF…) hoặc văn bản bạn gõ thành data URI, nhận diện kiểu MIME, cho phép chọn Base64 hoặc percent-encoding và cung cấp đoạn mã HTML, CSS tương ứng.

Cách sử dụng Tạo Data URI

1. Chọn Tệp và thả một file vào, hoặc chọn Văn bản và gõ nội dung.
2. Kiểm tra hoặc sửa Kiểu MIME.
3. Giữ bật Mã hóa Base64 với file nhị phân; tắt đi để percent-encode văn bản và SVG (thường nhỏ hơn).
4. Sao chép Data URI hoặc đoạn mã HTML / CSS.

Ví dụ

Text: Hello, World! (Base64 on)

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

Khi nào nên dùng Tạo Data URI

Dùng data URI cho tài nguyên nhỏ: icon, SVG nhỏ, ảnh giữ chỗ, font trong demo một file hoặc mẫu email, và dữ liệu kiểm thử. Tránh dùng cho file lớn hơn vài kilobyte trên website: Base64 làm tăng kích thước khoảng 33% và dữ liệu nhúng không thể được cache riêng khỏi trang hay stylesheet.

Tạo Data URI hoạt động như thế nào

File được đọc dưới dạng byte trong trình duyệt. Kiểu MIME lấy từ trình duyệt hoặc phần mở rộng của file. Với Base64, các byte được mã hóa bằng bảng chữ cái chuẩn (RFC 4648) và viết thành data:<mime>;base64,… (RFC 2397). Không dùng Base64 thì nội dung được giải mã thành UTF-8 và escape bằng encodeURIComponent, đồng thời thêm ;charset=utf-8 cho các kiểu văn bản. Ảnh được hiển thị xem trước, và kích thước của kết quả cũng được hiển thị.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Nhúng icon SVG nhỏ vào CSS background-image
• ✓ Nhúng ảnh vào báo cáo HTML chỉ gồm một file
• ✓ Đưa một ảnh nhỏ vào fixture JSON của API
• ✓ Tạo ảnh chữ ký email tự chứa

Câu Hỏi Thường Gặp

Khám phá thêm danh mục