Konwerter obraz ↔ Base64
Zamień obrazy na data URL w Base64 i z powrotem — ze snippetami CSS i HTML
O tym narzędziu
Upuść, wybierz albo wklej obraz i dostań jego postać Base64 w każdym potrzebnym wariancie: gotowy do użycia data URL, deklarację background-image w CSS, kompletny znacznik <img> z wymiarami własnymi oraz surowy ładunek Base64. Odwrotny kierunek też działa — wklej data URL albo goły ciąg Base64, a obraz zostanie zdekodowany, pokazany w podglądzie i będzie do pobrania jako plik.
Format rozpoznawany jest z bajtów magicznych, a nie z rozszerzenia pliku czy deklarowanego typu MIME, więc PNG przemianowany na .jpg (albo data URL z błędną etykietą) i tak przekonwertuje się poprawnie. Panel rozmiaru uczciwie pokazuje koszt: Base64 powiększa dane o mniej więcej jedną trzecią, a dokładny rozmiar po zakodowaniu widnieje obok oryginalnego, żebyś mógł zdecydować, czy osadzanie się opłaca.
W odróżnieniu od większości stron „obraz na Base64” nic nie jest wysyłane — plik odczytywany jest przez przeglądarkowe API FileReader i kodowany na stronie. To czyni narzędzie bezpiecznym dla zrzutów wewnętrznych pulpitów, niewydanych zdjęć produktowych i wszystkiego innego, czego wolałbyś nie oddawać serwerowi obcej firmy.
Często zadawane pytania
- Kiedy osadzać obraz jako Base64 zamiast linkować plik?
- Gdy obraz jest mały (z grubsza poniżej 10 KB), rzadko się zmienia i w przeciwnym razie kosztowałby dodatkowe żądanie HTTP — czyli ikony, logo w e-mailach albo jednoplikowe dokumenty HTML. Przy czymkolwiek większym wygrywa osobny plik: buforuje się niezależnie, ładuje równolegle i nie powiększa Twojego HTML-a ani CSS-a o 33%.
- Dlaczego wersja Base64 jest o mniej więcej jedną trzecią większa od pliku?
- Base64 przedstawia każde 3 bajty danych binarnych jako 4 znaki ASCII, czyli strukturalny narzut +33% (plus najwyżej dwa znaki dopełnienia). Gzip albo Brotli na serwerze część tego odzyskuje, ale samo rozdęcie jest nieodłączne od kodowania — wymienia rozmiar na możliwość osadzenia danych binarnych w tekście.
- Czy mogę zdekodować data URL znaleziony w arkuszu stylów albo HTML-u?
- Tak — przełącz na Base64 → obraz i wklej całość razem z przedrostkiem data:. Zakodowane procentowo data URL-e z SVG (te bez ;base64) też się dekodują, a łamania wierszy i spacje w ładunku są usuwane automatycznie. Wynik pokazuje się w podglądzie i pobiera z właściwym rozszerzeniem.
- Czy działa to dla SVG, GIF i ICO, czy tylko dla PNG i JPEG?
- Wszystko, co rozpozna detektor, przekonwertuje się na Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO i AVIF. Przy SVG warto jednak pamiętać, że źródło XML wklejone wprost bywa mniejsze i czytelniejsze — kodowanie SVG w Base64 ma sens głównie wtedy, gdy problemem staje się cytowanie albo escapowanie.