Jak używać
- Wpisz tekst lub wybierz plik, który chcesz osadzić.
- Sprawdź lub wpisz typ MIME, np. image/png lub image/svg+xml, i w polu „Kodowanie” wybierz „Base64” lub „Kodowanie procentowe”.
- Skopiuj wygenerowany data URI do kodu HTML, CSS lub JSON.
- Aby sprawdzić istniejący data URI, przejdź do trybu „Analizuj” i wklej go tam: zobaczysz typ MIME, zestaw znaków, rozmiar i podgląd, a osadzony plik będzie można pobrać.
Składnia data URI
Data URI, zdefiniowany w RFC 2397, przenosi niewielki plik bezpośrednio w samym adresie URL:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Typ MIME informuje przeglądarkę, jak interpretować dane; jeśli zostanie pominięty, przyjmuje się text/plain;charset=US-ASCII. Flaga ;base64 oznacza, że część po przecinku jest zakodowana w Base64. Bez niej dane są zwykłym tekstem, w którym znaki specjalne zapisuje się w kodowaniu procentowym.
Base64 czy kodowanie procentowe
Base64 to właściwy wybór dla plików binarnych, takich jak PNG, JPEG, WebP, czcionki i pliki PDF. Zawsze zwiększa rozmiar o około 33%. W przypadku formatów tekstowych kodowanie procentowe często daje krótszy wynik, ponieważ większość znaków pozostaje bez zmian, a zakodować trzeba tylko nieliczne, takie jak <, >, #, % i cudzysłowy. Dlatego dobrze sprawdza się przy ikonach SVG, a czytelny wynik lepiej kompresuje się też za pomocą gzip lub Brotli. Każdy bajt tekstu spoza ASCII zamienia się jednak w trzy znaki, więc dla tekstu chińskiego lub zapisanego cyrylicą Base64 jest zwykle krótszy. W razie wątpliwości wypróbuj obie opcje i zachowaj krótszy wynik.
/* SVG w kodowaniu procentowym w CSS: wewnątrz apostrofy, # zapisany jako %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Kiedy osadzanie się opłaca
Data URI oszczędza jedno żądanie HTTP, ale dane stają się częścią dokumentu, który je zawiera:
- Brak osobnego buforowania. Obraz osadzony w HTML jest pobierany ponownie z każdą stroną. Obraz osadzony w arkuszu stylów jest buforowany razem z tym plikiem, a jego zmiana unieważnia cały arkusz.
- Wolniejsze pierwsze renderowanie. Duże data URI w CSS opóźniają renderowanie, ponieważ przeglądarka musi najpierw pobrać i przeanalizować cały arkusz stylów.
- Narzut rozmiaru. Base64 dodaje jedną trzecią, co kompresja HTML lub CSS odzyskuje tylko częściowo.
W HTTP/2 i HTTP/3 dodatkowe żądania są tanie, dlatego osadzaj tylko małe zasoby o rozmiarze kilku kilobajtów, takie jak ikony, drobne obrazy zastępcze lub krytyczne tło, a całą resztę serwuj jako zwykłe pliki. Witryny z Content Security Policy muszą zezwolić na data: w img-src lub font-src, aby osadzone obrazy i czcionki mogły się załadować.
Najczęściej zadawane pytania
Czy data URI mają limit rozmiaru?
RFC 2397 nie określa limitu, a nowoczesne przeglądarki akceptują w obrazach i arkuszach stylów data URI o rozmiarze kilku megabajtów. Duże data URI to jednak zły pomysł: powiększają stronę, nie mogą być buforowane osobno i dłużej trwa ich analiza.
Dlaczego data URI nie otwiera się po kliknięciu prowadzącego do niego linku?
Większość przeglądarek w ramach ochrony przed phishingiem nie pozwala stronom internetowym przenosić okna głównego pod adres data:. Używaj data URI w obrazach, CSS lub linkach do pobierania albo wklej adres w trybie „Analizuj” na tej stronie, aby zobaczyć podgląd i pobrać zawartość.
Jak używać data URI w HTML i CSS?
<img src="data:image/png;base64,..."> w HTML lub background-image: url("data:image/svg+xml,...") w CSS. W CSS ujmij wartość w cudzysłów, zwłaszcza w przypadku SVG w kodowaniu procentowym.Czy trzeba podawać zestaw znaków?
text/plain lub text/html, zawierających znaki spoza ASCII, tak: dodaj ;charset=UTF-8 po typie MIME, w przeciwnym razie domyślne US-ASCII może je zniekształcić. Typy binarne, takie jak image/png, nie wymagają zestawu znaków.