Was ist Bild-zu-Base64-Encoder?

Image to Base64 Encoder wandelt Bilddateien (PNG, JPEG, GIF, SVG, WebP) in Base64-kodierte Textzeichenketten um. Betten Sie Bilder direkt in HTML, CSS oder JSON ein, ohne separate Dateien zu hosten — weniger HTTP-Anfragen und einfacheres Markup.

Der Encoder liest die Bildbytes auf deinem Gerät und erzeugt acht Ausgaben: reines Base64, ein data-URI für src=-Attribute, ein vollständiges <img>-Tag, eine CSS-background-image-Deklaration, einen HTML-Favicon-Link, einen XML-Wrapper, ein JavaScript-Image-Snippet und ein JSON-Objekt mit Dateiname, MIME-Typ, Größe und data-URI. Schalte Optimieren ein, um die längste Seite zu verkleinern und zuerst als JPEG oder WebP neu zu kodieren – das kann die Zeichenkette vor dem Einbetten halbieren. Lege oder füge mehrere Bilder auf einmal ein, jedes erhält seine eigene beschriftete Ausgabe. Andersherum nötig? Der Bereich Base64 zurück in Bild umwandeln macht aus jeder Zeichenkette ein sichtbares, herunterladbares Bild. Unterstützte Formate: PNG, JPEG, GIF, SVG, WebP, BMP, ICO, AVIF und HEIC bis zu je 20 MB.

Anleitung

1. Schritt 1 — Lade ein Bild per Drag-and-drop, Klick auf den Upload-Bereich oder Einfügen mit Strg+V hoch. Um es vorher zu verkleinern, öffne Kodieroptionen und lege eine Maximalgröße oder Qualität fest.
2. Schritt 2 — Wähle ein Ausgabeformat: reines Base64, data-URI, HTML-img-Tag, CSS-background-image, HTML-Favicon-Link, XML, ein JavaScript-Image-Snippet oder ein JSON-Objekt für API-Payloads.
3. Schritt 3 — Kopieren Sie das Ergebnis in die Zwischenablage oder laden Sie es als Textdatei herunter.

Wann verwenden

• Kleine Logos oder Icons in HTML-Mails einbetten, damit sie ohne externes Hosting angezeigt werden.
• Kleine SVG-Sprites direkt ins Stylesheet inlinen und einen rendernden HTTP-Request einsparen.
• Ein Bild innerhalb eines JSON-Payloads, JWT-Claims oder YAML-Configs mitführen, wenn keine URL erlaubt ist.

Ergebnis

Sie haben ein 2-KB-Logo-Symbol, das Sie direkt in eine E-Mail-Vorlage einbetten möchten. Laden Sie die PNG-Datei hoch, kopieren Sie die Daten-URI-Ausgabe und fügen Sie sie in das src-Attribut Ihres HTML-img-Tags ein – kein externer Hosting-Dienst erforderlich.

Häufige Fragen

Wird meine Bilddatei durch Base64 grösser?

Ja, um etwa 33%. Base64 stellt drei Binärbytes mit vier ASCII-Zeichen dar, also wird aus einer 30-KB-PNG ungefähr 40 KB Text. Lohnt nur bei Dateien unter 5 KB, wo der gesparte HTTP-Request den Mehrumfang ausgleicht.

Wann inlinen mit Base64 und wann lieber verlinken?

Alles unter 4 bis 5 KB, das above the fold erscheint und schwer cacheable ist (nutzerspezifische Avatare, einmal verwendete Icons), inlinen. Alles, was über mehrere Seiten wiederverwendet wird, verlinken, damit der Browser-Cache beim zweiten Mal greift.

Warum beginnt meine Data-URI mit data:image/png;base64,?

Das Präfix ist der Medientyp. data:image/png sagt dem Browser, dass die folgenden Bytes ein PNG sind, base64 nennt die Kodierung und das Komma trennt Header von Inhalt. Ohne dieses Stück kann der Decoder das Format nicht erkennen.

Kann man Base64 wieder in ein sichtbares Bild zurückwandeln?

Ja. Öffnen Sie auf dieser Seite den Bereich „Base64 zurück in ein Bild decodieren“, fügen Sie Ihre Daten-URI oder das rohe Base64 ein, und das Bild erscheint zur Vorschau und zum Download. URL-sicheres Base64 (die Variante mit - und _) funktioniert ebenfalls.

Lohnt sich Base64 für SVG-Dateien?

Meistens nicht. SVG ist schon Text, daher bleibt URL-Encoding in der Data-URI kleiner als Base64. Das Tool unterstützt SVG trotzdem für Fälle, in denen man eine transportable Einzelkette braucht.

Ähnliche Tools