Bild zu Base64
Wandeln Sie PNG-, JPG-, WebP- oder GIF-Bilder in eine Base64-Data-URI, einen Base64-String, ein HTML-img-Tag oder einen CSS-Hintergrund um. Ideal, um kleine
Ziehen Sie Ihre Bild-Datei hierher
oder klicken zum Auswählen
Verwandeln Sie ein PNG, JPG, WebP, GIF oder SVG in Base64 und erhalten Sie es in der Form, die Sie tatsächlich brauchen: eine vollständige Data-URI, eine reine Base64-Zeichenkette, ein HTML-<img>-Tag oder eine CSS-Hintergrunddeklaration – bereit zum Einfügen.
Kleine Grafiken direkt im Code einzubetten spart eine Netzwerkanfrage und garantiert, dass das Icon auch erscheint, bevor das Stylesheet geladen ist – deshalb sind Data-URIs für Icons, Ladeanimationen und E-Mail-Signaturen beliebt. Der Preis ist die Größe: Base64 ist etwa ein Drittel größer als die Binärdatei und lässt sich nicht separat zwischenspeichern, halten Sie sich also an kleine Assets und verlinken Sie größere Bilder normal.
So konvertieren Sie ein Bild zu Base64
Wählen Sie ein Bild
Wählen Sie das benötigte Ausgabeformat
Kopieren Sie die Data-URI, das Tag oder das CSS
Häufige Fragen
Wann sollte ich ein Bild einbetten statt zu verlinken?
Bei kleinen, häufig verwendeten Grafiken unter etwa 10 KB – Icons, Logos, Ladeanimationen –, bei denen die eingesparte Anfrage wichtiger ist als der Größenzuwachs. Große Fotos sollten Dateien bleiben, damit der Browser sie zwischenspeichern kann.
Warum ist die Base64-Zeichenkette größer als meine Datei?
Base64 kodiert alle drei Byte als vier Zeichen, was etwa 33 % hinzufügt. Dieser Aufschlag ist in der Kodierung selbst unvermeidbar.
Welche Formate kann ich verwenden?
PNG, JPG, WebP, GIF und SVG. Ein als Data-URI eingebettetes Vektor-SVG bleibt skalierbar und ist für Icons daher oft die beste Wahl.
Funktioniert es in CSS ebenso wie in HTML?
Ja, kopieren Sie die CSS-Form für eine background-image-Deklaration oder die HTML-Form für ein img-src-Attribut.
Zeigen E-Mail-Programme es an?
Die meisten modernen Programme tun das, einige entfernen Data-URIs jedoch aus Sicherheitsgründen. Hosten und verlinken Sie das Bild für E-Mail-Vorlagen, wenn das Layout wichtig ist.
Wird mein Bild hochgeladen?
Nein, die Kodierung findet in Ihrem Browser statt.
Auf einen Blick
| Eingabe | Bild |
|---|---|
| Mehrere Dateien | Ja |
| Läuft wo | In Ihrem Browser – Dateien werden nie hochgeladen |
| Funktioniert offline | Ja — sobald die Seite geladen ist |
| Preis | Kostenlos, keine Anmeldung, kein Wasserzeichen |
Wo Konvertierungen stillschweigend kaputtgehen
Die meisten Konvertierungsfehler drehen sich nicht um Syntax, sondern um Bedeutung. Eine CSV-Spalte mit Postleitzahlen verliert ihre führenden Nullen in dem Moment, in dem eine Tabellenkalkulation sie für eine Zahl hält; eine lange ID überschreitet die Gleitkommapräzision; Datumsangaben ändern ihre Bedeutung, je nachdem, ob der Tag oder der Monat zuerst kommt. JSON-Schlüssel sind ungeordnet, Arrays aber nicht, und ein Werkzeug, das Schlüssel sortiert, ändert nichts, während eines, das Arrays sortiert, die Daten verändert. Unicode ist eine weitere Falle: Text kann als UTF-8, als UTF-16 oder mit BOM ankommen, und ein Decoder, der falsch rät, macht aus akzentuierten Zeichen Mojibake. Bevor Sie einer Konvertierung trauen, prüfen Sie stichprobenartig die erste und letzte Zeile, jedes Feld mit führenden Nullen und jedes Feld mit Anführungszeichen, Kommas oder Zeilenumbrüchen.
Ein Datenformat auswählen
JSON ist die Voreinstellung für alles, was eine API zurückgibt oder ein Programm liest: Es verarbeitet verschachtelte Strukturen, Zahlen, Booleans und null auf natürliche Weise, und jede Sprache kann es parsen. CSV ist kleiner und öffnet sich direkt in einer Tabellenkalkulation, kann aber keine Verschachtelung ausdrücken und hat keinen gemeinsamen Standard für Trennzeichen, Anführungszeichen oder Zeichensatz – genau dort gehen Konvertierungen schief. XML ist ausführlich, trägt aber Attribute, gemischte Inhalte und Schemata, weshalb es Dokumentformate und Altsysteme weiterhin dominiert. YAML ist für Konfigurationen am besten lesbar, reagiert aber empfindlich auf Leerraum und hat überraschende Typumwandlungen („no“ wird zu false, eine Version wie 1.10 wird zu 1.1). Wählen Sie das Format, das das verarbeitende Werkzeug bevorzugt, nicht das, das am schönsten aussieht.