1. Wgraj obraz
Przeciągnij obraz (JPG, PNG, WebP, SVG, GIF) na pole lub wybierz z dysku.
Zakoduj obraz do formatu Base64
Wgraj obraz (JPG, PNG, WebP, SVG, GIF), a narzędzie zamieni go na ciąg Base64 gotowy do osadzenia w CSS, HTML lub JSON. Konwersja lokalna w przeglądarce.
Loading tool editor...
Dlaczego warto kodować obrazy do Base64?
Base64 to sposób zapisu danych binarnych jako ciągu znaków tekstowych. Zakodowany obraz można osadziæ bezpośrednio w kodzie HTML (<img src="data:image/png;base64,...">), CSS (background-image: url(data:...)), JSON lub przekazać do API — bez konieczności hostowania pliku na serwerze.
Kodowanie Base64 jest niezbędne w kilku scenariuszach: osadzanie małych ikon i logotypów inline w CSS (eliminacja zapytań HTTP), tworzenie szablonów e-mail z osadzonymi obrazami (Outlook blokuje zewnętrzne obrazy domyślnie), przesyłanie obrazów do API (OpenAI Vision, Google Cloud Vision) oraz generowanie samodzielnych plików HTML bez zależności.
Base64 zwiększa rozmiar danych o ok. 33% (3 bajty binarne = 4 znaki Base64). Dla małych obrazów do 10 KB korzyść z eliminacji zapytań HTTP przeważa nad wzrostem rozmiaru. Dla dużych zdjęć (>50 KB) lepiej użyć normalnych plików — Base64 zwiększyłby rozmiar strony i spowolnił ładowanie.
Cała konwersja odbywa się lokalnie w przeglądarce — dane nie są wysyłane na serwer. Bez rejestracji, bez limitów, bez śledzenia.
Jak zakodować obraz do Base64?
2. Skopiuj Base64
Narzędzie automatycznie wygeneruje ciąg Base64 z typem MIME (data URI).3. Użyj w kodzie
Wklej ciąg Base64 do CSS, HTML, JSON lub przekaż do API.
Kiedy warto kodować obraz do Base64?
Ikony i logotypy inline w CSS
Małe ikony i logotypy (do 10 KB) warto osadziæ bezpośrednio w CSS jako Base64. Eliminuje to dodatkowe zapytania HTTP i przyspiesza ładowanie strony — szczególnie ważne dla ikon w nawigacji i przyciskach.Szablony e-mail i podpisy
Outlook, Gmail i inne klienty e-mail blokują zewnętrzne obrazy domyślnie. Osadzenie logo i grafik jako Base64 gwarantuje ich wyświetlanie bez klikania ‘Załaduj obrazy’.Przesyłanie do API
API takie jak OpenAI Vision, Google Cloud Vision, Tesseract OCR i wiele innych przyjmują obrazy jako ciąg Base64 w body zapytania POST. Konwerter generuje gotowy string.Samodzielne pliki HTML
Tworzysz plik HTML, który musi działać offline bez serwera? Osadzenie obrazów jako Base64 eliminuje zależność od zewnętrznych plików — cała treść w jednym pliku.
Co wyróżnia konwerter obraz na Base64?
Pełna prywatność
Plik nie opuszcza komputera. Kodowanie odbywa się w przeglądarce.Gotowy data URI
Wynik zawiera pełny data URI z typem MIME - gotowy do wklejenia w CSS lub HTML.Wiele formatów
Obsługa formatów JPG, PNG, WebP, SVG, GIF, BMP i TIFF — zakoduj dowolny obraz jako ciąg Base64 bez instalacji.Szybkie kopiowanie
Skopiuj zakodowany ciąg Base64 do schowka jednym kliknięciem i wklej go bezpośrednio do kodu HTML, CSS lub JavaScript.
Wskazówki dotyczące kodowania Base64
- Base64 zwiększa rozmiar danych o ok. 33% - używaj go tylko dla małych obrazów (do 10 KB).
- Dla większych obrazów (zdjęcia, banery) lepiej użyć normalnych plików - Base64 spowolni ładowanie strony.
- Data URI zawiera typ MIME (np. data:image/png;base64,...) - narzędzie generuje go automatycznie.
- W CSS użyj: background-image: url(data:image/png;base64,...) - skopiuj cały ciąg z narzędzia.
Jak działa kodowanie Base64?
Kodowanie Base64 zamienia dane binarne (bajty obrazu) na ciąg znaków ASCII składający się z liter (A–Z, a–z), cyfr (0–9) oraz znaków + i /. Każde 3 bajty danych są kodowane jako 4 znaki Base64 — dlatego wynik jest o około 33% większy niż oryginalny plik.
Narzędzie generuje pełny data URI w formacie data:image/png;base64,iVBOR..., który zawiera informację o typie MIME obrazu. Taki ciąg można wkleić bezpośrednio do kodu HTML (atrybut src) lub CSS (background-image).
Kodowanie odbywa się w przeglądarce za pomocą FileReader API — plik nie jest wysyłany na serwer. Cała operacja jest natychmiastowa nawet dla większych obrazów.
Na co zwrócić uwagę przy kodowaniu Base64?
Kilka wskazówek, które pomogą optymalnie wykorzystać Base64:
Rozmiar pliku
Base64 zwiększa rozmiar o ok. 33%. Dla ikon do 10 KB korzyść z redukcji zapytań HTTP przeważa. Dla dużych zdjęć lepiej użyć normalnych plików.Wydajność strony
Osadzenie dużego obrazu Base64 w CSS lub HTML zwiększa rozmiar dokumentu i spowalnia parsowanie. Stosuj Base64 głównie dla małych grafik.Użycie w CSS
W CSS użyj: background-image: url(data:image/png;base64,...). Narzędzie generuje pełny data URI gotowy do skopiowania.Szablony e-mail
Klienty e-mail (Outlook, Gmail) blokują zewnętrzne obrazy domyślnie. Base64 wyświetla się od razu, ale zwiększa rozmiar wiadomości.
Konwertuj JPG do innych formatów
Najczęściej zadawane pytania o kodowaniu Base64
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.