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.
REKLAMA
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.
REKLAMA
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
Co to jest Base64?
Base64 to sposób kodowania danych binarnych jako ciągu znaków ASCII. Pozwala osadzić obraz bezpośrednio w kodzie HTML, CSS lub JSON bez konieczności linkowania zewnętrznego pliku.
Czy Base64 zwiększa rozmiar pliku?
Tak, kodowanie Base64 zwiększa rozmiar danych o ok. 33%. Dlatego Base64 sprawdza się najlepiej dla małych obrazów (ikony, logotypy do 10 KB). Dla większych plików lepiej użyć normalnych obrazów.
Jak użyć Base64 w CSS?
Użyj właściwości background-image z data URI: background-image: url(data:image/png;base64,iVBOR...). Narzędzie generuje gotowy ciąg do skopiowania.
Czy plik jest wysyłany na serwer?
Nie. Kodowanie odbywa się lokalnie w przeglądarce za pomocą FileReader API. Plik nie opuszcza komputera.
Czy kodowanie Base64 jest bezpieczne?
Tak. Kodowanie odbywa się całkowicie lokalnie w przeglądarce za pomocą FileReader API. Plik nie jest wysyłany na żaden serwer. Po zamknięciu strony dane są automatycznie usuwane z pamięci.
Czy Base64 działa we wszystkich przeglądarkach?
Tak. Data URI z Base64 są obsługiwane przez wszystkie nowoczesne przeglądarki: Chrome, Firefox, Safari, Edge i Opera. Działają również w większości klientów e-mail.
Jaki jest maksymalny rozmiar obrazu dla Base64?
Nie ma twardego limitu, ale praktyczna granica to ok. 100 KB oryginalnego pliku. Większe obrazy generują bardzo długie ciągi tekstu, które mogą spowalniać ładowanie strony.
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.
REKLAMA
Sprawdź inne narzędzia
Edytor zdjęć
Zmień rozmiar, wykadruj i przekonwertuj zdjęcie. Gotowe formaty, okrągłe avatary, eksport JPG/PNG/WebP.
Licznik meta title i description
Sprawdź długość tytułu i opisu strony w pikselach. Podgląd wyniku w Google na żywo.
PNG na JPG
Zamień pliki PNG na JPG. Konwersja w przeglądarce, bez limitu plików i rejestracji.
Generator favicon
Stwórz favicon.ico dla swojej strony z jednego obrazu. Bez logowania i rejestracji.
Generator palet kolorów
Wygeneruj 9 palet z jednego koloru: monochromatyczną, komplementarną, triadyczną i inne. Kody HEX.
Tester kontrastu kolorów
Sprawdź kontrast tekstu i tła według WCAG 2.1 AA i AAA. Automatyczna korekta kolorów.
Generator kodów QR
Stwórz kod QR do strony, wizytówki vCard lub druku. Eksport PNG i SVG, bez rejestracji.
Licznik słów i znaków
Policz słowa, znaki, zdania i czas czytania. Zmień wielkość liter i sformatuj tekst jednym kliknięciem.