Koder & dekoder obrazów Base64 — bezpłatne narzędzie do konwersji online
Koder & dekoder obrazów Base64
Konwertuj obrazy do Base64 i z powrotem. Obsługuje PNG, JPEG, GIF, WebP, BMP, SVG i ICO. Wynik jako Data URI, HTML <img>, CSS background-image, Markdown, JSON lub XML. Całe przetwarzanie odbywa się lokalnie w przeglądarce — Obrazy nigdy nie są wysyłane na żaden serwer.
Kierunek:
Format:
Prześlij obraz
📷
Kliknij, aby wybrać lub przeciągnij i upuść obraz tutaj
PNG, JPEG, GIF, WebP, BMP, SVG, ICO — maks. 10 MB
⚠ Duży obraz (>5 MB). Zakodowany Base64 będzie bardzo długi. Rozważ najpierw kompresję.
Format:
-
Wymiary:
-
Rozmiar pliku:
-
Rozmiar Base64:
-
Wyjście (Base64)
Kodowanie: Obraz → Base64 Prześlij lub przeciągnij obraz, aby zakodować go do Base64. Wybierz jeden z 7 formatów wyjściowych: Data URI (do osadzania bezpośrednio na stronach), surowy Base64, HTML <img>, CSS background-image, Markdown, JSON lub XML. Dekodowanie: przełącz kierunek, aby zdekodować ciąg Base64 z powrotem do obrazu — wklej dowolny Base64 lub Data URI i zobacz podgląd obrazu. Format obrazu jest wykrywany automatycznie na podstawie bajtów nagłówka (PNG, JPEG, GIF, WebP, BMP, ICO, SVG). Bezpieczne dla URL: zamienia + na - i / na _ oraz usuwa końcowe dopełnienie =. Obsługiwane formaty: PNG, JPEG, GIF, WebP, BMP, SVG, ICO. Prywatność: całe przetwarzanie odbywa się lokalnie w przeglądarce — Obrazy nigdy nie są wysyłane.
Kiedy warto osadzać obrazy
Osadzenie obrazu jako data URI oszczędza jedno żądanie HTTP, ale tekst Base64 jest o około 33% większy od surowych bajtów i nie może być buforowany osobno od strony. Ten kompromis jest opłacalny dla małych ikon i jednorazowych grafik, a zwykle błędny dla zdjęć i powtarzanych zasobów.
Zasada kciuka: osadzaj obrazy o rozmiarze kilku KB; przy większych plikach osobny plik graficzny, zapisany w pamięci podręcznej, wygrywa przy kolejnych wizytach.
🔷 Informacje o obrazie Base64
Formaty wyjściowe 7 formatów do różnych zastosowań.
Data URI data:image/png;base64,...
Surowy Base64 Wyłącznie zwykły ciąg base64
HTML Znacznik <img src="...">
CSS background-image: url(...)
Markdown / JSON / XML Osadzanie w dokumentacji, API, konfiguracjach