W tym artykule
Czym sa data URI?
Data URI (Uniform Resource Identifier) to schemat pozwalajacy na osadzanie zawartosci plikow bezposrednio w ciagu URL zamiast linkowania do zewnetrznego pliku. Zdefiniowany przez RFC 2397, data URI koduje zawartosc w formacie data:[mediatype][;base64],data. Eliminuje to potrzebe osobnego zapytania HTTP do pobrania zasobu.
Data URI sa powszechnie uzywane do osadzania malych obrazow, czcionek, SVG i innych zasobow bezposrednio w HTML lub CSS. Zamiast odwoływac sie do zewnetrznego pliku za pomoca URL, cala zawartosc pliku jest kodowana (zwykle w base64) i umieszczana w linii. Moze to zmniejszyc liczbe zapytan HTTP i uproszic wdrozenie dla malych zasobow.
Jak tworzyc data URI
Generator data URI konwertuje zawartosc pliku lub tekst do formatu data URI. Proces obejmuje identyfikacje typu MIME i kodowanie zawartosci.
- Wprowadzanie tekstu — wpisz tekst bezposrednio i okresl typ MIME (text/plain, text/html, text/css, application/json). Tekst moze byc kodowany URL lub base64
- Przesylanie pliku — przeslij dowolny plik (obrazy, czcionki, SVG, dokumenty), a generator automatycznie okresli typ MIME i zakoduje zawartosc w base64
- Wybor typu MIME — typ mediow mowi przegladarce, 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 uzywac data URI
Data URI sa najbardziej korzystne dla malych, czesto uzywanych zasobow, gdzie wyeliminowanie zapytania HTTP poprawia wydajnosc.
- Obrazy tla CSS — osadz male ikony lub wzory bezposrednio w CSS, aby uniknac dodatkowych zapytan. Idealne dla obrazow ponizej 2-4 KB
- Inline SVG w CSS — osadz ikony SVG jako data URI we wlasciwosciach background-image, gdy SVG nie moze byc umieszczony bezposrednio w HTML
- Szablony HTML emaili — osadz obrazy bezposrednio w HTML emaila, poniewaz wielu klientow poczty blokuje zewnetrzne obrazy domyslnie
Czesto zadawane pytania
Czy jest limit rozmiaru dla data URI?
Nie ma twardego limitu w specyfikacji, ale istnieja praktyczne ograniczenia. Wiekszosc nowoczesnych przegladarek obsluguje data URI do kilku megabajtow, ale Internet Explorer ogranczal je do 32 KB. Kodowanie base64 zwieksza rozmiar danych o okolo 33%. Dla zasobow wiekszych niz 5-10 KB, zewnetrzne pliki z odpowiednim buforowaniem sa zwykle bardziej efektywne.
Czy data URI wplywaja na wydajnosc?
Dla malych zasobow data URI poprawiaja wydajnosc, eliminujac zapytania HTTP. Jednak dane zakodowane w base64 sa okolo 33% wieksze niz oryginalny plik, a data URI nie moga byc buforowane niezaleznie przez przegladarke. Dla duzych plikow, zewnetrzne pliki z naglowkami buforowania dzialaja lepiej.
Czy data URI sa bezpieczne?
Data URI maja implikacje bezpieczenstwa. Wiekszosc przegladarek blokuje wykonywanie JavaScript w data URI. Jednak data URI moga omijac reguly Content Security Policy (CSP), jesli nie sa prawidlowo skonfigurowane. Przy akceptowaniu data URI generowanych przez uzytkownikow, zawsze waliduj typ MIME.