Bilder in Base64 umwandeln - sofort, privat, kopierbereit.
Verwandeln Sie JPG-, PNG-, WebP-, GIF- und SVG-Dateien in Base64 Data-URIs, rohe Base64-Strings oder einbettbare HTML-img-Tags. Mehrere Dateien gleichzeitig konvertieren, mit einem Klick in die Zwischenablage kopieren. Kein Upload, kein Server, laeuft in Ihrem Browser.
Drop your images here
or browse files or paste from clipboard
So konvertieren Sie Bilder online in Base64.
Bilder hochladen
Ziehen Sie JPG-, PNG-, WebP-, GIF- oder SVG-Dateien auf den Upload-Bereich. Waehlen Sie mehrere Dateien fuer die Stapelkonvertierung. Auf Mobilgeraeten tippen Sie zum Durchsuchen Ihrer Fotobibliothek. Sie koennen auch einen Screenshot aus der Zwischenablage mit Strg+V (Cmd+V auf Mac) einfuegen.
Format waehlen
Jedes Bild zeigt drei Ausgabe-Tabs. Data-URI liefert den vollstaendigen data:image/...-String fuer CSS und HTML. Reines Base64 liefert den kodierten String ohne Praefix fuer API-Payloads. HTML-Tag liefert ein fertiges img-Element mit Breiten- und Hoehenattributen zum direkten Einfuegen.
In Zwischenablage kopieren
Klicken Sie auf die Kopieren-Schaltflaeche unter einer beliebigen Ausgabe, um den vollstaendigen String in Ihre Zwischenablage zu kopieren. Die Schaltflaeche zeigt eine kurze "Kopiert!"- Bestaetigung. Fuegen Sie direkt in Ihre CSS-Datei, HTML-Vorlage, API-Anfrage oder E-Mail-Markup ein.
Wer Base64-Bilder verwendet und warum.
CSS-Hintergrundbilder unter 10 KB
Kleine Icons, Ladeanimationen und dekorative Punkte direkt in CSS eingebettet mit background-image: url(data:image/png;base64,...). Ein 2 KB-Spinner als Base64 fuegt 2,7 KB zu Ihrem Stylesheet hinzu, eliminiert aber einen HTTP-Request. Fuer Websites mit 8-12 kleinen Assets spart das Einbetten 8-12 Roundtrips und reduziert die Zeit bis zum ersten Rendern um 200-400 ms bei 3G-Verbindungen. Webpack und Vite machen das automatisch fuer Importe unter ihrem Groessenlimit (Standard 4 KB in Vite).
HTML-E-Mail-Vorlagen
Gmail, Outlook und Apple Mail blockieren externe Bilder standardmaessig, bis der Benutzer auf "Bilder anzeigen" klickt. Base64-eingebettete Bilder werden sofort ohne diese Aufforderung gerendert. Logos, Social-Icons und Trennliniengrafiken unter 20 KB funktionieren gut inline. Halten Sie die gesamte E-Mail-HTML unter 102 KB, um Gmail-Clipping zu vermeiden. Mailchimp, SendGrid und Amazon SES unterstuetzen alle Base64-Inline-Bilder in ihren HTML-E-Mail-APIs.
Einzelne HTML-Dateien
Das Einbetten aller Bilder als Base64 erstellt eine in sich geschlossene HTML-Datei ohne externe Abhaengigkeiten. Nuetzlich fuer Offline-Dokumentation, portable Berichte und HTML-Exporte aus Tools wie Jupyter-Notebooks oder Google Docs. Eine 500 KB HTML-Datei mit 10 eingebetteten Vorschaubildern laedt von der Festplatte ohne Server. Der Kompromiss ist die Dateigroesse - dieselbe Seite mit externen Bildern und HTTP/2-Multiplexing laedt schneller ueber ein Netzwerk.
API-Payloads und JSON-Felder
REST- und GraphQL-APIs, die Bilddaten in JSON-Body-Feldern akzeptieren, benoetigen Base64, weil JSON keine rohen Binaerdaten enthalten kann. OpenAIs Vision API, Anthropics Messages API, Twilio MMS und Stripe-Identitaetsverifizierung akzeptieren alle Base64-kodierte Bilder. Das rohe Base64-Format (ohne Data-URI-Praefix) ist das, was die meisten APIs erwarten. Typisches Payload-Limit ist 20 MB kodiert, was etwa 15 MB Originalbilddaten entspricht.
Base64 vs externe Dateien - wann was verwenden.
Die Entscheidung haengt von Dateigroesse und Kontext ab. Base64 fuegt 33% Overhead zu jedem Bild hinzu. Ein 10 KB-Icon wird zu 13,3 KB Text. Fuer ein einzelnes kleines Asset ist dieser Overhead geringer als die Kosten eines HTTP-Requests (der 100-300 ms Latenz auf mobilen Netzwerken hinzufuegt). Fuer groessere Bilder kehrt sich die Rechnung um - ein 100 KB-Foto wird zu 133 KB nicht-cachebarem Text, der in Ihrem HTML oder CSS eingebettet ist.
Unter 10 KB - Base64 verwenden
Favicons, 1x1-Tracking-Pixel, kleine UI-Icons, Ladeanimationen und einfache Logos. Der Base64-Overhead (3,3 KB bei einer 10 KB-Datei) ist kleiner als die TCP+TLS-Handshake-Kosten eines separaten HTTP-Requests. Vite bettet Importe unter 4 KB standardmaessig ein. Webpacks url-loader verwendet eine 8 KB-Schwelle. Beide existieren, weil die Performance-Rechnung bei dieser Groessenordnung fuer das Einbetten spricht.
Ueber 10 KB - externe Dateien verwenden
Fotos, Illustrationen, Hero-Bilder und alles, was vom Browser-Caching profitiert. Ein 50 KB externes PNG wird nach dem ersten Seitenaufruf gecacht und kostet bei nachfolgenden Besuchen null Bytes. Dasselbe Bild als Base64 eingebettet fuegt 66,7 KB bei jedem einzelnen Seitenaufruf hinzu, weil Inline-Daten nicht unabhaengig gecacht werden koennen. Wenn Sie Bilder skalieren muessen, bevor Sie sie bereitstellen, tun Sie das zuerst, um die Dateigroesse unter Ihren Schwellenwert zu bringen.
E-Mail-Vorlagen - immer Base64
E-Mail-Clients (Gmail, Outlook, Yahoo Mail, Apple Mail) blockieren externe Bildladungen standardmaessig. Der Benutzer sieht ein defektes Bildsymbol, bis er auf "Bilder anzeigen" klickt. Base64-eingebettete Bilder umgehen dies komplett und werden beim Oeffnen gerendert. Der 33% Groessen-Overhead lohnt sich, weil E-Mail keinen Caching-Mechanismus hat - jedes Oeffnen laedt das vollstaendige HTML erneut herunter. Halten Sie einzelne Bilder unter 20 KB und die gesamte E-Mail-Groesse unter 102 KB (Gmails Clipping-Schwellenwert).
Kombination mit anderen Tools
Fuer beste Ergebnisse optimieren Sie Ihre Bilder vor der Kodierung. Verwenden Sie den JPG-Kompressor, um die Dateigroesse vor der Base64-Konvertierung zu reduzieren. Wenn Sie zuerst zwischen Formaten konvertieren muessen, erledigt das der JPG-zu-PNG-Konverter. Um mehrere Bilder vor der Kodierung zu einem zusammenzufuegen, verwenden Sie den JPG Joiner.
Bilder zusammenfuegen?
Kombinieren Sie mehrere Fotos zu einem Bild mit vertikalen, horizontalen oder Rasterlayouts.
JPG JoinerJPG in PNG umwandeln?
Konvertieren Sie JPEG- und WebP-Bilder in verlustfreies PNG mit Transparenz-Unterstuetzung.
JPG zu PNGBilder skalieren?
Skalieren Sie JPG, PNG oder WebP auf exakte Pixelmasse oder prozentual.
Bild skalierenJPG komprimieren?
Reduzieren Sie die JPG-Dateigroesse vor der Base64-Konvertierung fuer kleinere Ausgabe.
JPG komprimierenBilder in PDF umwandeln?
Verwandeln Sie JPG- oder PNG-Dateien in ein mehrseitiges PDF-Dokument zum Teilen oder Drucken.
JPG zu PDFVerlustfreie PNG-Zusammenfuehrung?
PNG-Dateien ohne Qualitaetsverlust zusammenfuegen. Transparenz und scharfe Kanten bleiben erhalten.
PNG zusammenfuegenHaeufig gestellte Fragen.
Was ist Base64-Kodierung?
Base64 ist eine Binaer-zu-Text-Kodierung, die Binaerdaten mit 64 ASCII-Zeichen darstellt (A-Z, a-z, 0-9, +, /). Sie konvertiert alle 3 Bytes Binaerdaten in 4 ASCII-Zeichen. Ein 3 KB-Icon wird zu einem 4 KB-Textstring. Die Kodierung existiert, weil viele Systeme - E-Mail (SMTP), JSON-APIs, CSS url()-Werte, HTML-Attribute - nur Text akzeptieren, keine rohen Binaerdaten. Base64 ueberbrueckt diese Luecke, indem es jede Datei in eine sichere Textdarstellung umwandelt.
Wann sollte ich Base64-Bilder statt externer Dateien verwenden?
Verwenden Sie Base64 fuer Bilder unter 10 KB - Favicons, kleine Icons, einfache Logos, 1x1-Tracking-Pixel und kleine UI-Elemente. Bei dieser Groesse kostet der HTTP-Request-Overhead (DNS-Lookup, TCP-Handshake, TLS-Aushandlung) mehr als die 33% Groessenzunahme durch Base64. Fuer Bilder ueber 10 KB sind externe Dateien besser, weil Browser sie unabhaengig cachen, parallel laden und das Aufblaehen Ihres CSS oder HTML vermeiden koennen. HTML-E-Mail-Vorlagen sind die Ausnahme - immer mit Base64 einbetten, weil E-Mail-Clients externe Bildladungen standardmaessig blockieren.
Wie viel groesser ist ein Base64-String im Vergleich zur Originaldatei?
Base64 erhoeht die Dateigroesse um exakt 33% (4/3-Verhaeltnis) plus einige Bytes Padding. Ein 9 KB PNG wird zu einem 12 KB Base64-String. Ein 30 KB JPG wird zu 40 KB Text. Dieser Overhead addiert sich, wenn der Base64-String in einer CSS- oder HTML-Datei sitzt, die auch gzip-komprimiert fuer die Uebertragung wird - gzip gewinnt einen Teil des Aufblaehs zurueck (typischerweise 10-15%), aber die dekodierte Groesse im Browser-DOM ist immer noch die vollen 33% groesser. Fuer eine Data-URI kommen weitere 20-30 Bytes fuer das data:image/png;base64,-Praefix hinzu.
Was ist der Unterschied zwischen einer Data-URI und reinem Base64?
Eine Data-URI enthaelt einen Header, der dem Browser sagt, wie die Daten zu interpretieren sind: data:image/png;base64,iVBORw0KGgo... Der Header gibt den MIME-Typ (image/png) und die Kodierung (base64) an. Reines Base64 ist nur der kodierte String ohne Header: iVBORw0KGgo... Verwenden Sie Data-URIs in CSS background-image url()-Werten und HTML src-Attributen. Verwenden Sie reines Base64, wenn Sie Bilddaten an APIs senden, die den Payload ohne Data-URI-Praefix erwarten, oder wenn Sie in Datenbanken speichern, wo der MIME-Typ separat verfolgt wird.
Welche maximale Bildgroesse sollte ich mit Base64 kodieren?
Halten Sie Base64-Bilder unter 10 KB (urspruengliche Dateigroesse) fuer CSS-Einbettung. Google Lighthouse kennzeichnet render-blockierendes CSS, und ein 100 KB Base64-Bild in Ihrem Stylesheet fuegt 133 KB unkomprimierten Text zu jedem Seitenladevorgang hinzu. Fuer Inline-HTML-img-Tags sind 20-30 KB ein vernuenftiges Oberlimit - darueber wird das HTML-Dokument zu schwer fuer einen schnellen First Contentful Paint. E-Mail-Vorlagen koennen hoeher gehen (bis zu 100 KB pro Bild), weil es keine Alternative zu externen Dateien gibt, aber halten Sie die gesamte E-Mail-Groesse unter 102 KB, um Gmail-Clipping zu vermeiden.
Unterstuetzen alle Browser Base64 Data-URIs?
Jeder moderne Browser unterstuetzt Data-URIs - Chrome, Firefox, Safari, Edge und alle mobilen Browser ab 2012. Internet Explorer 8 hat teilweise Unterstuetzung mit einem 32 KB-Limit pro Data-URI hinzugefuegt. IE 9+ hat dieses Limit aufgehoben. Die einzige praktische Einschraenkung heute ist, dass einige Content Security Policy (CSP)-Konfigurationen data:-URIs standardmaessig blockieren. Wenn Ihre Website eine strikte CSP verwendet, fuegen Sie data: zur img-src-Direktive hinzu, um Inline-Base64-Bilder zu erlauben.
Ist dieses Tool sicher? Werden meine Bilder hochgeladen?
Keine Bilder verlassen Ihr Geraet. Die Konvertierung verwendet die FileReader API des Browsers, um die Datei lokal zu lesen und den Base64-String vollstaendig in JavaScript auszugeben. Oeffnen Sie die Entwicklertools Ihres Browsers (F12), wechseln Sie zum Netzwerk-Tab und konvertieren Sie ein Bild - Sie werden keine ausgehenden Anfragen sehen. Das Tool laeuft auf statischem HTML und JavaScript ohne Server-Backend. Schliessen Sie den Tab und alle Daten werden aus dem Speicher geloescht.
Kann ich SVG-Dateien mit Base64 kodieren?
Ja, aber SVG ist bereits textbasiertes XML, sodass Base64-Kodierung eines SVGs oft unnoetig ist. Eine rohe SVG Data-URI (data:image/svg+xml,...) ohne Base64 ist typischerweise 20-30% kleiner, weil Sie den 33% Kodierungs-Overhead ueberspringen. Dieses Tool bietet die Base64-Version fuer Kompatibilitaet mit Systemen, die Base64 erfordern, aber fuer CSS-Hintergrundbilder sollten Sie die rohe SVG in einer url() mit Prozent-Kodierung verwenden. Die Base64-Version funktioniert ueberall, waehrend die unkodierte Version in einigen aelteren E-Mail-Clients fehlschlaegt.