Konwerter obrazów na Base64
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
O tym narzędziu
To narzędzie działa w obie strony między plikiem graficznym a jego tekstową postacią Base64. Wrzuć JPEG, PNG, GIF, WebP albo SVG, a otrzymasz pełny ciąg data:, gotowy do wklejenia w CSS, HTML, JSON czy szablon e-maila. Możesz też wkleić data URI albo sam ciąg Base64, a narzędzie zdekoduje go z powrotem do obrazu, który da się podejrzeć i pobrać.
Jak narzędzie rozpoznaje format obrazu?
Jeśli wklejasz pełny ciąg data:, typ MIME jest już zapisany w samym tekście. Ale gdy masz tylko surowy blok Base64 bez nagłówka, narzędzie odczytuje pierwsze bajty zdekodowanych danych i porównuje je ze znanymi sygnaturami plików PNG, JPEG, GIF i WebP, czyli tak zwanymi “magic bytes”, które identyfikują format niezależnie od rozszerzenia pliku. SVG to przypadek szczególny, bo to format tekstowy, nie binarny, więc jest rozpoznawany po tym, czy zdekodowana treść zaczyna się od <svg albo deklaracji <?xml. Jeśli nic nie pasuje, narzędzie mówi wprost, że nie rozpoznaje formatu, zamiast zgadywać.
Czy moje obrazy są gdzieś wysyłane?
Nie. Wszystko dzieje się w przeglądarce, przy użyciu FileReader API i standardowego kodowania Base64, żaden obraz nigdy nie trafia na serwer. Dzięki temu można spokojnie używać tego narzędzia do zrzutów ekranu, prywatnych dokumentów czy czegokolwiek innego, co ma zostać na twoim komputerze, choć warto pamiętać, że same data URI to zwykły tekst.
Do czego się to przydaje?
Obrazy w Base64 często osadza się bezpośrednio w arkuszu stylów, co oszczędza przeglądarce osobnego zapytania HTTP dla każdej małej ikonki. Przydają się też przy wysyłaniu grafik w e-mailach albo eksportach HTML w jednym pliku, gdzie odwoływanie się do zewnętrznego pliku graficznego nie ma sensu. Po stronie dekodowania narzędzie sprawdza się, gdy masz ciąg Base64 w odpowiedzi jakiegoś API, w pliku konfiguracyjnym albo w logu i chcesz po prostu zobaczyć, jaki obraz się za nim kryje. Warto pamiętać, że kodowanie Base64 dodaje około 33% narzutu względem rozmiaru pliku źródłowego, więc lepiej sprawdza się do małych obrazków niż do pełnych zdjęć. Więcej o składni i sensowności takiego rozwiązania znajdziesz w przewodniku MDN o data URI.