Welches Bild-Tool brauche ich?
| Ihre Aufgabe | Tool |
|---|---|
| Beliebiges Bild in Base64 oder eine Data-URI | Bild in Base64 |
| Base64 einfügen und das Bild sehen | Base64 in Bild |
| Logos, Screenshots, Transparenz | PNG in Base64, Base64 in PNG |
| Fotos | JPG in Base64, Base64 in JPG |
| Kleinere Dateien fürs Web | WebP in Base64, AVIF in Base64, Base64 in WebP |
| Animationen | GIF in Base64, Base64 in GIF |
| Vektor-Icons in CSS | SVG in Base64 oder die meist kürzere SVG-Data-URI |
| Ein SVG aus Base64 sicher untersuchen | Base64 in SVG |
| Ein eingebettetes Favicon | Favicon als Data-URI, Base64 in ICO |
| iPhone-Fotos, Scans, alte Bitmaps | HEIC in Base64, TIFF in Base64, BMP in Base64, Base64 in BMP |
Die Encoder teilen sich dieselben Ausgaben: reines Base64, Data-URI, CSS background-image, HTML <img> mit Breite und Höhe, Markdown und ein JSON-Objekt mit Name, Typ und Größe. Sie können mehrere Dateien auf einmal ablegen oder einen Screenshot mit Strg+V einfügen.
Das Format vor dem Kodieren wählen
Base64 macht jedes Bild ein Drittel größer, das Format bestimmt also den größten Teil der endgültigen Länge.
- PNG für flächige Grafiken, UI-Elemente und alles mit Transparenz oder Text.
- JPEG für Fotos, bei denen ein PNG ein Mehrfaches größer wäre.
- WebP für beide Fälle, wenn das Ziel es unterstützt; es ist meist das kleinste der drei.
- SVG für Icons und Logos, die Vektorzeichnungen sind. Als URL-kodierte Data-URI ist es oft kürzer als Base64; das Tool SVG-Data-URI vergleicht beides nebeneinander.
- HEIC und TIFF werden unverändert kodiert. Die meisten Browser können sie nicht anzeigen, wandeln Sie also zuerst in JPEG oder PNG um, wenn das Ergebnis auf einer Webseite erscheinen soll.
Bild-Base64 erkennen
| Präfix | Format |
|---|---|
iVBORw0KGgo | PNG |
/9j/ | JPEG |
R0lGODlh / R0lGODdh | GIF |
UklGR | RIFF-Container: WebP, aber auch WAV-Audio |
PHN2Zy / PD94bWwg | SVG, das mit <svg oder <?xml beginnt |
AAABAA | ICO |
Qk | BMP |
Eine vollständige Data-URI setzt den MIME-Typ davor, wie in data:image/png;base64,iVBORw0KGgo…. Die Decoder nehmen beide Formen an, auch Zeichenketten, die zusammen mit dem umgebenden CSS oder HTML eingefügt wurden. Stellt sich heraus, dass die Zeichenkette kein Bild ist, erkennt Base64 in Datei andere Formate, und die Datei-Tools decken PDFs, Audio, Video und Dokumente ab.
Häufige Fragen
Woran erkenne ich, welches Bildformat in einer Base64-Zeichenkette steckt?
An den ersten Zeichen: iVBORw0KGgo ist PNG, /9j/ ist JPEG, R0lGOD ist GIF, UklGR ist ein RIFF-Container wie WebP, und PHN2Zy oder PD94bWwg ist meist SVG. Base64 in Bild erkennt den Typ für Sie.
Kann ich ein Bild vor dem Kodieren verkleinern?
Ja. Die Konverter für PNG, JPG, WebP, GIF, BMP und AVIF sowie der allgemeine Bild-Encoder können auf eine maximale Breite skalieren, mit Qualitätsregler als PNG, JPEG oder WebP neu kodieren und EXIF-Metadaten entfernen, alles im Browser.
Sollte man kleine Icons als Base64 einbetten?
Bei einigen kleinen Icons spart das Einbetten Anfragen. Größere Bilder sind als Dateien besser aufgehoben: Base64 legt ein Drittel auf die Größe drauf, und die Daten lassen sich nicht getrennt von der Seite cachen. Die Zahlen stehen unter Performance von Data-URIs.