W tym artykule
Czym jest kodowanie Base64 obrazów?
Base64 to schemat kodowania binarnego na tekst, który reprezentuje dane binarne (takie jak plik obrazu) jako ciąg ASCII. Gdy kodujesz obraz do Base64, wynikiem jest długi ciąg tekstowy, który można osadzić bezpośrednio w HTML, CSS lub JSON — bez konieczności pobierania osobnego pliku.
Najczęstszą formą jest Data URI, który wygląda jak data:image/png;base64,iVBORw0KGgo... i może być użyty bezpośrednio w atrybucie src elementu <img> lub we właściwości CSS background-image.
Jak działa nasz koder
Koder Obraz na Base64 od CheckTown działa w całości w Twojej przeglądarce — żadne pliki nie są przesyłane na żaden serwer:
- Prześlij dowolny obraz (JPEG, PNG, WebP, GIF lub BMP do 50 MB) przez przeciąganie, wybór pliku lub wklejenie ze schowka
- Wybierz format wyjściowy: Data URI, surowy Base64, tag HTML <img> lub fragment CSS background-image
- Skopiuj zakodowany ciąg do schowka jednym kliknięciem i wklej go bezpośrednio do swojego kodu
Wypróbuj za darmo — bez rejestracji
Zakoduj obraz →Kiedy używać obrazów Base64
Kodowanie Base64 jest przydatne w konkretnych scenariuszach programistycznych:
- Obrazy inline — osadź małe ikony lub logotypy bezpośrednio w HTML/CSS, aby wyeliminować dodatkowe żądania HTTP i poprawić czas ładowania
- Szablony e-mail — wiele klientów poczty domyślnie blokuje zewnętrzne obrazy, ale obrazy inline Base64 wyświetlają się natychmiast
- Ładunki API — dołącz dane obrazu do API JSON lub plików konfiguracyjnych, gdzie przesyłanie plików binarnych nie jest obsługiwane
Często zadawane pytania
Czy Base64 zwiększa rozmiar pliku?
Tak — kodowanie Base64 zwiększa rozmiar danych o około 33%. Obraz o wielkości 100 KB staje się około 133 KB tekstu. Dlatego Base64 najlepiej nadaje się do małych obrazów (ikony, miniatury), a nie dużych fotografii.
Kiedy NIE powinienem używać Base64?
Unikaj Base64 dla dużych obrazów (powyżej 10–20 KB). Narzut na rozmiar przewyższa korzyść z oszczędzenia jednego żądania HTTP. Dla dużych zasobów serwuj je jako zwykłe pliki i pozwól przeglądarce je buforować.
Czy mój obraz jest przesyłany na serwer?
Nie. Kodowanie wykorzystuje API FileReader przeglądarki. Twój obraz nigdy nie opuszcza Twojego urządzenia.