W tym artykule
Czym sa data URI?
Data URI (Uniform Resource Identifier) to schemat pozwalajacy na osadzanie zawartości plikow bezpośrednio w ciągu URL zamiast linkowania do zewnętrznego pliku. Zdefiniowany przez RFC 2397, data URI koduje zawartość w formacie data:[mediatype][;base64],data. Eliminuje to potrzebe osobnego zapytania HTTP do pobrania zasobu.
Data URI sa powszechnie używane do osadzania małych obrazow, czcionek, SVG i innych zasobow bezpośrednio w HTML lub CSS. Zamiast odwoływac sie do zewnętrznego pliku za pomoca URL, cala zawartość pliku jest kodowana (zwykłe w base64) i umieszczana w linii. Moze to zmniejszyc liczbe zapytan HTTP i uproszic wdrozenie dla małych zasobow.
Jak tworzyc data URI
Generator data URI konwertuje zawartość pliku lub tekst do formatu data URI. Proces obejmuje identyfikacje typu MIME i kodowanie zawartości.
- Wprowadzanie tekstu — wpisz tekst bezpośrednio i określ typ MIME (text/plain, text/html, text/css, application/json). Tekst moze byc kodowany URL lub base64
- Przesyłanie pliku — prześlij dowolny plik (obrazy, czcionki, SVG, dokumenty), a generator automatycznie okresli typ MIME i zakoduje zawartość w base64
- Wybor typu MIME — typ mediow mowi przeglądarce, jak interpretowac dane. Popularne typy to image/png, image/svg+xml, text/css i application/javascript
Wypróbuj za darmo — bez rejestracji
Wygeneruj data URI →Kiedy używać data URI
Data URI sa najbardziej korzystne dla małych, często używanych zasobow, gdzie wyeliminowanie zapytania HTTP poprawia wydajność.
- Obrazy tla CSS — osadz male ikony lub wzory bezpośrednio w CSS, aby uniknąć dodatkowych zapytan. Idealne dla obrazow poniżej 2-4 KB
- Inline SVG w CSS — osadz ikony SVG jako data URI we właściwościach background-image, gdy SVG nie moze byc umieszczony bezpośrednio w HTML
- Szablony HTML emaili — osadz obrazy bezpośrednio w HTML emaila, poniewaz wielu klientow poczty blokuje zewnętrzne obrazy domyślnie
Często zadawane pytania
Czy jest limit rozmiaru dla data URI?
Nie ma twardego limitu w specyfikacji, ale istnieja praktyczne ograniczenia. Większość nowoczesnych przeglądarek obsługuje data URI do kilku megabajtow, ale Internet Explorer ogranczal je do 32 KB. Kodowanie base64 zwiększa rozmiar danych o około 33%. Dla zasobow większych niz 5-10 KB, zewnętrzne pliki z odpowiednim buforowaniem sa zwykłe bardziej efektywne.
Czy data URI wpływają na wydajność?
Dla małych zasobow data URI poprawiaja wydajność, eliminując zapytania HTTP. Jednak dane zakodowane w base64 sa około 33% większe niz oryginalny plik, a data URI nie moga byc buforowane niezależnie przez przeglądarkę. Dla dużych plikow, zewnętrzne pliki z nagłówkami buforowania działają lepiej.
Czy data URI sa bezpieczne?
Data URI maja implikacje bezpieczeństwa. Większość przeglądarek blokuje wykonywanie JavaScript w data URI. Jednak data URI moga omijac reguły Content Security Policy (CSP), jeśli nie sa prawidłowo skonfigurowane. Przy akceptowaniu data URI generowanych przez użytkowników, zawsze waliduj typ MIME.