Bez przesyłania, 100% lokalnie, bez konta

Konwerter Obraz → Base64

Zakoduj dowolny obraz jako URI danych Base64, lub wklej URI danych, aby zdekodować go z powrotem do obrazu. Kopiuj wynik lub pobierz snippet CSS url(). Nic nie opuszcza urządzenia.

Jak działa Obraz do Base64

Konwersja obrazu do Base64 odczytuje plik graficzny i koduje go jako identyfikator URI Base64, który można osadzić bezpośrednio w HTML, CSS lub JSON bez potrzeby osobnego żądania pliku. Konwersja używa interfejsu FileReader API w przeglądarce; żadne bajty z Twojego obrazu nie są wysyłane na serwer. Możesz też wkleić ciąg Base64 z powrotem, aby zdekodować i podejrzeć obraz, wszystko lokalnie.

Identyfikator URI Base64 jest o około 33% większy niż binarny oryginał, ponieważ każda grupa trzech bajtów rozszerza się do czterech znaków ASCII. Ten przyrost rozmiaru to oczekiwany kompromis za wygodę osadzania obrazu w dokumencie lub arkuszu stylów. Narzędzie pokazuje zarówno surowy ciąg Base64, jak i gotowy do użycia fragment kodu HTML z tagiem img oraz fragment CSS z background-image do szybkiego kopiowania i wklejania do projektu.

Napisał Bastien Sulyan

Obraz do Base64: instrukcja krok po kroku

  1. Upuść plik graficzny na obszar przesyłania lub kliknij, aby przeglądać. Obsługiwane formaty: JPEG, PNG, WebP, GIF, SVG.
  2. Identyfikator URI Base64 pojawia się natychmiast w polu wyjściowym.
  3. Skopiuj surowy ciąg Base64 lub użyj sformatowanego fragmentu HTML z tagiem img albo fragmentu CSS z background-image.
  4. Aby zdekodować, wklej ciąg Base64 do pola wejściowego i przełącz na tryb dekodowania, aby podejrzeć obraz.
  5. Kliknij przycisk kopiowania obok dowolnego fragmentu, aby skopiować go do schowka.

Typowe zastosowania

  • Programista front-end osadza małą ikonę jako URI danych w pliku CSS, aby wyeliminować dodatkowe żądanie HTTP.
  • Programista osadza mały spinner ładowania jako atrybut src Base64, aby obraz zastępczy był dostępny przed załadowaniem pakietu JavaScript.
  • Inżynier QA kopiuje Base64 obrazu testowego, aby wkleić go bezpośrednio do ładunku JSON dla testu API.
  • Autor szablonu e-mail osadza logo podpisu jako URI danych Base64, ponieważ niektóre klienty poczty blokują zewnętrzne żądania obrazów.

Często zadawane pytania

Dlaczego wynik Base64 jest o około jedną trzecią większy niż mój oryginalny plik?

Kodowanie Base64 reprezentuje każde trzy bajty binarne jako cztery znaki ASCII (stosunek 4/3). Obraz o rozmiarze 100 KB w formacie binarnym staje się około 133 KB jako ciąg Base64. Jest to właściwe dla tego schematu kodowania, a nie ograniczenie narzędzia.

Czy treść obrazu jest przesyłana na serwer podczas kodowania?

Nie. Interfejs FileReader API odczytuje plik binarny z lokalnego dysku i przekazuje wynik bezpośrednio do funkcji kodowania JavaScript wewnątrz karty przeglądarki. Dane obrazu nie opuszczają Twojego urządzenia.

Czy mogę użyć wyjściowego URI danych w dowolnym kontekście HTML lub CSS?

Tak. URI danych zaczynający się od data:image/jpeg;base64, po którym następuje zakodowany ciąg, może być używany jako atrybut src tagu img lub jako wartość url() we właściwości CSS background-image. Wszystkie nowoczesne przeglądarki obsługują URI danych. Bardzo duże URI danych mogą spowolnić renderowanie strony, więc osadzanie jest zwykle zarezerwowane dla małych obrazów o rozmiarze kilku kilobajtów.

Czy narzędzie obsługuje animowane pliki GIF?

Narzędzie koduje pełną zawartość binarną dowolnego dostarczonego pliku, w tym animowanych plików GIF. Wynikowy URI danych, użyty jako src tagu img, będzie odtwarzał animację w przeglądarkach obsługujących animacje GIF.

Jak zdekodować ciąg Base64 z powrotem do obrazu?

Przełącz narzędzie do trybu dekodowania, wklej ciąg Base64 (z prefiksem data: lub bez), a narzędzie zdekoduje go i zaoferuje binarny obraz do pobrania oraz wyświetli podgląd.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia do obrazów