Bild-zu-Base64-Encoder
Beliebige Bilder sofort in Base64-Daten-URLs umwandeln – einfach kopieren und in CSS, HTML oder Code einfügen. Kein Hochladen erforderlich.
Wann man Base64-kodierte Bilder verwendet
CSS & Styling
- Kleine Icons in CSS als Hintergrundbild-Daten-URLs einbetten
- Inline-Ladeanzeige oder Platzhalterbilder in Stylesheets
- Fügen Sie Logos zu reinen CSS-E-Mail-Vorlagen hinzu, ohne externes Hosting.
- UI-Elementbilder in Stylesheets der Komponentenbibliothek einbetten
HTML & E-Mail
- Bilder direkt in HTML einbetten<img src> als Daten-URLs
- Fügen Sie Firmenlogos in eigenständige HTML-E-Mail-Vorlagen ein.
- Erstellen Sie HTML-Dokumente in einer einzigen Datei mit eingebetteten Bildern
- Signaturbilder in Gmail- und Outlook-HTML-Signaturen einbetten
APIs & Code
- Bilder für JSON-API-Payloads kodieren, die Base64-Eingaben erwarten
- Bilder für KI/ML-API-Anfragen vorbereiten (OpenAI Vision, Claude, Gemini)
- Bilder für die Speicherung in Base64-kodierten Datenbankfeldern konvertieren
- Bilder für die Canvas-Zeichenfunktion `drawImage` aus einer Daten-URL in JavaScript kodieren
So konvertieren Sie ein Bild in Base64 – 3 Schritte
- 1
Laden Sie Ihr Bild hoch
Ziehen Sie ein beliebiges Bild im JPG-, PNG-, WebP-, SVG- oder GIF-Format in den Encoder. Ihre Datei wird lokal gelesen – es wird nichts hochgeladen.
- 2
Kopieren Sie die Base64-Ausgabe
Das Tool zeigt sowohl die vollständige Daten-URL (data:image/…;base64,…) als auch die rohe Base64-Zeichenkette separat an. Klicken Sie auf „Kopieren“, um das jeweilige Format in die Zwischenablage zu Kopie .
- 3
In Ihrem Code verwenden
Fügen Sie die Daten-URL in HTML ein.<img src> , CSS background-image, oder verwenden Sie die rohe Base64-Zeichenkette für API-Payloads und JSON-Daten.
Kostenloser Online-Bild-zu-Base64-Encoder – kein Server-Upload erforderlich
Die Base64-Kodierung wandelt binäre Bilddaten in eine ASCII-Zeichenkette um, die direkt in Code, CSS, HTML oder API-Payloads eingebettet werden kann, ohne dass eine externe URL erforderlich ist. Der Base64-Encoder von PicsSizer liest Ihre Bilddatei mithilfe der FileReader-API Ihres Browsers und gibt sowohl die vollständige Daten-URL als auch die rohe Base64-Zeichenkette aus – ein Server-Upload ist nicht nötig. Die kodierte Zeichenkette kann direkt in CSS-Hintergrundbilder oder HTML eingefügt werden.<img src> , JSON-API-Bodies oder überall dort, wo eine Daten-URL oder ein Base64-Bild erwartet wird.
Wann verwendet man Inline-Base64-Bilder anstelle von externen URLs?
Base64-Kodierung eignet sich am besten für kleine, statische Elemente wie Icons, SVG-Illustrationen, E-Mail-Logos und Platzhalterbilder. Die Base64-Darstellung ist etwa 33 % größer als die Binärdatei. Daher erhöhen große Bilder, die als Daten-URLs eingebettet werden, die Dateigröße von HTML- oder CSS-Dateien erheblich. Bei Bildern über 10 KB ist externes Hosting mit einem CDN fast immer schneller und effizienter. Bei Bildern unter 5 KB – insbesondere Icons, Logos und dekorativen SVGs – entfällt durch die Base64-Einbettung eine HTTP-Anfrage vollständig, was die Performance für wichtige Elemente im sichtbaren Bereich verbessern kann. KI/ML-APIs (OpenAI, Anthropic, Google), die Bildeingaben akzeptieren, verwenden Base64 in ihren JSON-Anfragetexten. Daher ist die Base64-Kodierung für die Integration von Bildverarbeitungsmodellen unerlässlich.
Tipps zur Verwendung von Base64-kodierten Bildern im Code
Für CSS-Hintergrundbilder: Schließen Sie die Daten-URL in url() ein – `background-image: url('data:image/png;base64,…')`. Für HTML: Fügen Sie sie direkt als src-Attribut ein – `<img src="data:image/jpeg;base64,…"> Für HTML-E-Mails: Die meisten E-Mail-Clients unterstützen Daten-URLs für kleine Bilder. Testen Sie dies vor der Bereitstellung in Gmail, Outlook und Apple Mail. Für JSON-API-Payloads: Verwenden Sie die rohe Base64-Zeichenkette (ohne das Präfix „data:…;base64“), falls die API ein separates Feld für „mediaType“ oder „mimeType“ angibt. Das Tool gibt beide Formate aus – die vollständige Daten-URL und die rohe Base64-Zeichenkette –, sodass Sie die für Ihre Integration benötigte Version Kopie können.
Verwandte Entwicklertools
Mehr Tools für Entwickler, die mit Bildern im Code arbeiten.
Base64 zu Bild
Dekodiert einen Base64-String oder eine Daten-URL zurück in ein herunterladbares Bild.
Bildkonverter
Konvertierung zwischen JPG, PNG, WebP, SVG und über 20 weiteren Formaten vor der Kodierung.
Bildmetadaten-Viewer
Prüfen Sie die in den Bilddateien eingebetteten EXIF-, IPTC- und XMP-Metadaten.
Bildkompressor
Reduzieren Sie die Größe der Bilddateien vor der Base64-Codierung, um die Zeichenkettenlänge zu minimieren.
Bild zu Base64 – FAQ
Häufig gestellte Fragen zur Konvertierung von Bildern in Base64-Daten-URLs