Bilder für HTML, CSS und E-Mail in Base64 konvertieren
Ob Icon in einem CSS-Stil, Logo in einer E-Mail-Signatur oder Offline-Demo: Bilder als Base64-Data-URLs einzubetten ist eine zuverlässige Technik. Dieser Leitfaden zeigt den Ablauf und die Faustregeln, die Seiten schnell halten.
Das richtige Eingabebild wählen
Beginnen Sie mit der kleinsten sinnvollen Datei: Skalieren Sie auf die genaue Anzeigegröße, nehmen Sie PNG oder WebP für Icons und Logos und JPEG für Fotos. Eine Data-URL erbt die Größe der Quelldatei — eine 2-MB-Quelle bedeutet also rund 2,6 MB String in Ihrem Markup.
In eine Data-URL konvertieren
Das Werkzeug Bild zu Base64 liest die Datei in Ihrem Browser und erzeugt eine bereit zu kopierende Data-URL oder eine rohe Base64-Payload. Rasterbilder erhalten eine sichere Vorschau; SVG wird zum Download angeboten, um Markup-Injektion auszuschließen.
In HTML oder CSS einbetten
In HTML setzen Sie den Wert direkt in ein <img src="data:image/png;base64,...">-Tag. In CSS verwenden Sie ihn in url() für background-image. Der MIME-Typ reist in der URL selbst, sodass der Browser ohne externen Abruf rendert.
E-Mail-Signaturen und Mail-Clients
Signaturen sind der klassische Anwendungsfall: Ein Base64-Logo rendert in den meisten Mail-Clients ohne Anhang. Halten Sie das Quellbild winzig — bei 150 px sieht man keine Bildunterschrift oder Schatten — und denken Sie daran, dass manche Clients externe Bilder blockieren, was Data-URLs umgehen.
Performance und Dateigröße
Der 33%-Base64-Aufschlag plus die Präsenz des Strings in Ihrem Dokument bedeutet: Data-URLs lohnen nur für wenige kleine Elemente. Für alles Große oder über Seiten Geteilte hosten Sie das Bild als Datei und lassen den Browser es cachen.
Bewusst privat
Die gesamte Konvertierung findet in Ihrem Browser statt, daher verlässt das Bild Ihr Gerät erst, wenn Sie entscheiden, wo Sie den erzeugten String einfügen. Kein Upload, kein Wasserzeichen, kein Konto.