logo
GeekFormat

Bild zu Base64

Bilder hierher ziehen oder zum Auswählen klicken

Unterstützt PNG, JPG, GIF, WebP

Kostenloses Online-Tool zum Codieren von Bildern in Base64, unterstützt PNG/JPG/WebP/GIF/SVG/BMP/AVIF und weitere Formate. Lokale Verarbeitung im Browser per Web Worker, kein Upload, keine blockierende UI. Erstellt Data URLs für CSS-Inlining, HTML-Einbettung, E-Mail-Vorlagen und API-Übertragung.

Ähnliche Tools

Anwendungsfälle

  • CSS Sprites: kleine Icons und Bilder in CSS background einbetten, um HTTP-Requests zu reduzieren und das erste Rendering zu beschleunigen
  • HTML-Bildeinbettung: Logos, Platzhalter und UI-Ressourcen direkt in HTML-img-Tags einbetten und Bildanfragen reduzieren
  • E-Mail-Vorlagen: E-Mail-Clients blockieren externe Bilder standardmäßig; Base64-Inlining sorgt für sofortige Anzeige ohne Nutzerfreigabe
  • API-Übertragung: binäre Bilddaten in Base64-Strings umwandeln und in JSON-Request-Bodies für API-Aufrufe einbetten
  • Frontend-Performance-Optimierung: HTTP-Requests reduzieren, geeignet für kritische Above-the-fold-Ressourcen
  • Browser-Erweiterungen und Single-File-Apps: alle Bilder per Base64 einbetten, wenn externe Ressourcen nicht referenziert werden können

Funktionen

  • Vollständige Formatunterstützung: automatische MIME-Erkennung für PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF und andere gängige Bildformate
  • Web Worker Beschleunigung: Kodierung großer Dateien läuft in einem separaten Thread mit Fortschrittsanzeige in Echtzeit, ohne den Haupt-UI-Thread zu blockieren
  • Lokale Verarbeitung ohne Upload: Bilder werden per ArrayBuffer Zero-Copy direkt an den Worker übertragen, Daten passieren keinen Server
  • Automatische Data-URL-Erstellung: erzeugt den Prefix data:image/xxx;base64, direkt nutzbar in HTML img oder CSS background
  • Bidirektionale Konvertierung: unterstützt Bild zu Base64 und Base64 zu Bild als getrennte Modi
  • Ein-Klick-Kopieren und Download: kopiere reines Base64, komplette Data URL oder HTML-img-Tag, oder lade das Ergebnis als .txt-Datei herunter

Anleitung

  1. Wähle oder ziehe die zu codierende Bilddatei hinein (PNG/JPG/WebP/GIF usw.)
  2. Das Tool konvertiert das Bild automatisch in einem Browser-Web-Worker zu Base64 und zeigt den Fortschritt in Echtzeit
  3. Prüfe das Ergebnis: reiner Base64-String, vollständige Data URL oder HTML-img-Tag, und kopiere das benötigte Format
  4. Füge das Ergebnis in CSS, HTML, JSON-Konfigurationsdateien oder API-Requests ein

Häufig gestellte Fragen

Welche Bildformate werden unterstützt?

Unterstützt PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF und weitere gängige Formate. Das Tool erkennt den MIME-Typ automatisch und erzeugt den passenden Data-URL-Prefix, z. B. data:image/png;base64,...

Wie funktioniert die Web-Worker-Beschleunigung?

Ein Web Worker ist ein vom Hauptthread unabhängiger Browser-Hintergrundthread. Klassische Bildcodierung kann die UI blockieren; dieses Tool führt die Codierung im Worker mit ArrayBuffer-Transfer und Fortschritts-Callbacks aus, sodass die Oberfläche auch bei großen Dateien reaktionsfähig bleibt.

Werden Bilder auf einen Server hochgeladen?

Nein. Die Konvertierung läuft per ArrayBuffer-Zero-Copy direkt im Worker-Thread des Browsers. Bildinhalte passieren keinen Server. Das unterscheidet sich grundlegend von Tools, die „Browserverarbeitung“ versprechen, aber tatsächlich Daten hochladen.

Wie viel größer wird eine Datei durch Base64?

Base64 ergibt ungefähr 133% der ursprünglichen Binärgröße, also etwa 33% mehr. Je 3 Bytes (24 Bit) werden in 4 Base64-Zeichen (je 6 Bit) umgewandelt, bei Bedarf mit = aufgefüllt. Für Inline-Bilder empfiehlt sich eine Größe unter 10KB pro Bild.

Welche Bilder eignen sich für Base64-Inlining?

Empfohlen für kleine Icons und Bilder unter 10KB. Kleine Inline-Bilder reduzieren HTTP-Requests, zu große Bilder vergrößern jedoch HTML/CSS und verschlechtern die Ladeperformance. Große Bilder sollten über separate URLs referenziert werden.

Was ist der Unterschied zwischen Data URL und reinem Base64?

Eine Data URL hat das Format data:image/png;base64, gefolgt vom Base64-Inhalt und kann direkt im src-Attribut eines HTML-img-Tags stehen. Reines Base64 ist nur der codierte String und benötigt einen MIME-Prefix.

Kann ich das Tool für API-Integrationstests verwenden?

Ja. Nach der Konvertierung kann das Bild als Base64-Feldwert in einem JSON-Request-Body an Backend-APIs gesendet werden. Das Tool bietet Ein-Klick-Kopieren und ist mit den meisten API-Dokumentationsbeispielen kompatibel.

Warum Base64-Inlining statt normaler Bildreferenzen?

Base64-Inlining eignet sich für kleine Dateien (<10KB), weil es HTTP-Requests reduziert. Für große Bilder laden separate URLs schneller, da Browser mehrere Ressourcen parallel herunterladen und Caching nutzen können.

Was ist Bild zu Base64?

Bild zu Base64 ist eine Technik, die binäre Bilddaten in ASCII-Textstrings codiert. Base64 verwendet 64 druckbare Zeichen (A-Z, a-z, 0-9, +, /), um Binärdaten darzustellen, wandelt je 3 Bytes in 4 Base64-Zeichen um und ergänzt am Ende = als Padding. Der gesamte Prozess folgt RFC 4648.

**Codierungsprinzip**: Base64 teilt je 3 Bytes (24 Bit) in vier 6-Bit-Gruppen auf, von denen jede einem Zeichen des Base64-Alphabets entspricht. Wenn die Bytezahl nicht durch 3 teilbar ist, werden am Ende 1-2 =-Padding-Zeichen hinzugefügt. Deshalb wächst die Dateigröße um etwa 33% (4/3 ≈ 1.33).

**Web-Worker-Optimierung**: Dieses Tool nutzt Web Workers, um Codierungsaufgaben in einem vom Hauptthread getrennten Browser-Thread auszuführen. ArrayBuffer.transfer() ermöglicht Zero-Copy-Übertragung an den Worker und verhindert Blockierungen. Selbst bei mehreren MB großen Bildern bleibt die UI flüssig und zeigt den Fortschritt in Echtzeit.

**Datenschutz und Sicherheit**: Anders als Tools, die Bilder auf einen Server hochladen müssen, läuft dieses Tool vollständig lokal im Browser. Bilddaten passieren keine Drittserver, was besonders bei sensiblen Bildern wie Ausweisen oder Verträgen wichtig ist.

**Einsatzbereiche**: Base64-Bilder werden häufig für CSS Sprites (weniger HTTP-Requests), HTML-E-Mail-Vorlagen (verhindert Bildblockaden durch Mailclients), API-Übertragung binärer Daten sowie Browser-Erweiterungen oder Single-File-Anwendungen genutzt, wenn externe Ressourcen nicht referenziert werden können.