HandyTools Hub
← Zurück zu den Tools

Bild-zu-Base64

Konvertieren Sie Bilder in Base64-Data-URIs

Bild hier ablegen oder klicken zum Durchsuchen

PNG, JPEG, GIF, WebP, SVG, BMP

Anleitung

  • Bild auswählen: Auf den Upload-Bereich klicken oder eine PNG-, JPEG-, GIF-, WebP-, SVG- oder BMP-Datei hineinziehen.
  • Info prüfen: MIME-Typ, Originalgröße und codierte Ausgabegröße ansehen.
  • Ergebnis kopieren: Die vollständige Data-URI inklusive Präfix mit einem Klick kopieren.
  • Einbetten: Den String in ein img-src, ein CSS-Hintergrundbild oder ein JSON-Payload einfügen.

Funktionen

  • Unterstützt sechs Formate: PNG, JPEG, GIF, WebP, SVG, BMP
  • Fertige Data-URI mit korrektem MIME-Typ
  • Zeigt Originalgröße, Base64-Länge und Größenaufschlag
  • Ein-Klick-Kopieren in die Zwischenablage
  • 100 % clientseitige Codierung mit der FileReader API

Was ist Base64-Codierung?

Base64 stellt Binärdaten als einfachen ASCII-Text dar. Jedes 3 Byte einer Datei werden 4 Zeichen aus einem 64-Zeichen-Alphabet, weshalb die codierte Ausgabe immer rund 33 % größer ist als das Original. Das Ergebnis ist reiner Text, funktioniert also überall, wo Text funktioniert: HTML, CSS, JSON-Payloads und E-Mail-Anhänge.

Bei Bildern wird der codierte String in eine Data-URI wie data:image/png;base64,iVBORw0… verpackt. Ein Browser, der dies in einem img-Tag antrifft, dekodiert das Bild ohne separate Netzwerkabfrage. Das macht Base64 praktisch für winzige Assets wie Icons, aber eine schlechte Wahl für Fotos, wo der Größenaufschlag und der Verlust des Browser-Cachings mehr kosten als die eingesparte Anfrage.

Anwendungsfälle

  • Webentwickler: Kleine Icons und Logos einbetten, um HTTP-Anfragen zu reduzieren.
  • E-Mail-Builder: Bilder in HTML-E-Mail-Vorlagen ohne externes Hosting einbetten.
  • API-Entwickler: Thumbnails in JSON-Payloads ohne Multipart-Uploads senden.
  • Doku-Autoren: Screenshots in Single-File-HTML-Demos einbinden.

Verwandte Tools

Häufig gestellte Fragen

Wie stark vergrößert Base64-Kodierung die Dateigröße?

Base64-Kodierung vergrößert die Dateigröße um etwa 33 %, da jedes 3 Byte Binärdaten in 4 ASCII-Zeichen kodiert werden. Beispiel: Ein 100 KB großes Bild wird zu einer etwa 133 KB großen Base64-Zeichenkette.

Wann sollte ich Base64-Bilder im Vergleich zu externen Dateien verwenden?

Verwenden Sie Base64 für kleine Bilder (unter 10 KB), wie Symbole, Logos und Vorschaubilder, bei denen das Einsparen einer HTTP-Anfrage die Größensteigerung aufwiegt. Bei größeren Bildern sind externe Dateien mit richtigem Caching effizienter.

Werden meine Bilder auf einen Server hochgeladen?

Nein. Die gesamte Bildverarbeitung und Base64-Kodierung erfolgt vollständig in Ihrem Browser mithilfe der FileReader API. Ihre Bilder verlassen niemals Ihr Gerät, was vollständige Privatsphäre gewährleistet.