UltKit
Obrazy11
Konwerter obrazówKompresja zdjęćZmiana rozmiaru zdjęciaPrzycinanie zdjęćObraz do PDFZdjęcie do paszportuObraz do SVGWszystkie narzędzia: Obrazy →
PDF13
Kompresja PDFKonwerter PDFPDF do obrazuŁączenie PDFDzielenie PDFOdblokowanie PDFZabezpieczanie PDFWszystkie narzędzia: PDF →
Dokumenty i dane7
Konwersja do PDFKonwerter dokumentówObraz na tekst (OCR)Obraz do ExcelaKonwerter danychKonwerter e-bookówWszystkie narzędzia: Dokumenty i dane →
Wideo6
Konwerter wideoKompresja wideoWideo do audioWideo do GIFPrzycinanie wideoAudio do wideoWszystkie narzędzia: Wideo →
Audio4
Konwerter audioKompresja audioPrzycinanie audioAudio na tekstWszystkie narzędzia: Audio →
Więcej narzędzi22
Generator kodów QRPakowanie do ZIPRozpakowywanie onlineKonwerter stref czasowychPrzelicznik jednostekGenerator hasełLicznik słówPróbnik kolorówWszystkie pozostałe narzędzia →
BlogJak to działa

Konwerter obrazów do Base64

Zamień plik graficzny na wiersz tekstu, który wkleisz do HTML, CSS, żądania JSON lub pliku Markdown. Prefiks data URI jest już dodany na początku, więc kod działa od razu po wklejeniu.

Konwerter danych

lub upuść Pliki CSV, TSV, TXT … tutaj ·

Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min

Plik wynikowy

Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.

Jak korzystać z narzędzia

  1. 1

    Dodaj obrazy

    Przeciągnij pliki PNG, JPG, GIF, WebP lub SVG na obszar przesyłania: do 20 naraz, każdy do 95 MB.

  2. 2

    Zostaw lub usuń prefiks

    Opcja Prefiks Data URI jest włączona, więc wynik zaczyna się od data:image/png;base64, lub odpowiedniego typu. Wyłącz ją w sekcji Ustawienia zaawansowane, gdy API wymaga samego ciągu Base64.

  3. 3

    Konwertuj i skopiuj

    Kliknij Konwertuj na Base64 text i pobierz plik .txt dla każdego obrazu, gotowy do wklejenia w kodzie.

Prześlij obraz i kliknij Konwertuj na Base64 text. Otrzymasz plik zakodowany jako zwykłe znaki, zaczynający się od data:image/…;base64, więc można go od razu wstawić do img src lub CSS url(). Obraz się nie zmienia.

Kiedy przydaje się obraz w Base64

Base64 zdefiniowano w RFC 4648 (2006). Każde 3 bajty danych binarnych są w nim zamieniane na 4 znaki z 64-znakowego alfabetu A–Z, a–z, 0–9, + i /. Wynik przejdzie przez każdy kanał przeznaczony dla tekstu. Schemat data URI, opisany przez Larry'ego Masintera w RFC 2397 w 1998 roku, pozwala następnie przeglądarce traktować ten tekst jak plik.

Programiści front-endu osadzają małe ikony, animacje ładowania i obrazy zastępcze, aby strona wyświetlała się bez dodatkowych żądań. Programiści back-endu wysyłają obrazy w JSON, bo wiele API, w tym usługi analizy obrazu i OCR, przyjmuje obraz jako pole Base64. Testerzy trzymają dane testowe w kodzie źródłowym, a osoby tworzące raporty HTML w jednym pliku lub notatki w Markdownie osadzają zrzuty ekranu, aby plik pozostał samodzielny po wysłaniu e-mailem lub archiwizacji.

Jak wygląda wynik w Base64

Przezroczysty PNG 1 × 1 (68 bajtów) jako data URI w znaczniku img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Piksel">

Plik PNG z ikoną

24 KB

typowy zestaw ikon paska narzędzi, 96 × 96 px

+33% rozmiaru, zero zmian jakości

Tekst Base64

32 KB

4 znaki na 3 bajty, plus prefiks

ANY I

Dowolny obraz

To narzędzie obsługuje popularne formaty obrazów, w tym JPG, PNG, WebP, HEIC, GIF, BMP i TIFF. Format jest wykrywany automatycznie na podstawie pliku, więc nie musisz wiedzieć, jaki typ obrazu masz.

Konwerter Any image

BASE64

Tekst zakodowany w Base64

Base64 to kodowanie zdefiniowane w RFC 4648, które zamienia dowolne dane binarne w ciąg 64 bezpiecznych znaków tekstowych. Służy do osadzania obrazów w HTML i CSS jako data URI, dołączania plików do poczty oraz przesyłania danych binarnych w JSON lub XML. Kodowanie jest w pełni odwracalne, ale zwiększa rozmiar danych o około 33%. Base64 nie jest szyfrowaniem i nie zapewnia bezpieczeństwa; każdy może je zdekodować.

Kompresja
Bezstratna
Przezroczystość
–
Animacja
–
Rok powstania
–
Konwerter BASE64

Obrazy zamienia się na tekst Base64, gdy muszą trafić tam, gdzie przechodzi tylko tekst: do pliku HTML lub CSS bez osobnego żądania, do pola JSON w wywołaniu API, do danych testowych albo do raportu w jednym pliku.

Kiedy osadzenie obrazu w kodzie pomaga stronie, a kiedy szkodzi

Osadzanie oszczędza jedno żądanie, co miało największe znaczenie w HTTP/1.1, gdy przeglądarki otwierały tylko kilka połączeń na witrynę. Przy multipleksowaniu w HTTP/2 i HTTP/3 dodatkowe małe żądania są tanie, więc korzyść maleje, a koszty zostają: zakodowany obraz nie może być osobno buforowany, jest pobierany ponownie przy każdej zmianie HTML lub CSS i opóźnia analizę pliku, w którym się znajduje.

Rozsądna zasada: osadzaj tylko obrazy o wielkości kilku kilobajtów, które pojawiają się na każdej stronie, jak logo czy sprite z ikonami, a resztę serwuj jako pliki. Zdjęcia prawie nigdy nie nadają się do osadzenia. Jeśli potrzebujesz innego typu pliku, a nie tekstu, zajmie się tym konwerter obrazów.

Zalety obrazów Base64

  • Jeden samodzielny plik HTML, CSS lub JSON
  • Brak dodatkowego żądania dla małych ikon
  • Bezpieczne w JSON, XML i innych formatach tekstowych
  • Bezstratne i odwracalne

Koszty obrazów Base64

  • Około 33% większe niż plik binarny
  • Przeglądarka nie buforuje go osobno
  • Wiele klientów poczty blokuje takie obrazy
  • Trudne do przeglądania w różnicach kodu

Pytania o konwersję obrazu do Base64

Czym różni się Base64 od data URI?

Base64 to same zakodowane znaki. Data URI dodaje do nich schemat i typ, data:image/png;base64, a po nich znaki, dzięki czemu przeglądarka wie, jak je zdekodować i wyświetlić. HTML i CSS potrzebują pełnego data URI, a większość API JSON wymaga samej części Base64.

O ile większy staje się obraz w Base64?

Base64 zapisuje 4 znaki na każde 3 bajty, więc tekst jest o około jedną trzecią większy od pliku, plus krótki prefiks. PNG o rozmiarze 30 KB daje około 40 KB tekstu. Jeśli HTML lub CSS jest serwowany skompresowany gzipem, część tego narzutu odzyskuje się podczas transferu.

Czy można użyć obrazu Base64 w stopce e-mail?

To zawodne rozwiązanie. Gmail nie wyświetla obrazów data URI, a kilka programów pocztowych na komputery również je usuwa, więc odbiorcy widzą uszkodzoną ikonę. Umieść obraz na serwerze WWW lub dołącz go jako załącznik, a Base64 zostaw dla stron i aplikacji.

Czy ikonę SVG warto kodować w Base64?

Działa, ale SVG jest już tekstem. Zakodowanie znaczników w URL zamiast w Base64 zwykle daje krótszy data URI i zachowuje czytelność. Przy czymkolwiek większym niż mała ikona lepszy jest osobny plik SVG, który przeglądarka może zapisać w pamięci podręcznej.

Czy można zamienić tekst Base64 z powrotem na obraz?

Tak, kodowanie jest bezstratne i w pełni odwracalne: dekodowanie zwraca dokładnie te same bajty. Każdy język programowania ma dekoder, a wklejenie pełnego data URI w pasek adresu przeglądarki wyświetla obraz.

Czy kodowanie zmienia jakość obrazu?

Nie. Base64 zmienia sposób zapisu bajtów, a nie piksele. Aby skrócić ciąg, najpierw zmniejsz obraz, na przykład za pomocą kompresji zdjęcia do 20 KB, i zakoduj mniejszy plik.