Jak skonwertować obraz na base64 (data URI) i z powrotem?
Konwerter obraz ↔ base64 / data URI online.
W trybie "Encode" wgrywasz plik, dostajesz string base64 + pełny data: URI gotowy do wklejenia do CSS / HTML.
W trybie "Decode" wklejasz base64 lub data URI, widzisz podgląd obrazka i pobierasz jako plik.
Wszystko lokalnie - obrazek nigdy nie wychodzi z przeglądarki.
Idealne dla devów: embedowanie ikon w CSS bez dodatkowych requestów, podpisy email z osadzonymi obrazkami, debug HTML emails.
Jak korzystać
- Wybierz tryb: "Encode" (plik → base64) lub "Decode" (base64 → plik).
- W trybie Encode: przeciągnij plik na ramkę lub klik "Wybierz plik". PNG, JPG, WebP, AVIF, HEIC, SVG, GIF.
- Po prawej dostajesz dwie wartości: pełny "data:image/...;base64,..." (do CSS jako `background-image` lub HTML `src`) oraz "samo base64" (sam payload).
- W trybie Decode: wklej cały data URI lub same base64 bytes. Tool wykryje format z prefiksu lub założy PNG. Podgląd + przycisk pobrania.
Do czego się przydaje
Gdzie base64 i data URI mają sens - typowe zastosowania:
- CSS bez dodatkowych requestów - małe ikony jako background-image: url(data:image/svg+xml;base64,...) eliminują round-trip do serwera.
- Email signatures - embedowane logo nie potrzebuje hostingu na CDN, działa offline.
- SVG sprite alternatives - dla bardzo małych ikonek (<2 KB) data URI jest często mniejsze niż HTTP header overhead.
- JSON payloads - API, które nie obsługuje multipart-form-data, ale akceptuje base64-encoded image w JSON-ie.
- Email marketing - niektóre platformy (Mailchimp, Brevo) oczekują obrazków jako base64.
- Test fixtures - w testach front-endu (Playwright, Cypress) screenshoty często są base64-coded.
Pytania i odpowiedzi
Nie. Cała operacja lokalnie przez FileReader API. W trybie Decode też - dekodujemy base64 do bytes lokalnie, tworzymy Blob URL. DevTools → Network = brak requestów.