Was ist ein Base64-Bild
Base64 ist eine Methode, Binärdaten in reinen Text zu codieren. Ein in Base64 konvertiertes Bild wird zu einer langen Textzeichenfolge, die direkt in HTML/CSS eingebettet werden kann, ohne eine separate Bilddatei zu benötigen. Diese Verwendung nennt man „Inline-Bild“.
Wann Base64-Bilder verwendet werden
Für Inline-Einbettung geeignete Szenarien
- Kleine Icons: kleine Icons von wenigen KB eingebettet reduzieren HTTP-Anfragen, laden schneller
- E-Mail-Vorlagen: E-Mail-Clients schränken externe Bilder ein, Inline ist zuverlässiger
- Ein-Datei-Auslieferung: HTML-Berichte, Demos als eine Datei gepackt
- Data-URI: CSS-Hintergrundbilder, SVG-Referenzen
Nicht für Inline-Einbettung geeignete Szenarien
- Große Bilder: Base64-Codierung ist 33 % größer als das Original, Inline-Einbettung großer Bilder ist langsamer
- Zu cachende Bilder: Inline-Bilder können vom Browser nicht separat gecacht werden, sie werden bei jedem HTML-Laden neu heruntergeladen
- Häufig wiederverwendete Bilder: für mehrere Seiten gemeinsam genutzte Bilder sind mit externer Datei + Cache effizienter
Konvertierung
Mit dem DocsAll Bild-zu-Base64-Tool mit einem Klick konvertieren:
- Bild zu Base64 öffnen
- Bild hochladen
- Automatische Generierung der Base64-Zeichenfolge und Data URL
- Kopieren und verwenden
Umgekehrt verwenden Sie zum Wiederherstellen eines Bildes aus Base64 das Base64-zu-Bild-Tool.
Verwendung
Das erzeugte Data URL-Format ähnelt data:image/png;base64,iVBORw0KGgo... einer langen Zeichenfolge.
- In HTML: direkt in das src-Attribut des img-Tags schreiben
- In CSS: in url() von background-image schreiben
Abwägung
| Dimension | Externe Bilddatei | Base64-Inline |
|---|---|---|
| HTTP-Anfrage | eine Anfrage pro Bild | keine zusätzliche Anfrage |
| Größe | Originalgröße | 33 % größer |
| Cache | unabhängig cachbar | mit HTML gecacht |
| Einsatz | große Bilder, wiederverwendete Bilder | kleine Icons, Einzeldatei |
Empfehlung
Inline-Einbettung für kleine Bilder vom Typ Icon (unter 4 KB), externe Dateien für große Fotos. In Kombination mit der Bildkomprimierung zuerst die Größe reduzieren, dann über Inline-Einbettung entscheiden – so ist der Effekt am besten. Mehr Base64-Wissen im Base64-Kodierungs- und Dekodierungsleitfaden.