Bild in Base64 (Data-URI) umwandeln

Importieren Sie ein Bild und erhalten Sie direkt eine Zeichenkette data:image/...;base64,..., die bereit ist, in CSS oder HTML eingefügt zu werden, um ein kleines Icon ohne zusätzliche Netzwerkanfrage einzubetten.

Beispiel:

So funktioniert es

Möchten Sie ein kleines Icon, ein Logo oder ein Piktogramm direkt in ein CSS-Stylesheet (zum Beispiel als background-image) oder in HTML einbetten, ohne eine separate Datei oder eine zusätzliche Netzwerkanfrage hinzuzufügen? Importieren Sie Ihr Bild: Es wird in eine Base64-Zeichenkette kodiert, der das richtige Präfix data:image/png;base64, vorangestellt wird (oder jpeg, gif, webp... je nach erkanntem Format), direkt als URL-Wert in Ihrem Code verwendbar.

Wann sollte ich ein Bild in Base64 statt einer separaten Datei verwenden?

Das ist vor allem für sehr kleine Bilder relevant (Icons, Piktogramme, kleine Logos): So wird eine zusätzliche HTTP-Anfrage vermieden, was die Bereitstellung einer eigenständigen Komponente vereinfachen kann. Für Fotos oder größere Bilder bleibt eine separate Datei vorzuziehen: Base64 erhöht die Größe um etwa 33% und wird vom Browser nicht unabhängig zwischengespeichert.

Wird das Bildformat automatisch erkannt?

Ja. Das Tool analysiert die ersten Bytes der importierten Datei, um ihr tatsächliches Format (PNG, JPEG, GIF, WebP...) zu bestimmen, und trägt es in das Präfix der generierten Zeichenkette ein, ohne sich auf die Dateiendung zu verlassen.

100% lokale Verarbeitung in Ihrem Browser (WebAssembly) — Ihr Bild wird niemals an einen Server gesendet.