Bild zu Base64
Base64 kodiert binäre Bildbytes als ASCII-Text, den Sie in HTML img src, CSS url() oder JSON-Nutzlasten einfügen können. Nützlich für kleine Symbole, Daten-URIs in Prototypen und APIs, die Inline-Bilder erwarten. Die Kodierung erfolgt lokal — es wird nichts hochgeladen.
So kodieren Sie ein Bild in Base64
1. Lade die Bilddatei hoch (halten Sie sie klein — unter ~100 KB ist praktisch).
2. Kopiere die generierte Base64-Zeichenfolge oder die vollständige Daten-URL.
3. Fügen Sie es in dein HTML, CSS oder deine Konfiguration ein.
4. Testen Sie in der Zielumgebung — einige E-Mail-Clients beschränken Daten-URIs.
Kodierungsbeispiele
Inline-Logo in HTML-E-Mail
Ein 2-KB-PNG-Logo als data:image/png;base64,... vermeidet das Blockieren externer Bilder in strengen Unternehmensposteingängen.
CSS-Hintergrund für Prototyp
Fügen Sie eine Base64-Textur in eine Einzeldatei-Demo ein, ohne Asset-Hosting.
API-Testvorrichtung
Fügen Sie ein kleines Base64-JPEG in einen JSON-Anfragetext ein, um Endpunkttests für das Hochladen von Bildern durchzuführen.
Wenn Base64-Bilder helfen
• Für sehr kleine Assets, bei denen eine HTTP-Anfrage mehr kostet als der Inline-Größenaufwand.
• Für Offline-HTML-Prototypen mit einer einzelnen Datei.
• Wenn externes Hosting in gesperrten Umgebungen nicht verfügbar ist.
Wann Sie Base64-Bilder vermeiden sollten
• Bei großen Fotos wächst Base64 um ca. 33 % und bläht den HTML-Cache auf.
• Wenn CDN-Caching und Responsive Srcset verfügbar sind.
• Wenn viele E-Mail-Clients Daten-URIs blockieren, verwenden Sie stattdessen gehostete Bilder.
Base64 in Leistungsbudgets
Durch Inlining werden Roundtrips vermieden, das separate Browser-Caching des Bildes wird jedoch verhindert. Bei kritischen kleinen Symbolen über dem Falz sparsam verwenden; Große Medien normal laden.
Eigenheiten des E-Mail-Clients
Der Outlook-Desktop bietet in der Vergangenheit nur begrenzte Unterstützung für Daten-URIs. Testen Sie Gmail, Apple Mail und Outlook, bevor Sie sich in Kampagnen auf Inline-Bilder verlassen.
Security
Fügen Sie kein nicht vertrauenswürdiges Base64 in Seiten ein, ohne den Inhalt zu verstehen — es handelt sich immer noch um ausführbaren Kontext in HTML. Verschlüsseln Sie nur dein eigenes Vermögen.
Häufige Fragen
Warum ist Base64 größer als die Datei?
Bei der Codierung werden 4 Zeichen pro 3 Byte verwendet — etwa 33 % Overhead plus das Daten-URL-Präfix.
Was ist eine Daten-URL?
Format: data:image/png;base64,iVBORw0KG... — MIME-Typ plus codierte Nutzlast.
Maximale Größe für E-Mail?
Halten Sie das gesamte Nachrichtenwachstum unter 10–20 KB. Viele Kunden ersticken an riesigen Inline-Bildern.
Zurück in die Datei dekodieren?
Nutze bei Bedarf das Base64-Encoder-/Decoder-Tool, um ASCII in Binär umzuwandeln.
Werden Bilder hochgeladen?
Nein — FileReader liest lokal im Browser.
SVG zu Base64?
Möglich für kleinen SVG-Text; Rasterformate sind für Daten-URIs häufiger anzutreffen.