Nhà phát triển / Mã hóa
Trình tạo Data URI
Biến mọi tệp thành Data URI, kèm các đoạn CSS và HTML sẵn sàng để sao chép, dán, tùy chọn mã hóa URL nhỏ hơn cho SVG và thông tin về mức tăng kích thước của tệp đã mã hóa.
Trình tạo Data URI: Data URI (RFC 2397) đặt trực tiếp nội dung của tệp vào một liên kết hoặc biểu định kiểu, giúp tránh phải gửi một yêu cầu riêng. Mã hóa Base64 biến mỗi 3 byte thành 4 ký tự, nên tệp tăng kích thước khoảng một phần ba; vì SVG là văn bản, bạn có thể mã hóa phần trăm thay thế, chỉ chuyển mã các ký tự như %, #, < và >, thường cho kích thước nhỏ hơn. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
Tệp được đọc trong trình duyệt của bạn và không bao giờ được tải lên.
Data URI hoạt động ở đâu
Data URI hoạt động trong img src, CSS url(), link href dành cho biểu tượng và các liên kết tải xuống. Trình duyệt chặn trang mở data URI dưới dạng trang cấp cao nhất, và Chính sách bảo mật nội dung nghiêm ngặt phải cho phép data: đối với hình ảnh hoặc kiểu dùng chúng.
Để mã hóa văn bản thay vì tệp, hãy dùng bộ mã hóa Base64; với hình ảnh đã có sẵn chuỗi Base64, hãy dùng công cụ hình ảnh sang Base64.
Dung lượng tăng thêm
Base64 làm tăng một phần ba dung lượng tệp, nhưng việc nén văn bản trên máy chủ (gzip hoặc Brotli) sẽ bù lại phần lớn mức tăng này vì văn bản đã mã hóa nén khá tốt. Chi phí thực sự là dữ liệu không thể được lưu vào bộ nhớ đệm riêng và sẽ được tải xuống lại cùng mọi trang hoặc stylesheet chứa dữ liệu đó.
Cách sử dụng
- Chọn hoặc thả một tệp; hình ảnh sẽ được xem trước.
- Với tệp SVG, chọn mã hóa URL hoặc Base64.
- Sao chép Data URI hoặc đoạn CSS hay HTML.
Quyền riêng tư và giới hạn
Tệp được đọc trong trình duyệt của bạn và không bao giờ được tải lên.
Công cụ liên quan
Câu hỏi thường gặp
Khi nào tôi nên dùng Data URI?
Với các tệp nhỏ chỉ được dùng một lần, chẳng hạn như biểu tượng có kích thước dưới vài kilobyte. Các tệp lớn nên được phân phối riêng để trình duyệt có thể lưu vào bộ nhớ đệm và tải chúng song song.
Tại sao nên dùng mã hóa URL cho SVG?
Cách này giữ cho SVG dễ đọc và thường nhỏ hơn Base64; dấu ngoặc kép được đổi thành dấu ngoặc đơn để kết quả vừa bên trong url("…") hoặc một thuộc tính HTML.
Có giới hạn kích thước không?
Các trình duyệt hiện đại chấp nhận Data URI có kích thước nhiều megabyte trong hình ảnh và biểu định kiểu, nhưng Data URI lớn sẽ làm chậm quá trình phân tích cú pháp và khiến trang nặng hơn.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản