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.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Artykuł o tym narzędziu: Data URI: kiedy osadzać obrazy bezpośrednio w kodzie
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.
Czy można użyć Data URI dla SVG bez Base64?
Tak. SVG to tekst (XML), więc zamiast Base64 wystarczy percent-encoding znaków specjalnych: data:image/svg+xml,%3Csvg...%3E. Taki wariant jest bardziej kompaktowy i pozostaje edytowalny wprost w pliku CSS.
Czy Data URI można wstawić w atrybut href lub background-image?
Tak, Data URI działa wszędzie tam, gdzie oczekiwane jest odwołanie do zasobu — w src, href, background-image w CSS, a nawet w @import. Składnia i limity rozmiaru są takie same jak dla znacznika img.