Kodowanie
Data URI / Obraz Base64
Kodowanie obrazu do Data URI (data:image/…;base64,…) do wstawienia w CSS/HTML oraz dekodowanie Data URI lub surowego Base64 z powrotem do pliku — wszystko bezpośrednio w przeglądarce.
Tutaj pojawi się podgląd obrazu.
Najczęstsze pytania
Kiedy warto osadzić obraz jako Data URI zamiast linkować plik?
Data URI ma sens dla małych, często używanych grafik (ikon, tła w CSS), gdy zależy Ci na ograniczeniu liczby żądań HTTP. Dla większych lub rzadko zmienianych obrazów zwykły plik jest lepszy, bo przeglądarka może go osobno cache'ować.
Jakie są praktyczne ograniczenia rozmiaru Data URI?
Data URI zwiększa rozmiar danych o około 33% względem oryginalnego pliku (narzut Base64), a niektóre przeglądarki i klienty e-mail mają limity długości URL lub atrybutu, co czyni ten format niepraktycznym dla dużych obrazów.
Czy Data URI jest cache'owany tak samo jak zwykły plik?
Nie. Data URI jest częścią dokumentu HTML lub CSS, w którym się znajduje, więc przeglądarka nie może go cache'ować niezależnie — przy każdym ładowaniu strony obraz jest pobierany razem z resztą kodu.