Konwertuj obrazy na Data URL Base64

Osadzaj obrazy bezpośrednio w HTML, CSS lub JSON. Bez przesyłania na serwer — 100% prywatności.

base64-converter.js
1const img = await loadImage(file);
2const canvas = document.createElement("canvas");
3const ctx = canvas.getContext("2d");
4ctx.drawImage(img, 0, 0);
5const dataUrl = canvas.toDataURL();
6return btoa(dataUrl);

Upuść obrazy tutaj

lub kliknij, aby wybrać

JPGPNGWebPAVIFHEIC

Pliki nigdy nie opuszczają przeglądarki

Ustawienia wyjściowe

Wybierz sposób dostarczenia Base64.

Przetwarzanie działa lokalnie w przeglądarce.

Konwersja obrazów do Base64 w trzech krokach

Prześlij lokalnie, konwertuj natychmiast, skopiuj lub pobierz pliki tekstowe.

Prześlij obrazy lub ZIP

Przeciągnij i upuść pliki lub archiwum ZIP z folderami.

Generuj Base64

Kodujemy każdy obraz lokalnie bez przesyłania.

Kopiuj lub pobierz

Kopiuj do schowka lub pobierz ZIP z plikami .txt.

Kiedy używać obrazów Base64

Typowe scenariusze, w których kodowanie inline Base64 poprawia wydajność i upraszcza wdrożenie.

Osadzanie w HTML i CSS

Umieszczaj małe obrazy bezpośrednio w kodzie, aby zredukować żądania HTTP i poprawić czas ładowania.

Szablony e-mail

Osadzaj logo i ikony w e-mailach HTML, aby wyświetlały się bez blokowania obrazów.

Integracje API

Wysyłaj obrazy do API wizyjnych AI, chmury lub webhooków oczekujących payloadów Base64.

Aplikacje jednoplikowe

Spakuj wszystkie zasoby w jeden plik HTML dla narzędzi offline, dem lub przenośnych dokumentów.

Pytania o kodowanie Base64

Wszystko, co programiści muszą wiedzieć o osadzaniu obrazów inline.

Do czego służy kodowanie Base64?

Base64 zamienia obraz w tekst, dzięki czemu można go osadzić bezpośrednio w tagach img HTML, właściwościach background-image w CSS, payloadach JSON API i szablonach e-mail bez konieczności pobierania osobnych plików.

Powinienem użyć Data URL czy czystego Base64?

Użyj Data URL (z prefiksem data:image/...;base64) dla osadzania w HTML i CSS. Użyj czystego Base64 przy wysyłaniu do API, takich jak OpenAI Vision, przesyłaniu do usług chmurowych, lub gdy system odbiorczy dodaje własny prefiks.

Jak osadzić Base64 w HTML?

Użyj Data URL bezpośrednio w atrybucie src: <img src="data:image/png;base64,..." />. Eliminuje to żądanie HTTP, a obraz ładuje się natychmiast wraz ze stroną.

Jak używać Base64 w CSS?

Ustaw go jako background-image: background-image: url("data:image/png;base64,..."). Świetne dla małych ikon, wzorów i elementów UI, które muszą ładować się bez migotania.

Czy moje obrazy są przesyłane na serwer?

Nie. Cała konwersja Base64 odbywa się lokalnie w Twojej przeglądarce przy użyciu JavaScript. Twoje obrazy nigdy nie opuszczają urządzenia, co czyni to narzędzie 100% prywatnym i bezpiecznym.

Czy mogę konwertować ZIP z folderami w środku?

Tak. Przesyłanie ZIP jest w pełni obsługiwane. Struktura folderów jest zachowana przy pobieraniu wszystkich plików Base64 jako ZIP, co ułatwia przetwarzanie wsadowe.

Czy Base64 zwiększa rozmiar pliku?

Tak, kodowanie Base64 zwiększa rozmiar o około 33%. Dla małych obrazów (ikony, logo poniżej 10KB) jest to w porządku. Dla większych obrazów rozważ najpierw kompresję naszym głównym narzędziem.

Czy jest limit rozmiaru pliku?

Pojedyncze pliki są ograniczone do 25MB, aby zachować płynność działania przeglądarki. Dla najlepszych wyników z Base64 używaj obrazów poniżej 100KB, aby uniknąć nadmiernego rozrostu HTML/CSS.

Potrzebujesz najpierw mniejszych plików?

Skompresuj obrazy przed kodowaniem dla szybszego osadzania i lepszej wydajności.