Obraz & Zdjęcie

Konwerter obrazu na Base64

Przeciągnij JPG, PNG, WebP, GIF lub SVG, aby uzyskać adres URL danych Base64 z fragmentami do skopiowania i wklejenia dla CSS, HTML i Markdown — lub wklej ciąg Base64, aby dekodować go z powrotem na obraz do pobrania.

Drop your image here

or click to browse — JPG, PNG, WebP, GIF, SVG, BMP, ICO, AVIF up to 10 MB.

Private by design. Images are encoded and decoded entirely in your browser using FileReader and URL decoding. Nothing is uploaded.

Czym jest kodowanie obrazów Base64?

Base64 to sposób reprezentowania danych binarnych — jak obraz — przy użyciu tylko drukowalnych znaków ASCII. Forma adresu URL danych (ciąg zaczynający się od data:image/png;base64,...) pozwala na wklejenie całego obrazu bezpośrednio do HTML, CSS, JSON, Markdown, podpisu e-mail lub odpowiedzi serwera, bez potrzeby osobnego pliku. Kodowanie jest bezstratne: dekodowanie Base64 daje dokładnie te same bajty, które weszły. Wymiana to rozmiar — Base64 zajmuje około 33% więcej znaków niż binarny, więc 100 KB PNG staje się około 134 KB tekstu Base64. To czyni go idealnym dla małych ikon, wbudowanych SVG i jednorazowych fragmentów, a złym wyborem dla dużych obrazów głównych. To narzędzie koduje każdy obraz, który wrzucisz, i dekoduje każdy ciąg Base64 z powrotem na obraz do pobrania, a wszystko odbywa się całkowicie w Twojej przeglądarce.

Jak przekonwertować obraz na Base64

1
Wybierz kierunek
Użyj Obraz → Base64, aby zakodować obraz, który masz na dysku. Użyj Base64 → Obraz, aby dekodować ciąg, który skopiowałeś z adresu URL danych, odpowiedzi API lub pliku CSS.
2
Upuść swój obraz
Aby zakodować, przeciągnij JPG, PNG, WebP, GIF, SVG, BMP, ICO lub AVIF na obszar przesyłania lub kliknij, aby wybrać z urządzenia. Obraz jest podglądany na górze karty wyników.
3
Skopiuj potrzebny fragment
Generowane są pięć gotowych do wklejenia fragmentów: pełny adres URL danych, surowy Base64 (bez prefiksu), CSS background-image, HTML <img> tag i obraz Markdown. Kliknij Kopiuj na tym, którego potrzebujesz.
4
Lub wklej ciąg Base64, aby go dekodować
Przełącz na Base64 → Obraz, wklej pełny adres URL danych lub surową część Base64. Narzędzie automatycznie dodaje padding do krótkich ciągów i zakłada PNG, gdy prefiks jest brakujący — kliknij Dekoduj, aby zobaczyć podgląd.
5
Pobierz zdekodowany obraz
Po zdekodowaniu karta podglądu pokazuje wymiary obrazu i szacowany rozmiar pliku. Kliknij Pobierz, aby zapisać oryginalne bajty z powrotem na dysk z odpowiednim rozszerzeniem.

Jak działa kodowanie obrazów Base64

1. FileReader.readAsDataURL() przeglądarki odczytuje plik obrazu jako binarny.
2. Grupuje bajty w kawałki po 3 (24 bity) i ponownie koduje każdy kawałek jako 4 znaki ASCII.
3. Alfabet 64-znakowy to A-Z, a-z, 0-9, plus '+' i '/' (z '=' dla paddingu).
4. Wynik jest poprzedzony 'data:<mime>;base64,' aby uczynić go użytecznym adresem URL danych.
5. Dekodowanie odwraca każdy krok: usuń prefiks, znormalizuj warianty bezpieczne dla URL, dodaj padding do wielokrotności 4.
6. Zdekodowane bajty są opakowane w Blob i udostępniane za pomocą createObjectURL — lub po prostu używane jako adres URL danych bezpośrednio.

Nadwyżka rozmiaru 33% jest wbudowana w matematykę: 3 bajty binarne stają się 4 bajtami ASCII, co daje stosunek 4/3. To twarda podłoga — nie ma skompresowanej wersji Base64 w powszechnym użyciu. Prefiks MIME w adresie URL danych nie jest opcjonalnym ozdobnikiem: przeglądarki, renderery Markdown i klienci poczty e-mail używają go do określenia, jak renderować bajty. Jeśli wkleisz surowy Base64 bez prefiksu 'data:image/...', to narzędzie domyślnie zakłada PNG, co jest bezpiecznym zgadnięciem dla zrzutów ekranu i ikon, ale może spowodować uszkodzony podgląd, jeśli źródło było w rzeczywistości JPG. Najlepszą praktyką jest zachowanie pełnego formatu adresu URL danych za każdym razem, gdy kopiujesz lub wklejasz.

Referencja: MDN — Adresy URL danych

Typowe zadania z obrazami Base64

Przykład użycia	Najlepszy fragment do skopiowania
Wstaw małą ikonę bezpośrednio w CSS	Skopiuj fragment CSS background-image. Eliminuje żądanie HTTP dla ikon poniżej ~5 KB. Działa dobrze dla spinnerów, znaczników, ikon w stylu sprite.
Osadź obraz w odpowiedzi JSON lub REST API	Skopiuj fragment adresu URL danych. Odbiorca może wkleić go bezpośrednio do <img src> lub tła CSS. Typowe dla aplikacji czatowych, zrzutów ekranu i przesyłania awatarów.
Wklej zrzut ekranu do wpisu na blogu Markdown lub zgłoszenia na GitHubie	Skopiuj fragment obrazu Markdown. Renderuje inline bez przesyłania do CDN. Niektóre renderery Markdown (GitHub) odrzucają bardzo duże adresy URL danych — trzymaj to małe.
Zdekoduj ciąg Base64 z e-maila lub API do użytecznego pliku	Przełącz na Base64 → Obraz, wklej ciąg, naciśnij Dekoduj, a następnie Pobierz. Działa również dla surowego Base64 — domyślnie zakłada PNG, gdy MIME jest brakujący.

Kiedy używać obrazów Base64

Wstaw małe ikony lub spinnery bezpośrednio w CSS, aby pominąć okrążenie HTTP.
Osadź obrazy w pojedynczym samodzielnym pliku HTML (dokumenty offline, CV, eksport diagramu).
Przesyłaj obrazy przez kanał tylko JSON — REST API, protokół czatu, ładunek webhook.
Wklej zrzut ekranu inline w zgłoszeniu na GitHubie, stronie Notion lub szkicu bloga Markdown.
Zdekoduj obraz Base64, który otrzymałeś z API lub e-maila do pliku do pobrania.
Wygeneruj adres URL danych jako placeholder dla szkieletu ładowania tylko CSS.
Audytuj lub sprawdź zawartość adresu URL danych, który ktoś ci dał, przed zapisaniem pliku.

Pokrewne narzędzia

Usuwacz Tła

Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.

Kompresor Obrazów

Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.

Edytor zdjęć

Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.

Twórca Memów

Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.

Najczęściej zadawane pytania

Kiedy powinienem używać adresu URL danych Base64 zamiast zwykłego pliku obrazu?

Gdy obraz jest mały (poniżej około 5 KB), używany w jednym miejscu, a oszczędzanie żądania HTTP ma większe znaczenie niż buforowanie. Małe ikony, inline SVG i jednorazowe podpisy e-mailowe są idealne. Obrazy bohaterów, zdjęcia i zasoby wielokrotnego użytku powinny pozostać jako oddzielne pliki — przeglądarka może je buforować, a Base64 zwiększa całkowity rozmiar strony o około 33%.

Dlaczego ciąg Base64 jest większy niż oryginalny obraz?

Base64 używa 4 znaków ASCII do reprezentowania każdego 3 bajtów binarnych, więc wynik jest zawsze o około 33% większy niż podstawowy plik. To twarda matematyczna podłoga, a nie dziwactwo tego narzędzia. Jeśli rozmiar ma znaczenie, najpierw zoptymalizuj obraz (Kompresor obrazów jest dobry do tego) przed kodowaniem.

Czy moje obrazy są gdzieś przesyłane?

Nie. Kodowanie używa API FileReader przeglądarki, a dekodowanie używa natywnej manipulacji ciągami — oba działają całkowicie w twojej karcie. Możesz zweryfikować w zakładce sieci, że żadne bajty obrazu nie opuszczają strony po jej załadowaniu.

Dlaczego mój zdekodowany obraz wygląda na uszkodzony?

Najczęstszą przyczyną jest brakujący lub błędny prefiks MIME w surowym ciągu Base64 — to narzędzie zgaduje PNG, gdy brak prefiksu, co psuje JPG lub WebP. Wklej pełny adres URL danych, gdy to możliwe. Inne przyczyny: ciąg został obcięty w tranzycie lub został zakodowany w URL i nie został zdekodowany przed wklejeniem.

Jakie typy MIME może produkować dekoder?

Jakikolwiek MIME, który deklaruje adres URL danych: image/png, image/jpeg, image/webp, image/gif, image/svg+xml, image/bmp, image/x-icon lub image/avif. Pobieranie automatycznie używa odpowiedniego rozszerzenia. Dla surowego Base64 bez prefiksu narzędzie domyślnie zakłada PNG, co jest najbezpieczniejszym zgadnięciem dla zrzutów ekranu i ikon.

Czy istnieje maksymalny rozmiar obrazu?

10 MB na plik. Po przekroczeniu tej wartości, ciągi Base64 stają się nieporęczne w przeglądarce, a większość konsumentów (renderery Markdown, parsery JSON, limity danych URL w przeglądarkach) je odrzuca. Jeśli potrzebujesz osadzić coś większego, prawie na pewno chcesz prawdziwego adresu URL pliku.

Jaka jest różnica między tym a narzędziem kodera Base64?

Koder Base64 działa z dowolnym tekstem wejściowym — przydatne do nagłówków Basic Auth, poświadczeń zakodowanych w JSON i innych zadań deweloperskich. To narzędzie jest specyficzne dla obrazów: produkuje pełne adresy URL danych z poprawnym prefiksem MIME oraz gotowe do wklejenia fragmenty, których naprawdę chcesz, gdy osadzasz obraz.

Ostatnia aktualizacja 2026-04-29

Czym jest kodowanie obrazów Base64?

Jak przekonwertować obraz na Base64

Wybierz kierunek

Użyj Obraz → Base64, aby zakodować obraz, który masz na dysku. Użyj Base64 → Obraz, aby dekodować ciąg, który skopiowałeś z adresu URL danych, odpowiedzi API lub pliku CSS.

Upuść swój obraz

Aby zakodować, przeciągnij JPG, PNG, WebP, GIF, SVG, BMP, ICO lub AVIF na obszar przesyłania lub kliknij, aby wybrać z urządzenia. Obraz jest podglądany na górze karty wyników.

Skopiuj potrzebny fragment

Generowane są pięć gotowych do wklejenia fragmentów: pełny adres URL danych, surowy Base64 (bez prefiksu), CSS background-image, HTML <img> tag i obraz Markdown. Kliknij Kopiuj na tym, którego potrzebujesz.

Lub wklej ciąg Base64, aby go dekodować

Przełącz na Base64 → Obraz, wklej pełny adres URL danych lub surową część Base64. Narzędzie automatycznie dodaje padding do krótkich ciągów i zakłada PNG, gdy prefiks jest brakujący — kliknij Dekoduj, aby zobaczyć podgląd.

Pobierz zdekodowany obraz

Po zdekodowaniu karta podglądu pokazuje wymiary obrazu i szacowany rozmiar pliku. Kliknij Pobierz, aby zapisać oryginalne bajty z powrotem na dysk z odpowiednim rozszerzeniem.

Jak działa kodowanie obrazów Base64

1. FileReader.readAsDataURL() przeglądarki odczytuje plik obrazu jako binarny.
2. Grupuje bajty w kawałki po 3 (24 bity) i ponownie koduje każdy kawałek jako 4 znaki ASCII.
3. Alfabet 64-znakowy to A-Z, a-z, 0-9, plus '+' i '/' (z '=' dla paddingu).
4. Wynik jest poprzedzony 'data:<mime>;base64,' aby uczynić go użytecznym adresem URL danych.
5. Dekodowanie odwraca każdy krok: usuń prefiks, znormalizuj warianty bezpieczne dla URL, dodaj padding do wielokrotności 4.
6. Zdekodowane bajty są opakowane w Blob i udostępniane za pomocą createObjectURL — lub po prostu używane jako adres URL danych bezpośrednio.

Typowe zadania z obrazami Base64

Przykład użycia	Najlepszy fragment do skopiowania
Wstaw małą ikonę bezpośrednio w CSS	Skopiuj fragment CSS background-image. Eliminuje żądanie HTTP dla ikon poniżej ~5 KB. Działa dobrze dla spinnerów, znaczników, ikon w stylu sprite.
Osadź obraz w odpowiedzi JSON lub REST API	Skopiuj fragment adresu URL danych. Odbiorca może wkleić go bezpośrednio do <img src> lub tła CSS. Typowe dla aplikacji czatowych, zrzutów ekranu i przesyłania awatarów.
Wklej zrzut ekranu do wpisu na blogu Markdown lub zgłoszenia na GitHubie	Skopiuj fragment obrazu Markdown. Renderuje inline bez przesyłania do CDN. Niektóre renderery Markdown (GitHub) odrzucają bardzo duże adresy URL danych — trzymaj to małe.
Zdekoduj ciąg Base64 z e-maila lub API do użytecznego pliku	Przełącz na Base64 → Obraz, wklej ciąg, naciśnij Dekoduj, a następnie Pobierz. Działa również dla surowego Base64 — domyślnie zakłada PNG, gdy MIME jest brakujący.

Kiedy używać obrazów Base64

Wstaw małe ikony lub spinnery bezpośrednio w CSS, aby pominąć okrążenie HTTP.

Osadź obrazy w pojedynczym samodzielnym pliku HTML (dokumenty offline, CV, eksport diagramu).

Przesyłaj obrazy przez kanał tylko JSON — REST API, protokół czatu, ładunek webhook.

Wklej zrzut ekranu inline w zgłoszeniu na GitHubie, stronie Notion lub szkicu bloga Markdown.

Zdekoduj obraz Base64, który otrzymałeś z API lub e-maila do pliku do pobrania.

Wygeneruj adres URL danych jako placeholder dla szkieletu ładowania tylko CSS.

Audytuj lub sprawdź zawartość adresu URL danych, który ktoś ci dał, przed zapisaniem pliku.