In diesem Artikel
Was ist die Base64-Kodierung von Bildern?
Base64 ist ein Kodierungsverfahren, das Binärdaten (wie eine Bilddatei) als ASCII-Zeichenkette darstellt. Wenn du ein Bild in Base64 kodierst, entsteht eine lange Zeichenkette, die sich direkt in HTML, CSS oder JSON einbetten lässt – ganz ohne separaten Datei-Download.
Die gängigste Form ist ein Data-URI, der etwa so aussieht: data:image/png;base64,iVBORw0KGgo... und der direkt im src-Attribut eines <img>-Tags oder in der CSS-Eigenschaft background-image verwendet werden kann.
So funktioniert unser Encoder
Der Image-to-Base64-Encoder von CheckTown läuft vollständig in deinem Browser – es werden keine Dateien auf einen Server hochgeladen:
- Lade ein beliebiges Bild (JPEG, PNG, WebP, GIF oder BMP bis 50 MB) per Drag-and-drop, Dateiauswahl oder aus der Zwischenablage hoch
- Wähle ein Ausgabeformat: Data-URI, reines Base64, HTML-<img>-Tag oder CSS-background-image-Snippet
- Kopiere die kodierte Zeichenkette mit einem Klick in die Zwischenablage und füge sie direkt in deinen Code ein
Kostenlos testen – keine Registrierung erforderlich
Bild kodieren →Wann Base64-Bilder sinnvoll sind
Die Base64-Kodierung ist in bestimmten Entwicklungsszenarien nützlich:
- Inline-Bilder – bette kleine Icons oder Logos direkt in HTML/CSS ein, um zusätzliche HTTP-Anfragen zu sparen und die Ladezeit zu verbessern
- E-Mail-Vorlagen – viele E-Mail-Programme blockieren externe Bilder standardmäßig, aber eingebettete Base64-Bilder werden sofort angezeigt
- API-Nutzdaten – füge Bilddaten in JSON-APIs oder Konfigurationsdateien ein, in denen Binär-Uploads nicht unterstützt werden
Häufig gestellte Fragen
Vergrößert Base64 die Dateigröße?
Ja – die Base64-Kodierung erhöht die Datenmenge um rund 33 %. Aus einem 100 KB großen Bild werden etwa 133 KB Text. Deshalb eignet sich Base64 am besten für kleine Bilder (Icons, Thumbnails) und weniger für große Fotos.
Wann sollte ich Base64 NICHT verwenden?
Vermeide Base64 bei großen Bildern (über 10–20 KB). Der zusätzliche Speicherbedarf überwiegt dann den Vorteil, eine HTTP-Anfrage zu sparen. Große Assets solltest du als normale Dateien ausliefern und vom Browser cachen lassen.
Wird mein Bild auf einen Server hochgeladen?
Nein. Die Kodierung nutzt die FileReader-API des Browsers. Dein Bild verlässt dein Gerät nie.