tigtools

Obraz na Base64

Zamień plik PNG, JPEG, WebP, GIF, SVG lub ICO na tekst Base64, który można osadzić w HTML, CSS lub JSON, albo zdekoduj Base64 z powrotem do obrazu. Plik nie opuszcza przeglądarki.

Działa w przeglądarce Bez rejestracji

Kierunek

lub upuść go tutaj (do 10 MB). Plik pozostaje na Twoim urządzeniu.

Jak używać

  1. Wybierz Image → Base64 i wskaż plik obrazu albo wybierz Base64 → Image, aby wykonać konwersję w drugą stronę.
  2. Wybierz potrzebny format wyniku: adres data URL, zwykły Base64, znacznik img w HTML, regułę background-image w CSS lub Markdown.
  3. Skopiuj wynik i wklej go do kodu, szablonu wiadomości e-mail lub JSON.
  4. Aby zdekodować obraz, wklej adres data URL lub zwykły Base64. Obraz pojawi się w podglądzie i będzie można go pobrać.

Jak to działa

Base64 reprezentuje dane binarne za pomocą 64 drukowalnych znaków, dzięki czemu obraz można umieścić bezpośrednio w formatach tekstowych. Adres data URL zawiera przed nimi typ multimediów, na przykład data:image/png;base64, po którym następują zakodowane bajty. Przeglądarki akceptują adresy data URL wszędzie tam, gdzie dozwolony jest adres obrazu: w atrybucie src znacznika img, w funkcji CSS url() lub jako odwołanie do obrazu SVG.

Zakodowany tekst jest zawsze o około jedną trzecią większy od oryginalnego pliku (4 znaki na każde 3 bajty). Umieszczenie małych ikon i obrazów zastępczych bezpośrednio w kodzie może ograniczyć liczbę osobnych żądań sieciowych, ale takich danych nie można buforować niezależnie — są pobierane ponownie z każdą stroną lub arkuszem stylów, który je zawiera. Dlatego rozwiązanie to rzadko się opłaca w przypadku plików większych niż kilka kilobajtów. Wiele klientów poczty blokuje lub usuwa obrazy z adresów data URL, więc przed użyciem ich w newsletterach sprawdź, czy działają.

Plik jest kodowany bajt po bajcie: nie jest ponownie kompresowany, a zawarte w nim metadane (takie jak EXIF) zostają zachowane. Podczas dekodowania narzędzie akceptuje pełny adres data URL, zwykły Base64, Base64 bezpieczny dla adresów URL oraz tekst skopiowany razem z otaczającym go zapisem CSS url(…). Typ obrazu jest rozpoznawany na podstawie zdekodowanych bajtów, a nie informacji w etykiecie.

Przykłady

Mała ikona w arkuszu stylów

Ikona PNG o rozmiarze 600 bajtów daje ciąg Base64 o długości 800 znaków. Wynik CSS zawiera regułę background-image, którą można wkleić do klasy bez hostowania osobnego pliku.

Obraz z odpowiedzi API

API zwraca pole JSON, na przykład "iVBORw0KGgoAAAANSUhEUg…". Wklej je w trybie Base64 → Image, aby zobaczyć obraz, sprawdzić jego rozmiar i pobrać go jako PNG.

Logo SVG w HTML

Zakodowany SVG daje adres data:image/svg+xml;base64, który działa w znaczniku img. W przypadku SVG sam nieskompresowany kod często jest krótszy niż Base64, więc warto rozważyć bezpośrednie umieszczenie kodu SVG.

Często zadawane pytania

Dlaczego obraz w Base64 jest większy niż oryginał?

Base64 wykorzystuje 4 znaki tekstowe do zapisania 3 bajtów, zwiększając rozmiar o około 33%, a do tego dochodzi jeszcze niewielki narzut związany z prefiksem adresu data URL. Kompresja Gzip lub Brotli na serwerze WWW zmniejsza tę różnicę, ale jej nie eliminuje.

Czy kodowanie zmienia lub kompresuje obraz?

Nie. Kodowane są dokładne bajty pliku, łącznie z metadanymi. Aby skrócić ciąg, najpierw skompresuj obraz lub zmniejsz jego rozmiar.

Czym różni się adres data URL od zwykłego Base64?

Zwykły Base64 to tylko zakodowane bajty. Adres data URL zawiera prefiks, taki jak data:image/jpeg;base64,, który informuje przeglądarkę o typie pliku i pozwala użyć go bezpośrednio jako źródła obrazu.

Czy obowiązuje limit rozmiaru?

Można tu kodować pliki o rozmiarze do 10 MB. Bardzo długie ciągi mogą spowalniać pola tekstowe i edytory, a adresy data URL o takiej wielkości nie są praktyczne na stronach WWW.

Prywatność

Kodowanie i dekodowanie odbywa się w przeglądarce. Obraz ani tekst Base64 nie są przesyłane, przechowywane ani uwzględniane w statystykach.