Konwerter obrazu na Base64

Czym jest obraz Base64 (data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Kluczowe funkcje

Przykłady

transparent-1x1.png  (68-bajtowy PNG)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Jak skonwertować obraz na Base64

1. 1

   Dodaj obraz

   Przeciągnij obraz na strefę upuszczania, kliknij, aby przejrzeć pliki, albo wklej ze schowka klawiszami Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO i BMP są obsługiwane i kodowane w całości w przeglądarce.

2. 2

   Wybierz format wyniku

   Wybierz z kart data URI, surowy Base64, HTML , tło CSS, Markdown lub JSON. Sprawdź na pasku metadanych przyrost rozmiaru, a na plakietce doradczej — czy osadzanie się opłaca.

3. 3

   Skopiuj lub pobierz

   Kliknij Kopiuj, aby przechwycić fragment, lub Pobierz, aby zapisać go jako plik. Aby odwrócić proces, przełącz się na kartę Base64 → Obraz, wklej ciąg i pobierz odtworzony obraz.

Częste pułapki

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Typowe zastosowania

Osadź logo lub ikonę w CSS

Upuść mały PNG lub ikonę SVG, skopiuj fragment CSS background-image i wklej go do arkusza stylów, aby usunąć zapytanie HTTP dla zasobu, który rzadko się zmienia. Trzymaj go poniżej ~2 KB (obserwuj zieloną plakietkę), aby arkusz stylów pozostał lekki.

Osadź obrazy w wiadomości HTML

Klienci poczty często blokują obrazy zdalne. Zakoduj logo jako data URI i wklej element do szablonu, aby renderowało się bez pobierania z serwera. Przetestuj w różnych klientach — trzymaj osadzenia jako małe ikony, nie zdjęcia.

Samodzielne pliki Markdown i README

Gdy nie możesz hostować obrazu — zgłoszenie na GitHubie, notatnik, dokument offline — wynik Markdown osadza obraz bezpośrednio w pliku, więc podróżuje on razem z tekstem. Idealne dla małych diagramów i plakietek.

Obrazy wewnątrz payloadów JSON lub API

Musisz wysłać miniaturę wewnątrz dokumentu JSON lub pliku konfiguracyjnego? Wynik JSON daje Ci obiekt { mime, data }, który możesz wstawić bezpośrednio, a dekoder odzyskuje obraz po drugiej stronie.

Szybkie debugowanie data URI

Znalazłeś tajemnicze data: URI w arkuszu stylów lub odpowiedzi API? Wklej je do karty Base64 → Obraz, aby zobaczyć, czym naprawdę jest, odczytać jego rzeczywiste wymiary i pobrać jako zwykły plik do bliższej analizy.

Jednoplikowe widżety i bookmarklety

Bookmarklety i osadzalne widżety muszą być samodzielne, bez żadnych zewnętrznych zależności. Osadzenie ich ikon jako Base64 utrzymuje wszystko w jednym pliku, który działa niezależnie od tego, gdzie zostanie umieszczony.

Szczegóły techniczne

Jak działa kodowanie Base64

Base64 bierze binarny strumień obrazu po trzy bajty (24 bity) naraz i dzieli go na cztery 6-bitowe grupy, z których każda jest mapowana na jeden znak z 64-symbolowego alfabetu. Gdy długość wejścia nie jest wielokrotnością trzech, jeden lub dwa znaki wypełnienia = oznaczają resztę. Ten stosunek 3 do 4 jest powodem, dla którego zakodowany tekst jest około 33% większy od źródła. Narzędzie oblicza długość zdekodowanych bajtów bezpośrednio z długości ciągu i wypełnienia, więc raportowane wartości rozmiaru są dokładne, a nie szacowane.

Wykrywanie MIME i bajty magiczne

Gdy kodujesz plik, jego typ MIME pochodzi z obiektu File przeglądarki. Gdy dekodujesz surowy ciąg Base64 bez prefiksu data:, narzędzie analizuje początkowe znaki, które odpowiadają bajtom magicznym obrazu: iVBORw0KGgo dla PNG, /9j/ dla JPEG, R0lGOD dla GIF, UklGR dla WebP oraz PHN2Zy lub PD94bWw dla SVG. Pozwala to dekoderowi odtworzyć poprawne data URI i pobrać z właściwym rozszerzeniem pliku, nawet gdy wejście to sam goły ładunek.

Przetwarzanie wyłącznie lokalne

Kodowanie używa metody readAsDataURL z API FileReader, która zwraca data URI zsyntetyzowane w całości w przeglądarce. Dekodowanie do pobrania używa atob plus Uint8Array do odbudowy danych binarnych, a następnie Blob i object URL — również bez udziału sieci. W efekcie to narzędzie możesz uruchamiać offline i zaufać mu z poufnymi obrazami, bo bajty nigdy nie opuszczają strony. Zachowanie zerowej liczby zapytań możesz zweryfikować w narzędziach deweloperskich przeglądarki.

Dobre praktyki

Osadzaj tylko małe, stabilne zasoby

Idealnym celem dla Base64 są zasoby poniżej ~2 KB, które rzadko się zmieniają i pojawiają na niewielu stronach — ikony, maleńkie logotypy, sprite'y interfejsu. Powyżej ~10 KB kara rozmiaru i utracone buforowanie przeważają nad zaoszczędzonym zapytaniem, zwłaszcza teraz, gdy HTTP/2 czyni dodatkowe zapytania tanimi. Niech prowadzi Cię plakietka doradcza, a zdjęcia i dużą grafikę serwuj jako zwykłe buforowane pliki.

Dla SVG preferuj kodowanie URL

SVG to tekst, więc Base64 rozdyma go bez zysku. Przy osadzaniu SVG w CSS lub HTML zakoduj znaczniki w URL — to zwykle mniejsze, pozostaje czytelne dla człowieka i lepiej kompresuje się przez gzip/brotli. Base64 dla SVG rezerwuj dla potoków, które tego konkretnie wymagają. Nasz Koder/dekoder URL obsługuje procent-kodowanie.

Zawsze ustawiaj poprawny typ MIME

Data URI renderuje się tylko wtedy, gdy jego typ MIME pasuje do zawartości: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Błędny lub brakujący typ to powód numer jeden, dla którego osadzony obraz się nie wyświetla. Gdy kopiujesz z tego narzędzia, typ jest ustawiany za Ciebie; jeśli składasz URI ręcznie, sprawdź dokładnie prefiks.

Kompresuj przed zakodowaniem

Ponieważ Base64 dodaje ~33% do rozmiaru pliku, zmniejszenie źródła najpierw opłaca się podwójnie. Przepuść obrazy przez nasz Kompresor obrazów — lub wyeksportuj we właściwych wymiarach — przed kodowaniem, aby powstałe data URI było jak najmniejsze. 4 KB skompresowany PNG bije 40 KB oryginał zarówno jako plik, jak i osadzony.

Nigdy nie polegaj na Base64 dla prywatności

Base64 jest trywialnie odwracalny i nie daje żadnej ochrony. Nie używaj go do ukrycia wrażliwej zawartości obrazu — każdy może go zdekodować natychmiast, także za pomocą karty na tej stronie. Jeśli zawartość musi być chroniona, użyj prawdziwej kontroli dostępu i szyfrowania na serwerze oraz serwuj obraz przez uwierzytelniony punkt końcowy.

Najczęściej zadawane pytania

Co robi ten konwerter obrazu na Base64?

Odczytuje obraz, który upuścisz, wkleisz lub wybierzesz, i koduje jego bajty jako ciąg Base64 — w całości w Twojej przeglądarce. Otrzymujesz surowy Base64, gotowe do użycia data URI (data:image/png;base64,…) oraz fragmenty do skopiowania dla HTML , CSS background-image, Markdown i JSON. Pasek metadanych podaje oryginalny rozmiar pliku, rozmiar po zakodowaniu, dokładny procentowy przyrost (Base64 jest około 33% większy), wymiary w pikselach oraz typ MIME. Nic nie jest przesyłane: kodowanie działa lokalnie przez API FileReader, więc to samo narzędzie jest bezpieczne dla zrzutów ekranu, zasobów wewnętrznych i niewydanej grafiki. Aby przejść w drugą stronę, użyj karty Base64 → Obraz lub naszego dekodera Base64 na obraz.

Czy moje obrazy są przesyłane na serwer?

Nie. Każdy krok odbywa się po stronie klienta w przeglądarce, z użyciem API FileReader i kodowania ciągów w JavaScripcie. Twój obraz nigdy nie jest przesyłany, przechowywany ani logowany. Możesz to potwierdzić, otwierając kartę „Sieć” w przeglądarce — zakodowanie obrazu nie wywołuje żadnych zapytań sieciowych. Dzięki temu narzędzie jest bezpieczne dla materiałów wrażliwych: zrzutów ekranu produktu przed premierą, diagramów wewnętrznych, zasobów klientów oraz wszystkiego objętego umową o poufności. Nie ma limitu rozmiaru pliku narzuconego przez limit przesyłania — jedynym ograniczeniem jest to, jak duży ciąg Base64 Twoja przeglądarka i system docelowy są w stanie wygodnie obsłużyć.

O ile Base64 zwiększa rozmiar obrazu?

Base64 koduje każde 3 bajty danych binarnych jako 4 znaki ASCII, więc zakodowany ciąg jest mniej więcej 33% większy od oryginalnego pliku (plus kilka bajtów wypełnienia i prefiks data:). 9 KB PNG staje się około 12 KB tekstu. Ten narzut to najważniejszy powód, by nie kodować dużych obrazów w Base64: wysyłasz więcej bajtów i — ponieważ ciąg jest osadzony w HTML lub CSS — są one pobierane ponownie za każdym razem, gdy zawierający je plik się zmienia, i nie mogą być buforowane niezależnie. Narzędzie pokazuje dokładny przyrost dla Twojego konkretnego pliku na pasku metadanych, abyś mógł podjąć decyzję w oparciu o realne liczby.

Kiedy używać obrazu Base64 zamiast zwykłego pliku?

Base64 (jako data URI) dobrze sprawdza się dla małych, rzadko zmienianych zasobów, gdzie uniknięcie osobnego zapytania HTTP jest ważniejsze niż buforowanie: maleńkie ikony i logotypy osadzone w CSS, obrazy w wiadomościach HTML (wielu klientów blokuje obrazy zewnętrzne, ale renderuje data URI), jednoplikowe widżety lub bookmarklety, które muszą być samodzielne, sprite'y SVG oraz obrazy przechowywane wewnątrz payloadów JSON/API. Praktyczna zasada: poniżej około 2 KB i użyte na jednej lub dwóch stronach — osadzanie zwykle wygrywa. Plakietka doradcza w tym narzędziu koduje dokładnie tę heurystykę — zielona poniżej 2 KB, bursztynowa do 10 KB, czerwona powyżej.

Kiedy NIE używać obrazów Base64?

Unikaj Base64 dla wszystkiego, co duże lub używane wielokrotnie na wielu stronach. Cztery konkretne powody: (1) przyrost rozmiaru o ~33% oznacza więcej bajtów przesyłanych przez sieć; (2) osadzony obraz nie może być buforowany samodzielnie — jest pobierany ponownie przy każdej zmianie zawierającego go HTML lub CSS oraz powtarzany na każdej stronie, która go osadza; (3) dekodowanie dużego data URI kosztuje CPU i baterię, co jest zauważalne na urządzeniach mobilnych; oraz (4) tracisz obrazy responsywne (srcset/sizes) i leniwe ładowanie. Ponieważ HTTP/2 tanio multipleksuje wiele małych zapytań, pierwotny powód osadzania — redukcja liczby zapytań — rzadko już ma zastosowanie. Dla zdjęć, obrazów hero lub czegokolwiek powyżej ~10 KB zwykły buforowany plik niemal zawsze ładuje się szybciej. Jeśli celem jest mniejszy plik, najpierw przepuść go przez nasz Kompresor obrazów.

Jak użyć wyniku Base64 w HTML i CSS?

Dla HTML przełącz się na kartę HTML i wklej wygenerowany element: . Dla CSS użyj karty CSS, która opakowuje data URI w background-image: url("data:image/png;base64,…"). Oba działają wszędzie tam, gdzie akceptowany jest URL — img src, tło CSS, mask-image, a nawet znacznik link favikony. Schemat data: jest obsługiwany przez każdą nowoczesną przeglądarkę. Jedno zastrzeżenie: bardzo długie data URI w inline'owym HTML mogą szkodzić czytelności, a w CSS rozdymają arkusz stylów wysyłany do każdego odwiedzającego — dlatego osadzanie rezerwuj dla naprawdę małych zasobów.

Jakie formaty obrazów są obsługiwane?

Obsługiwane są PNG, JPEG/JPG, GIF (w tym animowany), WebP, SVG, ICO oraz BMP, a także AVIF tam, gdzie przeglądarka potrafi je zdekodować. Ponieważ narzędzie koduje surowe bajty, a nie renderuje obrazu na nowo, animowane GIF-y pozostają animowane, przezroczyste PNG zachowują kanał alfa, a SVG pozostają w pełni skalowalne. Typ MIME jest odczytywany z samego pliku, a gdy wkleisz surowy Base64 do dekodera — wywnioskowany z bajtów magicznych danych. Podczas kodowania nie zachodzi żadna konwersja formatu — wynik reprezentuje dokładnie ten plik, który podałeś.

Dlaczego SVG to przypadek szczególny?

SVG to tekst XML, a nie dane binarne, więc Base64 w praktyce go powiększa i utrudnia odczyt bez żadnej korzyści. Do osadzania SVG w CSS lub HTML kodowanie URL znaczników (procent-kodowanie kilku znaków, takich jak #, <, > i cudzysłowy) jest zwykle mniejsze niż Base64 i utrzymuje źródło czytelnym oraz przyjaznym dla gzip. To narzędzie nadal oferuje wynik Base64 dla SVG, bo niektóre potoki tego wymagają, ale jeśli ręcznie optymalizujesz CSS, wybierz data URI z kodowaniem URL. Pomaga w tym nasz Koder/dekoder URL.

Czy Base64 to to samo co szyfrowanie?

Nie. Base64 to kodowanie, a nie szyfrowanie — jest w pełni odwracalne przez każdego, bez żadnego klucza. Istnieje po to, by reprezentować dane binarne za pomocą bezpiecznego zestawu drukowalnych znaków ASCII, dzięki czemu dane przetrwają transport przez systemy obsługujące wyłącznie tekst (HTML, JSON, nagłówki e-mail, URL). Każdy może w kilka sekund zdekodować ciąg Base64 z powrotem do oryginalnego obrazu, także za pomocą karty Base64 → Obraz tutaj. Nigdy nie traktuj Base64 jako sposobu na ukrycie lub ochronę wrażliwej zawartości obrazu; nie zapewnia on żadnej poufności.

Czy mogę osadzić obraz Base64 w wiadomości e-mail?

Tak, i jest to jedno z lepszych zastosowań tej techniki. Wielu klientów poczty domyślnie blokuje obrazy hostowane zewnętrznie ze względu na prywatność, co psuje układy oparte na zdalnych logotypach. Osadzenie małych obrazów jako data URI gwarantuje, że wyrenderują się natychmiast, bez pobierania z serwera. Kompromisy: niektórzy starsi klienci (zwłaszcza pewne wersje Outlooka) mają niepełną obsługę data URI, a duże osadzenia zwiększają rozmiar wiadomości, którą pobiera każdy odbiorca. Trzymaj osadzane obrazy małe — logotypy i ikony, nie fotografie — i przetestuj je w klientach docelowych.

Dlaczego mój obraz Base64 się nie renderuje?

Najczęstsze przyczyny: brakujący lub błędny typ MIME w prefiksie data: (użyj image/png dla PNG, image/jpeg dla JPG, image/svg+xml dla SVG), białe znaki lub złamania wiersza przypadkowo wstawione do ciągu, obcięta kopia, w której zgubiono końcowe wypełnienie (= lub ==), albo wklejenie samego surowego Base64 bez prefiksu data:…;base64, tam, gdzie oczekiwany jest URL. Dekoder w tym narzędziu jest tolerancyjny — usuwa białe znaki, akceptuje wejście z prefiksem lub bez niego i wnioskuje MIME z bajtów magicznych obrazu — więc wklejenie ciągu do karty Base64 → Obraz to najszybszy sposób, by potwierdzić, czy same dane są prawidłowe.