Cách sử dụng
- Nhập văn bản hoặc chọn tệp mà bạn muốn nhúng.
- Kiểm tra hoặc nhập Kiểu MIME, chẳng hạn image/png hay image/svg+xml, rồi chọn Base64 hoặc Mã hóa phần trăm.
- Sao chép data URI vừa tạo vào HTML, CSS hoặc JSON của bạn.
- Để kiểm tra một data URI có sẵn, hãy dán nó vào phần Phân tích để xem kiểu MIME, bảng mã, dung lượng và bản xem trước, rồi tải xuống tệp được nhúng.
Cú pháp data URI
Data URI, được định nghĩa trong RFC 2397, mang một tệp nhỏ ngay bên trong chính URL:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Kiểu phương tiện (media type) cho trình duyệt biết cách diễn giải dữ liệu; khi bị lược bỏ, giá trị mặc định là text/plain;charset=US-ASCII. Cờ ;base64 cho biết phần nằm sau dấu phẩy là Base64. Nếu không có cờ này, dữ liệu là văn bản thuần, trong đó các ký tự đặc biệt được mã hóa phần trăm.
Base64 hay mã hóa phần trăm
Base64 là lựa chọn phù hợp cho tệp nhị phân như PNG, JPEG, WebP, phông chữ và PDF. Nó luôn làm tăng kích thước khoảng 33%. Với các định dạng văn bản, mã hóa phần trăm thường cho kết quả nhỏ hơn, vì phần lớn ký tự được giữ nguyên và chỉ một số ít, như <, >, #, % và dấu ngoặc kép, cần được thoát. Nhờ vậy, cách này rất hợp với biểu tượng SVG, và kết quả dễ đọc cũng nén tốt hơn với gzip hoặc Brotli. Tuy nhiên, mỗi byte của văn bản ngoài ASCII sẽ thành ba ký tự, nên với văn bản tiếng Trung hoặc chữ Kirin, Base64 thường ngắn hơn. Khi không chắc chắn, hãy thử cả hai tùy chọn và giữ lại kết quả ngắn hơn.
/* SVG mã hóa phần trăm trong CSS: dùng dấu nháy đơn bên trong, # viết thành %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Khi nào nên nhúng trực tiếp
Data URI giúp tiết kiệm một yêu cầu HTTP, nhưng dữ liệu sẽ trở thành một phần của tài liệu chứa nó:
- Không được lưu bộ nhớ đệm riêng. Ảnh nhúng trong HTML sẽ bị tải lại cùng mỗi trang. Ảnh nhúng trong stylesheet được lưu bộ nhớ đệm cùng tệp đó, và khi ảnh thay đổi, toàn bộ stylesheet trong bộ nhớ đệm sẽ mất hiệu lực.
- Hiển thị lần đầu chậm hơn. Data URI lớn trong CSS làm chậm quá trình hiển thị, vì trình duyệt phải tải xuống và phân tích toàn bộ stylesheet trước.
- Tăng kích thước. Base64 làm tăng thêm một phần ba, và việc nén HTML hoặc CSS chỉ bù lại được một phần.
Với HTTP/2 và HTTP/3, các yêu cầu bổ sung có chi phí thấp, vì vậy chỉ nên nhúng những tài nguyên nhỏ cỡ vài kilobyte, như biểu tượng, ảnh giữ chỗ nhỏ hoặc ảnh nền quan trọng, còn mọi thứ khác hãy phục vụ như tệp bình thường. Các trang web có Content Security Policy phải cho phép data: trong img-src hoặc font-src thì ảnh và phông chữ được nhúng mới tải được.
Câu hỏi thường gặp
Data URI có giới hạn kích thước không?
RFC 2397 không đặt ra giới hạn nào, và các trình duyệt hiện đại chấp nhận data URI dài vài megabyte trong ảnh và stylesheet. Tuy vậy, data URI lớn vẫn không phải ý hay: chúng làm trang nặng thêm, không thể lưu bộ nhớ đệm riêng và mất nhiều thời gian phân tích hơn.
Vì sao data URI không mở được khi tôi nhấp vào liên kết trỏ đến nó?
Hầu hết trình duyệt chặn trang web điều hướng cửa sổ chính đến URL data:, như một biện pháp chống lừa đảo (phishing). Hãy dùng data URI bên trong ảnh, CSS hoặc liên kết tải xuống, hoặc dán URI vào phần Phân tích tại đây để xem trước và tải xuống nội dung.
Làm thế nào để dùng data URI trong HTML và CSS?
<img src="data:image/png;base64,..."> trong HTML, hoặc background-image: url("data:image/svg+xml,...") trong CSS. Trong CSS, hãy đặt giá trị trong dấu ngoặc kép, nhất là với SVG mã hóa phần trăm.Có cần chỉ định bảng mã (charset) không?
text/plain hoặc text/html có chứa ký tự ngoài ASCII thì có: hãy thêm ;charset=UTF-8 sau kiểu phương tiện, nếu không, giá trị mặc định US-ASCII có thể làm hỏng các ký tự đó. Các kiểu nhị phân như image/png không cần charset.