Convert images to Base64 data URIs — 100% in your browser
Processing uses browser-native Canvas and File APIs, so output can vary slightly between browsers. All processing runs locally in your browser.
An image file is a stream of binary bytes. Base64 re-encodes those bytes using only 64 printable characters (A–Z a–z 0–9 + /), so the result can live inside HTML, CSS or JSON where raw binary cannot. Every 3 input bytes become 4 characters (3×8 = 24 bits → 4×6 bits). Because the alphabet holds 64 symbols, the string grows by about 33% over the raw file. The data: URI simply prefixes the MIME type (data:image/png;base64,) so a browser can decode it back into a real image.
Bytes 0x48 0x69 0x21 are the text 'Hi!'. Split into 6-bit groups, each maps to one alphabet symbol: S, G, k, h. 'data:image/png;base64,…' tells the browser which decoder to run on the string.
A 200 KB PNG you want to ship without a separate network request.
Convert images to Base64 DataURL. Everything runs locally; nothing is uploaded.
FreeToolHub Image to Base64 is a free browser-based tool — convert images to Base64 DataURL. No signup, no upload; everything runs locally in your browser.
Konvertieren Sie Bilder in Base64 DataURL. Unterstützt JPG, PNG, WebP, GIF, SVG. Kopieren oder herunterladen. Kostenlos, 100 % browserbasiert.
Dieser Konverter kodiert Bilder in Base64 data URLs — die selbstständigen Zeichenketten wie data:image/png;base64,iVBOR..., die Bilder direkt in HTML, CSS und JSON einbetten, ohne separate Dateianfragen. Er akzeptiert JPG, PNG, WebP, GIF und SVG, zeigt die kodierte Länge und die Größen-Overhead im Vergleich zur Originaldatei an und gibt die vollständige data URL oder nur die Base64-Nutzlast aus. CSS- und HTML-bereite Snippets ermöglichen das Einfügen des richtigen Wrappers für background-image gegenüber <img> Tags ohne manuelle Bearbeitung.
Webentwickler binden kleine Symbole und Logos inline ein, um HTTP-Anfragen auf performancekritischen Seiten zu eliminieren. E-Mail-Designer integrieren Bilder, die bei Clients überleben, die externes Hosting blockieren. Frontend-Ingenieure integrieren Assets in Einzeldatei-Komponenten und JSON-Konfigurationen. Jeder, der PDF- oder DOCX-Generatoren erstellt, die Inline-Bilder erfordern, konvertiert zuerst hier. Die Größen-Overhead-Anzeige hält die Entscheidungen ehrlich: Die Kodierung vergrößert Dateien um etwa 33 %, sodass sie die Wahl zwischen Inline- und Datei-Option pro Bild leitet.
(1) Laden Sie ein Bild hoch oder legen Sie es ab — JPG, PNG, WebP, GIF oder SVG. (2) Das Tool liest die Binärdatei, kodiert sie in Base64 und stellt die data URL mit dem korrekten MIME-Typ zusammen. (3) Lesen Sie das Ausgabepanel: data URL, rohe Base64, Byte-Anzahl für Original und kodierte Version sowie den Inflationsprozentsatz. (4) Kopieren Sie als data URL, als CSS-Hintergrundsyntax oder als <img> Tag, oder laden Sie den Text herunter. Alles wird lokal kodiert — das Bild wird nie hochgeladen, was der Punkt für unveröffentlichte Assets ist.
Inline-Einbettung gewinnt für kleine, render-blockierende kritische Assets: Symbole, Logos und Platzhalter unter etwa 5–10 KB, wobei das Eliminieren eines Netzwerk-Roundtrips mehr zählt als die eingesparten Bytes. Es ist auch die einzige Option, wenn ein Dokument wirklich eine Einzeldatei sein muss — standalone HTML-Berichte, E-Mail-Vorlagen für Clients, die Remote-Bilder blockieren, und eingebettete JSON-Nutzlasten. Die Kosten sind real über die 33-prozentige Größeninflation hinaus: Base64-Bilder können nicht separat zwischengespeichert werden, sodass jede Seitenladung sie erneut mit sich bringt; sie können nicht lazy geladen werden; und große inline-Zeichenketten blähen CSS und HTML auf eine Weise auf, die das Parsen verlangsamt. Die moderne Best Practice stützt sich auf HTTP/2-Multiplexing und CDNs und greift nur zu Inline-Einbettung für die kritischen wenigen Bilder. SVG erhält einen Sonderfall — als Vektortext ist es üblicherweise besser als rohes SVG-Markup anstelle von Base64 inline eingebettet, um es gestaltbar und scriptbar zu halten.
Base64-Einbettung glänzt für kleine Symbole, Logos und dekorative Bilder, bei denen eine zusätzliche HTTP-Anfrage mehr kostet als die Größen-Overhead: Einzeldatei-HTML-E-Mails, selbstständige Demos und CSS-Hintergrundbilder. Bei großen Fotos oder allem, was über viele Seiten hinweg wiederverwendet wird, ist eine normale Datei mit Browser-Zwischenspeicherung fast immer die bessere Wahl.
Ungefähr 33 % größer — Base64 kodiert jedes 3-Byte-Binärdaten als 4 Textzeichen. Ein 100 KB PNG wird zu etwa einer 133 KB Zeichenkette. Dieser Overhead ist der Hauptgrund, warum Einbettung für kleine Assets reserviert ist; bei einem 1 MB Foto verschwendet es Bandbreite und bläht Ihr HTML auf.
Die Ausgabe ist eine data URL — 'data:image/png;base64,...' — ein komplettes Bild in einer Zeichenkette verpackt. Sie können sie direkt in ein <img src>, eine CSS url(), einen favicon-Link oder eine JSON-Nutzlast einfügen. Browser dekodieren sie vor Ort, ohne Netzwerkanfrage.
Nein. Die Datei wird lokal mit dem FileReader API des Browsers gelesen und im Speicher kodiert. Verlässt nichts Ihr Gerät, was das Tool für interne Assets, Screenshots unter NDA oder jedes Bild geeignet macht, das Sie nicht an einen Drittanbieterdienst hochladen würden.
Base64 Data URLs betten Bilddaten direkt in HTML, CSS oder JSON als Text ein — keine separate HTTP-Anfrage nötig. Dies reduziert Server-Roundtrips für kleine Bilder (Symbole, Logos), ermöglicht selbstständige HTML-E-Mails und vereinfacht API-Nutzlasten. Base64-Kodierung erhöht jedoch die Dateigröße um ~33 %, verwenden Sie sie daher nur für Bilder unter 50 KB.
JPG, PNG, WebP, GIF und SVG. Das Tool gibt eine vollständige Data URL-Zeichenkette aus (data:image/png;base64,...), die Sie direkt in HTML <img> src-Attribute, CSS background-image-Eigenschaften oder JSON-API-Felder einfügen können. Sie können die kodierte Zeichenkette auch als Textdatei herunterladen.
Base64 Data URLs embed image data directly in HTML, CSS, or JSON as text—no separate HTTP request needed. This reduces server round-trips for small images (icons, logos), enables self-contained HTML emails, and simplifies API payloads. However, Base64 encoding increases file size by ~33%, so use it only for images under 50KB.
JPG, PNG, WebP, GIF, and SVG. The tool outputs a complete Data URL string (data:image/png;base64,...) that you can paste directly into HTML <img> src attributes, CSS background-image properties, or JSON API fields. You can also download the encoded string as a text file.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.