Data URI osadza zawartość pliku bezpośrednio w HTML, CSS lub JS jako data:[typ];base64,[dane], bez osobnego żądania HTTP. Poza wydajnością ma to skutek uboczny istotny z punktu widzenia RODO: eliminuje żądanie sieciowe do (czasem zewnętrznego) serwera, czyli jedną okazję mniej na zapisanie adresu IP i momentu odwiedzin w logach.
Mniej żądań to także mniej śladów u stron trzecich
Każdy obraz wczytywany przez zwykły URL to żądanie HTTP, które serwer albo zewnętrzne CDN może zapisać w logach. Osadzając mały obraz jako Data URI bezpośrednio w stronie, eliminuje się to żądanie całkowicie — szczegół, który coraz częściej pojawia się przy audytach zgodności z RODO, zwłaszcza przy pikselach śledzących ukrytych jako niewinne ikonki.
Zalety
- Mniej żądań HTTP — przydatne dla małych ikon lub obrazów tła, a przy okazji mniej logów u stron trzecich.
- Plik jest „przypięty" do dokumentu i nie psuje się, gdy zmieni się ścieżka CDN.
- Wygodne dla placeholderów, które muszą pojawić się natychmiast, zanim załaduje się właściwy obraz.
Ograniczenia
- Base64 zwiększa rozmiar danych o około jedną trzecią w porównaniu z plikiem binarnym.
- Duży Data URI powiększa sam plik HTML/CSS i nie może być buforowany osobno od strony.
- Dla dużych lub często ponownie wykorzystywanych obrazów osobny plik z buforowaniem jest przy kolejnych wizytach niemal zawsze wydajniejszy.
SVG jako tekst, a nie Base64
W przeciwieństwie do formatów rastrowych, SVG to tekst (XML), więc nie trzeba go kodować w Base64: wystarczy poprawnie escapować znaki specjalne przez percent-encoding (data:image/svg+xml,%3Csvg...). Taki wariant pozostaje lżejszy i czytelny jako zwykły tekst wprost w wersjonowanym pliku CSS.