Data URL: data:text/html;base64 i pokrewne, wyjaśnienie
Data URL (data: URI)
Data URI i data:text/html;base64 wyjaśnione, z enkoderem | We.Inc
Jak działają adresy data:: składnia, base64 kontra kodowanie procentowe, narzut rozmiaru o jedną trzecią, dlaczego data:text/html nie otworzy się w karcie, a do tego enkoder i dekoder.
Data URL przenosi cały plik wewnątrz samego adresu: data:, opcjonalny typ mediów, ;base64, jeśli bajty są zakodowane w base64, przecinek, a potem treść. data:text/html;base64,PGgxPkhpPC9oMT4= to malutka strona internetowa. Base64 powiększa dane o około jedną trzecią, a przeglądarki odmawiają otwierania stron data: jako karty najwyższego poziomu.
Budowa adresu data URL
Część
Przykład
Uwagi
Schemat
data:
Zawsze na początku
Typ mediów
image/svg+xml
Opcjonalny; domyślnie text/plain;charset=US-ASCII
Parametry
;charset=utf-8
Opcjonalne, po typie mediów
Flaga kodowania
;base64
Obecna tylko wtedy, gdy dane są w base64
Separator
Wymagany, nawet bez typu mediów
Dane
PHN2Zz4uLi48L3N2Zz4=
Base64 lub tekst zakodowany procentowo
Data URL przydają się do małych ikon, teł w CSS, danych testowych i generowanych plików do pobrania, a zarazem często wprowadzają w błąd, gdy ktoś wkleja długi ciąg data:text/html do paska adresu i nic się nie dzieje. Poniżej możesz zakodować dowolny tekst do data URL, zdekodować go z powrotem i zobaczyć dokładnie, ile kosztuje w bajtach w porównaniu z oryginałem.
Wpisz lub wklej treść i wybierz jej typ mediów. Narzędzie pokazuje formę base64 i formę zakodowaną procentowo wraz z ich długościami.
Porównaj rozmiary. Base64 to blisko cztery znaki na każde trzy bajty; kodowanie procentowe może być krótsze dla zwykłego tekstu i SVG.
Wklej dowolny data URL do dekodera, aby odczytać jego typ mediów, kodowanie i zawartość. Typy obrazów pokazują podgląd.
Wyniki HTML są renderowane w odizolowanej ramce, bo strony data: nie można otworzyć jako osobnej karty.
Dla SVG w CSS kodowanie procentowe jest zwykle mniejsze niż base64 i pozostaje czytelne. Pamiętaj, aby zakodować # jako %23.
Osadzaj tylko małe pliki. Data URL nie może być cache'owany osobno, więc duży jest pobierany ponownie z każdą stroną lub arkuszem stylów, który go zawiera.
Bez żadnego typu mediów domyślny jest text/plain;charset=US-ASCII, więc podaj typ i dodaj charset=utf-8 dla tekstu z polskimi znakami lub emoji.
Data URL nie obsługują query stringów. Wszystko po przecinku, łącznie ze znakiem zapytania, jest traktowane jako dane.
Dla plików generowanych przez odwiedzającego na stronie adres blob: z URL.createObjectURL pozwala uniknąć budowania ogromnego ciągu.
Najczęściej zadawane pytania
Dlaczego data:text/html;base64 nie otwiera się po wklejeniu do paska adresu?
Nowoczesne przeglądarki blokują nawigację najwyższego poziomu do adresów data: jako ochronę przed phishingiem, bo strona data mogłaby udawać dowolny serwis, ukrywając swoje prawdziwe pochodzenie. Treść nadal działa wewnątrz iframe, elementu img lub jako link do pobrania.
O ile base64 powiększa plik?
Mniej więcej o jedną trzecią. Base64 zapisuje każde trzy bajty jako cztery znaki, więc obraz 30 KB staje się około 40 KB tekstu przed jakąkolwiek kompresją. Dokładny przyrost zależy od długości i dopełnienia.
Jak zamienić data URL w base64 z powrotem na obraz?
Wklej go do dekodera na tej stronie, aby zobaczyć podgląd, albo wstaw go bezpośrednio do img src. Aby zapisać go jako plik, użyj naszego narzędzia image to base64 w odwrotną stronę lub pobierz data URL przez fetch w JavaScripcie i zapisz otrzymany Blob.
Czy jest limit rozmiaru?
MDN podaje 512 MB dla Chromium i Firefoksa oraz 2,048 MB dla Safari. Na długo przed tym ogromne data URL spowalniają parsowanie HTML i CSS i uniemożliwiają cache'owanie, więc ogranicz je do kilku kilobajtów.
Jakie pochodzenie (origin) ma strona z data URL?
Własne, nieprzezroczyste pochodzenie, a nie pochodzenie strony, która ją utworzyła. Skrypt wewnątrz iframe data: jest więc traktowany przez stronę, która go zawiera, jak obcy, a nie jako część tego samego serwisu.
Kiedy osadzanie pomaga, a kiedy szkodzi
Osadzanie oszczędza jedno żądanie, co ma znaczenie przy kilku małych zasobach, takich jak spinner ładowania czy favicon w jednoplikowym demo. Szkodzi, gdy zasób jest duży lub używany na wielu stronach, bo bajty jadą z każdym plikiem HTML lub arkuszem stylów, zamiast zostać raz zapisane w cache.
Rozsądna zasada: osadzaj rzeczy poniżej kilku kilobajtów, które pojawiają się raz, a wszystko inne linkuj jako zwykły plik.
Base64 czy kodowanie procentowe?
Pliki binarne, takie jak PNG, JPEG i fonty, wymagają base64. Formaty tekstowe, zwłaszcza SVG, mogą używać kodowania procentowego: escapowania wymagają tylko znaki takie jak #, %, < i > oraz spacje, więc wynik jest często krótszy i nadal czytelny dla człowieka.
Enkoder poniżej pokazuje obie długości obok siebie, abyś mógł wybrać mniejszą dla swojej treści.
Typowe błędy
Literówka w base64, przypadkowy podział linii lub zły typ mediów zawodzą po cichu: obraz po prostu się nie wyświetla. Przepuść zepsuty ciąg przez dekoder, aby zobaczyć, gdzie jest błąd.
Innym częstym potknięciem jest pominięcie przecinka, gdy nie ma typu mediów. data:,Hello jest poprawny; data:Hello nie jest użytecznym data URL.
Data URL w prawdziwym kodzie
Tło SVG w CSS, zakodowane procentowo
Pojedyncze cudzysłowy wewnątrz SVG nie kolidują z podwójnymi wokół url(), a # w kolorze jest zapisany jako %23.
Malutki obraz osadzony w kodzie
Ten sam pomysł działa w tagu img. Zachowaj tekst alt, jak przy każdym obrazie.
Zbudowanie data URL z pliku w JavaScripcie
FileReader.readAsDataURL tworzy pełny ciąg data:, łącznie z typem mediów, dla pliku wybranego przez odwiedzającego.
Zamiana data URL z powrotem na Blob
fetch rozumie adresy data:, co jest najkrótszą drogą, by odzyskać bajty.
Enkoder i dekoder data URL
Treść do zakodowania
Typ mediów
Data URL w base64
Data URL zakodowany procentowo
Oryginał {n} bajtów, URL w base64 {v} znaków
URL zakodowany procentowo {v} znaków
Wyrenderowane w odizolowanej ramce
Zdekoduj data URL
Wklej data URL
Typ mediów: {v}
Kodowanie: {v}
Rozmiar po zdekodowaniu: {n} bajtów
To nie wygląda na poprawny data URL. Potrzebne są data:, opcjonalny typ, przecinek i dane.