Data URI nhúng nội dung của một tệp trực tiếp vào HTML, CSS hoặc JS dưới dạng data:[loại];base64,[dữ liệu], không cần yêu cầu HTTP riêng. Ở những nơi phần lớn người dùng truy cập web qua gói data di động giới hạn — vẫn phổ biến ở nhiều khu vực ngoài thành phố lớn tại Việt Nam — mỗi yêu cầu HTTP được lược bỏ đều tạo ra khác biệt thật sự về tốc độ tải và dung lượng tiêu thụ.
Ít yêu cầu hơn, nhưng HTML lại nặng hơn
Trên kết nối 3G/4G không ổn định, độ trễ round-trip của một yêu cầu HTTP thêm vào thường nặng hơn cả kích thước tệp thực tế, nên nhúng các biểu tượng nhỏ dưới dạng Data URI có thể giúp trang hiển thị nhanh hơn ở lần tải đầu. Nhưng cách này có giới hạn — nhúng quá nhiều hình theo kiểu này sẽ làm chính tệp HTML phình to và làm chậm lần tải đầu tiên.
Ưu điểm
- Ít yêu cầu HTTP hơn — hữu ích cho các biểu tượng nhỏ hoặc hình nền trên kết nối chậm.
- Tệp "gắn liền" với tài liệu và không bị hỏng khi đường dẫn CDN thay đổi.
- Phù hợp cho ảnh giữ chỗ cần hiển thị ngay lập tức trước khi ảnh thật tải xong.
Hạn chế
- Base64 làm tăng kích thước dữ liệu khoảng một phần ba so với tệp nhị phân.
- Một Data URI lớn làm phình to chính tệp HTML/CSS và không thể lưu vào bộ nhớ đệm riêng khỏi trang.
- Đối với hình ảnh lớn hoặc tái sử dụng thường xuyên, một tệp riêng có thể lưu bộ nhớ đệm gần như luôn tiết kiệm dữ liệu hơn ở những lần truy cập sau.
SVG dưới dạng văn bản, không cần Base64
Khác với các định dạng ảnh raster, SVG là văn bản (XML), nên không nhất thiết phải mã hóa Base64: chỉ cần escape đúng các ký tự đặc biệt bằng percent-encoding (data:image/svg+xml,%3Csvg...). Cách này giữ kích thước nhẹ hơn một chút và vẫn có thể chỉnh sửa như văn bản thuần ngay trong tệp CSS.