Konwerter obrazu na Base64 i Data URI (oraz z powrotem)

Base64 zapisuje dane binarne (np. plik PNG) za pomocą 64 bezpiecznych znaków tekstowych: A-Z, a-z, 0-9, „+” i „/”. Każde 3 bajty pliku zamieniają się w 4 znaki, więc tekst jest o ok. 33% dłuższy niż plik: obraz 30 KB to ok. 40 KB tekstu (dokładnie 4 × ⌈n ÷ 3⌉ znaków).

Data URI to Base64 z prefiksem informującym o typie danych, np. data:image/png;base64,iVBORw0KGgo…. Przeglądarka traktuje go jak adres pliku, więc można go wpisać w src obrazka lub url() w CSS.

• Tak: małe ikony i wzory (do kilku KB), obrazki w szablonach e-maili, pojedyncze pliki HTML bez zewnętrznych zasobów, dane w JSON/API, testy.
• Nie: zdjęcia i duże grafiki. Base64 zwiększa rozmiar o 33%, nie jest buforowany osobno przez przeglądarkę i blokuje parsowanie CSS/HTML. Duże obrazy lepiej serwować jako zwykłe pliki (najlepiej WebP).

W przypadku SVG często lepiej sprawdza się osadzenie tekstu SVG zakodowanego jako URL zamiast Base64 - jest krótsze.

Długość Base64 to 4 × ⌈n ÷ 3⌉ znaków, gdzie n to rozmiar pliku w bajtach. Data URI jest dłuższy o prefiks, np. data:image/png;base64, to 22 znaki.

Powyżej 100 KB narzędzie wyświetla ostrzeżenie. Plik jest kodowany bajt w bajt, bez ponownej kompresji - dlatego Base64 zawiera też metadane EXIF zdjęcia (np. GPS). Przed osadzeniem zdjęcia warto je usunąć w narzędziu usuwanie EXIF i zmniejszyć w kompresorze zdjęć.

• Niepełny tekst - Base64 skopiowany z logów lub konsoli bywa ucięty. Typowy objaw: komunikat o niepoprawnym Base64 albo obraz urwany w połowie.
• Spacje i znaki nowej linii - są usuwane automatycznie, więc możesz wkleić tekst łamany co 76 znaków (jak w e-mailach MIME).
• Wariant URL-safe - znaki „-” i „_” są zamieniane na „+” i „/”, a brakujące „=” na końcu są uzupełniane.
• Fragment kodu - można wkleić całą regułę CSS z url(…) lub znacznik <img src="…">; narzędzie samo wyciągnie dane.
• Dane, które nie są obrazem - typ jest rozpoznawany po sygnaturze pliku (JPG, PNG, GIF, WebP, BMP, ICO, AVIF, SVG), a nie tylko po prefiksie data:. Base64 z PDF-em lub tekstem zostanie odrzucony.

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Logo">

.ikona {
  background-image: url("data:image/svg+xml;base64,PHN2Zy…");
}

![Logo](data:image/png;base64,iVBORw0KGgo…)