Konwerter obrazów na Base64

Do czego służy

To narzędzie zamienia obraz na tekst Base64 i gotowy do wklejenia data URI. Data URI osadza obraz bezpośrednio w HTML, CSS, Markdown, JSON lub e-mailu, więc strona potrzebuje o jedno żądanie HTTP mniej, a fragment kodu działa bez hostowania osobnego pliku. Działa też w drugą stronę: wklej Base64 lub data URI, aby zobaczyć podgląd obrazu i go pobrać.

Jak używać

1. Upuść obraz w strefie upuszczania, naciśnij Wybierz obraz lub naciśnij Przykład, aby wczytać logo SVG.
2. Podgląd pokazuje obraz wraz z typem, rozmiarem pliku, rozmiarem Base64 i wymiarami.
3. Wybierz format w opcji Wynik:
   • Data URI: data:image/png;base64,…, do atrybutów src i JSON.
   • Tylko Base64: sam ciąg, opcjonalnie zawijany co 76 znaków do zastosowań w stylu MIME i PEM.
   • Tło CSS: kompletna deklaracja background-image: url("…");.
   • HTML <img>: znacznik obrazu z data URI jako src.
   • Markdown: ![image](data:…).
4. Skopiuj wynik. Aby zamiast tego dekodować, wklej Base64 lub data URI w polu wejściowym i naciśnij Pobierz obraz.

Przykład

PNG o wymiarach 2×1 piksel daje:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Użycie w CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Kiedy osadzać obrazy

Osadzanie pomaga przy małych, często używanych obrazach, takich jak ikony, drobne tła, wskaźniki ładowania i podpisy e-mail. Słabo sprawdza się przy zdjęciach i dużych grafikach: Base64 dodaje około jednej trzeciej do rozmiaru, obrazu nie da się zcache’ować oddzielnie od strony lub arkusza stylów, a do tego opóźnia parsowanie reszty pliku. Praktyczna zasada: osadzone obrazy powinny mieć najwyżej kilka kilobajtów. W przypadku SVG data URI z kodowaniem procentowym (data:image/svg+xml,…) jest często mniejsze niż Base64, a narzędzie akceptuje obie formy.