Utilia
Kategorie ▾
Język: pl ▾

Konwerter obrazu na Base64

Zamień obraz na Base64 lub data URI z gotowym kodem CSS i HTML albo zdekoduj Base64 z powrotem na obraz z podglądem. Za darmo, prywatnie, bez przesyłania.

Obraz → Base64

Base64 → obraz

Jak zamienić obraz na Base64

  1. W sekcji Obraz → Base64 upuść obraz na pole albo kliknij je, aby go wybrać (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Wybierz Wynik: Data URI (data:image/png;base64,…), Sam Base64, CSS background-image lub Znacznik HTML , który zawiera też szerokość i wysokość obrazu.
  3. Kliknij Kopiuj albo Pobierz jako .txt przy długich wynikach.

Wiersz pod polem podaje rzeczywisty format (odczytany z bajtów pliku, a nie z jego nazwy), wymiary, wagę pliku i długość data URI.

Jak zamienić Base64 z powrotem na obraz

  1. W sekcji Base64 → obraz wklej tekst w pole Tekst Base64 lub data URI. Możesz wkleić sam ciąg Base64, pełny data URI, a nawet całą regułę CSS albo znacznik <img>: data URI zostanie w nich odnaleziony. Podziały wierszy i spacje są ignorowane, działa też Base64 w wersji URL-safe (z - i _).
  2. Kliknij Dekoduj obraz. Pojawią się podgląd, typ, wymiary i waga.
  3. Kliknij Pobierz obraz, aby zapisać go z właściwym rozszerzeniem pliku.

Typ jest sprawdzany na podstawie „magicznych bajtów” pliku, czyli sygnatury na początku każdego formatu obrazu (na przykład 89 50 4E 47 dla PNG lub FF D8 FF dla JPEG). Jeśli data URI deklaruje image/jpeg, a zawiera PNG, narzędzie cię o tym poinformuje i użyje rzeczywistego typu. Wszystko, co nie jest rozpoznanym obrazem, zostaje odrzucone, a limit wynosi 20 MB danych obrazu.

Jak działa Base64

Base64 zamienia każde 3 bajty pliku na 4 drukowalne znaki z zakresu A–Z, a–z, 0–9, + i /, z = jako dopełnieniem na końcu. Dlatego zakodowany tekst jest o około 33% większy od pliku: ikona 30 KB staje się mniej więcej 40 KB tekstu. Data URI dodaje krótki nagłówek data:<typ>;base64,, żeby przeglądarka wiedziała, jak go odczytać.

Kiedy osadzać obrazy jako data URI

Data URI przydają się do:

  • małych ikon, logo i teł w CSS, żeby zaoszczędzić jedno żądanie;
  • e-maili HTML i jednoplikowych dokumentów HTML, które muszą działać bez zewnętrznych plików;
  • API w JSON-ie i plików konfiguracyjnych, które mogą przenosić tylko tekst.

Słabo nadają się do dużych zdjęć. Tekst jest o jedną trzecią większy od pliku, nie może być buforowany oddzielnie od strony lub arkusza stylów, w którym się znajduje, i opóźnia renderowanie. Powyżej mniej więcej 10–100 KB zwykle lepszy jest normalny plik obrazu serwowany z dobrym buforowaniem – dlatego narzędzie wyświetla przypomnienie dla obrazów większych niż 100 KB.

Wszystko działa w twojej przeglądarce: obrazy i wklejony tekst nigdy nie są przesyłane.

Najczęściej zadawane pytania

Czy Base64 kompresuje lub chroni obraz?

Nie. Base64 powiększa dane o około 33%, a każdy może je zdekodować. Zamienia jedynie dane binarne na tekst, który można przesłać tam, gdzie dane binarne nie przejdą.

Dlaczego mój data URI się nie wyświetla?

Najczęstsze przyczyny to brakujący lub błędny typ w nagłówku, spacje albo cudzysłowy wklejone w środek ciągu lub ucięty tekst. Wklej go w sekcji Base64 → obraz: narzędzie zgłosi niepoprawne znaki i sprawdzi rzeczywisty typ.

Czy mogę użyć SVG jako data URI?

Tak. SVG można zakodować w Base64 jak każdy obraz. W przypadku SVG data URI zakodowany procentowo (data:image/svg+xml,%3Csvg…) bywa krótszy; to narzędzie dekoduje obie formy.

Czy działa z obrazami HEIC lub AVIF?

Kodowanie działa z każdym plikiem obrazu. Podgląd pojawi się tylko wtedy, gdy twoja przeglądarka potrafi wyświetlić dany format, ale tekst Base64 i pobrany plik są zawsze poprawne.

Czy jest limit rozmiaru?

Tak, 20 MB danych obrazu w obu kierunkach. Dłuższe ciągi spowalniają przeglądarki i rzadko są dobrym pomysłem na stronie internetowej.

Podobne narzędzia