Question 1

Warum ist die Ausgabe eine PNG-Data-URI, obwohl ich ein JPG oder WebP hochlade?

Accepted Answer

Das Bild wird auf einem Canvas in reine Pixel dekodiert und vor dem Base64-Schritt wieder als PNG exportiert, deshalb beginnt die URI immer mit data:image/png;base64. Die Pixel entsprechen dem, was dein Eingabebild gezeigt hat, aber bei einem JPG bekommst du ein verlustfreies PNG eines bereits verlustbehafteten Bildes — das ist meist größer als das ursprüngliche JPG. Wenn du gezielt eine data:image/jpeg-URI brauchst, liefert dieses Tool sie nicht.

Question 2

Wie verwende ich den Base64-String, wenn ich ihn habe?

Accepted Answer

Füge ihn überall dort ein, wo eine URL erwartet wird. HTML: <img src="data:image/png;base64,iVBOR...">. CSS: background-image: url('data:image/png;base64,iVBOR...'). JS: weise den ganzen String einer Variablen oder element.src zu. Der Kopieren-Button legt die vollständige URI inklusive Präfix data:image/png;base64, in die Zwischenablage, damit sie ohne Nacharbeit gerendert wird.

Question 3

Wird mein Bild durch die Base64-Kodierung größer?

Accepted Answer

Ja. Base64 speichert 3 Bytes als 4 ASCII-Zeichen, der Text ist also rund 33 % größer als die Binärdatei. JPG- und WebP-Eingaben wachsen zusätzlich, weil sie hier zu PNG neu kodiert werden. Bei winzigen Assets lohnt sich das Einbetten trotzdem, weil du einen Netzwerk-Request sparst — bei großen Fotos ist es die falsche Wahl.

Question 4

Was passiert mit einem animierten GIF?

Accepted Answer

Nur das erste Einzelbild bleibt erhalten. Das Canvas erfasst eine einzige Momentaufnahme, die Animation und alle folgenden Frames gehen verloren, und du erhältst eine statische PNG-Data-URI. Wenn du eine Animation inline behalten willst, lass das GIF als separat verlinkte Datei, statt es hier zu kodieren.

Question 5

Bleibt die Transparenz erhalten?

Accepted Answer

Ja. Da die Ausgabe ein PNG ist, werden Alphakanäle aus PNG- und WebP-Eingaben übernommen, ein transparentes Icon bleibt also transparent. Ein JPG hat von vornherein keine Transparenz, dort geht somit nichts verloren.

Question 6

Werden meine Bilder irgendwohin hochgeladen?

Accepted Answer

Nein. Dekodierung, Canvas-Rendering und Base64-Kodierung laufen vollständig in deinem Browser-Tab. Die Datei wird nie an einen Server gesendet, was das Tool sicher macht für vertrauliche Screenshots, interne UI-Assets oder alles, was nicht durch Dritte laufen soll.

Question 7

Wann sollte ich ein Bild als Base64 einbetten statt es zu verlinken?

Accepted Answer

Bette kleine, kritische Assets ein: Icons, Logos, 1-px-Verläufe, Platzhalter in niedriger Qualität, Sprites im sichtbaren Bereich — Fälle, in denen das Wegfallen eines HTTP-Requests den ersten Seitenaufbau beschleunigt. Alles andere verlinkst du. Große eingebettete Bilder blähen dein HTML oder CSS auf, lassen sich nicht als eigene Dateien cachen und werden auf jeder einbettenden Seite erneut geladen.

Question 8

Gibt es eine Größenbeschränkung für das Bild?

Accepted Answer

Keine feste Obergrenze außer dem Speicher deines Geräts. Ein sehr großes Bild liegt sowohl als Canvas als auch als langer String vor, eine riesige Datei kann den Tab also verlangsamen oder den Speicher sprengen. In der Praxis ergibt Base64-Einbettung nur bei kleinen Assets Sinn, deshalb ist das selten ein Problem.

Bild in Base64 Data-URI umwandeln (JPG/PNG/GIF/WebP)

Jetzt konvertieren

Wie es funktioniert

Verwandte Konvertierungs-Tools

Bild in WebP umwandeln: JPG, PNG, BMP, GIF zu WebP

JPEG zu Base64 Data-URI Encoder, kostenlos im Browser

PNG in Base64 umwandeln: PNG als Data-URI kodieren

PSD in PNG umwandeln: Photoshop-Dateien im Browser öffnen

PNG in SVG umwandeln: Logos & Icons vektorisieren

SVG in PNG umwandeln: Vektoren im Browser rastern

MehrCANVAS

Konvertieren zuBASE64

Funktionen

Unterstützte Formate

Technische Spezifikationen

Hauptvorteile

Häufige Anwendungsfälle

Profi-Tipps

Häufig gestellte Fragen