Jak działa konwersja obrazu do Base64
Cała konwersja odbywa się w przeglądarce przy użyciu File API i wbudowanej funkcji btoa — żadna biblioteka kodeków nie jest pobierana i żaden serwer nie widzi obrazu. Oto pipeline, od początku do końca:
- Upuszczasz lub wybierasz obraz. Przeglądarka odczytuje go jako Blob z lokalnego dysku, nie kopiując bajtów na serwer.
- Plik jest odczytywany fragmentami po 1 MB, a bajty każdego fragmentu są dołączane do ciągu binarnego. Fragmentacja zapobiega przepełnieniu stosu wywołań JavaScript przy dużych obrazach.
- Ciąg binarny jest przekazywany do btoa, która mapuje każde trzy bajty na cztery znaki Base64 z alfabetu A–Z, a–z, 0–9, plus /.
- Typ MIME pliku (image/png, image/jpeg itd.) jest odczytywany z obiektu File i dołączany jako prefiks data:, tworząc kompletne data:image/…;base64,… URI.
- Strona składa cztery wyjścia z tego URI — pełne data URI, surowy Base64 bez prefiksu, gotowy do wklejenia tag
i fragment CSS background-image — każdy z własnym przyciskiem kopiowania.
Dlaczego kodować obraz jako data URI?
- Umieszczenie małego logo lub ikony jako data URI eliminuje osobny rundtrip sieciowy, dzięki czemu strona lub e-mail renderuje pierwszą klatkę nieco szybciej.
- Strona lub arkusz stylów z obrazami inline jest samowystarczalna. Działa offline i można ją przenosić bez ciągania za sobą folderu zasobów.
- Wiele klientów pocztowych domyślnie blokuje zdalne obrazy. Zakoduj logo jako Base64 inline i pojawia się w momencie otwarcia wiadomości, bez potrzeby pobierania zdalnego.
- Kodowanie odbywa się całkowicie w przeglądarce, więc wrażliwe obrazy nigdy nie trafiają do serwera trzeciej strony. Dotyczy to zrzutów ekranu, skanów dokumentów i wewnętrznych diagramów.
Typowe zastosowania obrazów Base64
Data URI pojawiają się wszędzie tam, gdzie obraz jest wystarczająco mały, że osobne żądanie kosztuje więcej niż ~33% inflacja rozmiaru, którą dodaje Base64. Trzy wzorce pojawiają się stale:
- Ikony CSS inline: sprite lub ikona 1–2 KB wrzucona do arkusza stylów jako background-image: url(data:…), dzięki czemu reguła jest w pełni samowystarczalna.
- Stopki e-mail i newslettery: logo osadzone jako
z data URI src renderuje się nawet gdy klient blokuje zdalne obrazy.
- Inline'owanie przez narzędzia budowania: bundlery takie jak Webpack i Vite automatycznie inline'ują zasoby poniżej progu bajtowego, a to narzędzie pozwala podejrzeć dokładny wynik.
Jak wygląda obraz Base64?
Weź maleńki przezroczysty PNG 1×1. Jego surowe bajty to zaledwie 67 bajtów, ale po zakodowaniu staje się ciągiem iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, a pełne data URI to data:image/png;base64,iVBORw0KGgo…. Zauważ, że forma zakodowana jest mniej więcej o jedną trzecią większa od oryginału. To jest kompromis za możliwość bezpiecznego osadzenia danych binarnych bezpośrednio w tekście.
Czy mój obraz jest gdzieś wysyłany?
Nie. Konwersja używa File API przeglądarki i natywnej funkcji btoa do zakodowania obrazu w całości na Twoim urządzeniu. Możesz to sam sprawdzić: otwórz narzędzia deweloperskie przeglądarki, przejdź do panelu Sieć i skonwertuj obraz — jedyne żądania, które zobaczysz, to załadowanie strony i ewentualnie reklamy. Nic w kształcie obrazu nie jest wysyłane na serwer, co czyni to bezpiecznym dla zrzutów ekranu, dokumentów tożsamości i wewnętrznych diagramów.
Dlaczego wyjście Base64 jest większe niż mój oryginalny obraz?
Base64 reprezentuje każde trzy bajty danych binarnych czterema znakami ASCII, więc zakodowany tekst jest o około 33% większy niż plik źródłowy. Podgląd rozmiaru data URI na tej stronie pokazuje dokładną powiększoną długość. To narzut sprawia, że data URI mają sens tylko dla małych obrazów — inline'owanie zdjęcia 2 MB nadmiernie rozrośnie Twój HTML lub CSS. Jako zasada ogólna: inline'uj obrazy poniżej około 4 KB, a dla większych używaj oddzielnych plików.
Jakie formaty obrazów mogę konwertować?
Działa każdy format rozpoznawany przez przeglądarkę jako obraz, ponieważ narzędzie odczytuje surowe bajty bez dekodowania obrazu. Obejmuje to PNG, JPEG, GIF, WebP, SVG i BMP. Typ MIME jest odczytywany bezpośrednio z pliku, więc prefiks data: zawsze odpowiada rzeczywistemu formatowi — JPEG produkuje data:image/jpeg, a SVG produkuje data:image/svg+xml. SVG zasługuje na szczególną uwagę: to już tekst, więc dla SVG data URI z kodowaniem URL jest często mniejsze niż wersja Base64, choć to narzędzie emituje formę Base64 dla spójności.
Upuść obraz, skopiuj data URI lub fragment, którego potrzebujesz, i wklej do szablonu HTML, CSS lub e-mail. Każdy bajt pozostaje na Twoim urządzeniu. Bez przesyłania, bez konta, bez rundtripu serwera.