CodeKitHubCzym jest to narzędzie?
Base64 to sposób na przedstawienie danych binarnych — takich jak surowe bajty obrazu — w postaci zwykłego tekstu, przy użyciu wyłącznie liter, cyfr i kilku symboli. Ponieważ jest to zwykły tekst, obraz zakodowany w Base64 można osadzić bezpośrednio w kodzie HTML, CSS lub JSON, zamiast odwoływać się do niego jako do osobnego pliku.
„Adres URL danych” otacza ten tekst zakodowany w Base64 krótkim prefiksem (data:image/png;base64,), który informuje przeglądarkę o typie pliku, dzięki czemu można go umieścić bezpośrednio w atrybucie src lub url() i wyświetlić bez konieczności wysyłania dodatkowego żądania.
Dlaczego warto go używać?
- Pobierz oba formaty jednocześnie — pełny adres URL danych dla HTML/CSS oraz surowy kod Base64 (bez przedrostka) do osadzenia w plikach JSON lub plikach konfiguracyjnych.
- Brak komunikacji z serwerem: eliminuje jedno żądanie HTTP w przypadku małych ikon, awatarów lub obrazów osadzonych w treści.
- Zachowuje dokładnie oryginalne bajty pliku — bez ponownego kodowania ani utraty jakości, w przeciwieństwie do narzędzi, które dekodują obraz i zapisują go ponownie.
- Pokazuje różnicę w rozmiarze, dzięki czemu wiesz, co tracisz w zamian za wygodę.
- Prywatne: plik jest odczytywany lokalnie za pomocą interfejsu API FileReader przeglądarki i nigdy nie opuszcza urządzenia.
Jak używać
- Kliknij obszar przeznaczony do przesyłania plików lub przeciągnij plik graficzny na ten obszar.
- Skopiuj pełny adres URL danych, jeśli chcesz wkleić go do atrybutu <img src> lub atrybutu background-image w CSS.
- Skopiuj surowy kod Base64 (bez przedrostka „data:”), jeśli osadzasz tę wartość w formacie JSON, YAML lub innym formacie konfiguracyjnym, który rozpoznaje ten typ pliku.
- Zwróć uwagę na informację o rozmiarze — tekst zakodowany w Base64 zajmuje o około jedną trzecią więcej miejsca niż oryginalny plik binarny.
Przykład
Wejście
A 12 KB PNG icon file.Wynik
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB of text) plus the same string without the data: prefix.Wzrost rozmiaru o około 33% wynika z samej natury kodowania Base64 (3 bajty danych binarnych zamieniają się w 4 znaki tekstowe) — nie jest to błąd narzędzia.
Gdzie stosuje się poszczególne formaty
| Format | Typowe zastosowanie |
|---|---|
| Pełny adres URL danych | HTML <img src="...">, CSS background-image: url(...), obrazy w wiadomościach e-mail |
| Surowe dane Base64 | Dane w interfejsie API JSON, pliki YAML/konfiguracyjne, pola BLOB w bazach danych, niestandardowe protokoły binarne |
Base64 a rozmiar obrazu — kompromis w praktyce
Około 33-procentowy narzut oznacza, że osadzanie w formacie Base64 najlepiej stosować w przypadku niewielkich zasobów: ikona o rozmiarze 2 KB zamienia się w nieznacznie większy tekst wbudowany o rozmiarze ~2,7 KB, ale zdjęcie o rozmiarze 500 KB zamienia się w ~665 KB tekstu wbudowanego w kod HTML, co spowalnia parsowanie i uniemożliwia buforowanie tego tekstu oddzielnie od strony.
Jeśli osadzasz wiele obrazów lub obrazy o większym rozmiarze, porównaj korzyść wynikającą z oszczędności jednego żądania z kosztem związanym z większym rozmiarem strony — i rozważ najpierw kompresję.
Najczęściej zadawane pytania
Dlaczego ciąg znaków Base64 jest o wiele większy niż mój plik graficzny?
Kodowanie Base64 przekształca każde 3 bajty danych binarnych na 4 znaki tekstowe, co powoduje stały wzrost rozmiaru o około 33%. W przypadku obrazu o rozmiarze 100 KB należy spodziewać się, że tekst w formacie Base64 zajmie około 133 KB. Jest to normalne i nie da się tego uniknąć — to cena, jaką trzeba zapłacić za przedstawienie danych binarnych w postaci bezpiecznego, przenośnego tekstu.
Jaka jest różnica między adresem URL danych a surowym ciągiem znaków Base64?
Adres URL danych zawiera prefiks „data:image/png;base64”, który informuje przeglądarkę lub moduł renderujący, do jakiego typu MIME dekodowany jest następujący po nim tekst. Wklej pełny adres URL danych do atrybutu src w kodzie HTML lub do funkcji url() w CSS. Surowy kod Base64 (wszystko po przecinku) jest tym, czego potrzebujesz, gdy system już osobno rozpoznaje typ pliku — na przykład w polu JSON o postaci { „format”: „png”, „data”: „<surowy kod Base64>” }.
Kiedy warto osadzić obraz w formacie Base64 zamiast umieszczać link do pliku?
Osadzanie w formacie Base64 sprawdza się w przypadku małych, często wykorzystywanych obrazów (ikony, logo, drobne elementy graficzne interfejsu użytkownika), gdzie oszczędność jednego żądania HTTP przeważa nad około 33-procentowym wzrostem rozmiaru, lub w sytuacjach, w których osobny plik nie jest praktycznym rozwiązaniem, np. w wiadomościach e-mail z treścią osadzoną bezpośrednio w tekście lub eksportach HTML do pojedynczego pliku. W przypadku dużych zdjęć lub wszelkich elementów wykorzystywanych na wielu stronach prawie zawsze lepszym rozwiązaniem jest zwykły plik z linkiem, korzystający z pamięci podręcznej przeglądarki.
Czy konwersja do formatu Base64 powoduje zmianę lub kompresję mojego obrazu?
Nie. Base64 to bezstratne kodowanie tekstowe dokładnie tych samych bajtów, co w oryginale — nie ma wpływu na piksele, rozdzielczość ani kompresję. Jeśli chcesz uzyskać mniejszy plik, najpierw skompresuj obraz za pomocą programu do kompresji obrazów, a następnie przekonwertuj skompresowany plik do formatu Base64.
Czy moje zdjęcie zostało gdzieś przesłane?
Nie. Plik jest odczytywany bezpośrednio w przeglądarce za pomocą interfejsu API FileReader i kodowany lokalnie — nigdy nie jest przesyłany przez sieć.