Anleitung
- Ziehen Sie Bilder auf den Ablagebereich, klicken Sie darauf, um Dateien auszuwählen, oder fügen Sie ein Bild aus der Zwischenablage ein. Mehrere Dateien gleichzeitig sind kein Problem.
- Wählen Sie bei Bedarf unter „Konvertieren in“ ein Zielformat (PNG, JPEG oder WebP), passen Sie die „Qualität“ an und legen Sie unter „Max. Breite“ eine maximale Breite fest.
- Prüfen Sie die Abmessungen, die Originalgröße und die kodierte Größe, die für jedes Bild angezeigt werden.
- Kopieren Sie die gewünschte Ausgabe oder laden Sie sie herunter: Data-URI, reines Base64, HTML-img-Tag, CSS-background-image oder Markdown.
So funktioniert die Umwandlung von Bildern in Base64
Base64 wandelt die Bytes einer Bilddatei in einfachen Text aus 64 Zeichen um. Aus je 3 Bytes werden 4 Zeichen, daher ist der Text etwa 33 % größer als die Datei. Eine Data-URI ergänzt ein kurzes Präfix mit dem MIME-Typ, etwa data:image/png;base64,. Damit kann der Browser den Text überall dort anzeigen, wo er eine Bild-URL erwartet.
Das Bild wird lokal in Ihrem Browser gelesen und kodiert. Es wird nicht hochgeladen, sodass private Screenshots und unveröffentlichte Entwürfe auf Ihrem Gerät bleiben.
Welche Ausgabe sollten Sie kopieren?
- Data-URI für
src-Attribute, JavaScript und JSON-Felder, die eine URL erwarten. - Reines Base64 für APIs, die nur die kodierten Bytes benötigen, meist zusammen mit einem separaten Feld für MIME-Typ oder Dateinamen.
- HTML-img-Tag, um ihn direkt in eine Seite oder Vorlage einzufügen.
- CSS-background-image für Icons und Verzierungen in einem Stylesheet.
- Markdown für Dokumentation und Notizen. Manche Renderer, darunter GitHub, zeigen Bilder aus Data-URIs nicht an.
Unterstützte Formate im Überblick
Die ersten Zeichen eines Base64-Strings verraten den Dateityp, denn sie kodieren die Formatsignatur.
| Format | MIME-Typ | Base64 beginnt mit |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy oder PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | unterschiedlich |
| TIFF | image/tiff | SUkqAA oder TU0AKg |
Wann sich das Einbetten eines Bildes lohnt
Data-URIs sparen eine Netzwerkanfrage und machen eine Datei eigenständig. Das passt zu kleinen Icons und Logos von wenigen Kilobyte, zu HTML-Berichten in einer einzigen Datei, zu winzigen unscharfen Platzhaltern und zu Bildern, die in JSON übertragen werden. Für große Fotos sind sie eine schlechte Wahl: Das zusätzliche Drittel an Größe, das fehlende separate Browser-Caching und eine schwerere HTML- oder CSS-Datei, die vor dem Rendern vollständig geladen werden muss, kosten meist mehr als die eingesparte Anfrage. Wenn Ihre Website eine Content-Security-Policy sendet, benötigen eingebettete Bilder außerdem data: in img-src.
Häufig gestellte Fragen
Werden meine Bilder auf einen Server hochgeladen?
Nein. Der Browser liest jede Datei und kodiert sie auf Ihrem Gerät. Es wird nichts an base64.is oder anderswohin gesendet.
Warum ist der Base64-Text größer als das Bild?
Base64 verwendet für je 3 Bytes 4 Zeichen, daher ist das Ergebnis etwa 33 % größer, zuzüglich des Data-URI-Präfixes. Um es zu verkürzen, legen Sie unter „Max. Breite“ eine geringere Breite fest oder konvertieren Sie in WebP oder JPEG mit geringerer Qualität.
Kann ich mehrere Bilder gleichzeitig umwandeln?
Ja. Wählen Sie mehrere Dateien aus oder legen Sie sie gemeinsam ab. Jedes Bild erhält eine eigene Vorschau, eigene Größenangaben und eigene Ausgaben, jeweils mit den Schaltflächen „Kopieren“ und „Herunterladen“.
Funktionieren Base64-Bilder in HTML-E-Mails?
cid: verwiesen wird, zuverlässiger.