Bild zu Base64
Lade ein Bild hoch und erhalte seine Base64-Darstellung, samt fertiger Variante für CSS oder ein img-Tag.
Zieh dein Bild hierher oder klicke, um es auszuwählen
Jedes Bildformat funktioniert, auch SVG und GIF
Deine Datei verlässt nie deinen Browser: die gesamte Verarbeitung erfolgt auf deinem Gerät.
Was Base64 ist und wann es sich lohnt
Base64 stellt Binärdaten mit nur 64 druckbaren Zeichen dar. Aus je 3 Bytes der Datei werden 4 Textzeichen, das Ergebnis ist also rund 33 % größer als das Originalbild.
Base64-Länge ≈ ceil(Bytes ÷ 3) × 4
Wir lesen die Datei mit FileReader.readAsDataURL, das exakt die codierten Binärdaten liefert, ohne neu zu komprimieren oder Pixel anzufassen. Deshalb behält das Data-URI Format und Qualität des Originals.
Mehraufwand % = (Textlänge − Bytes) ÷ Bytes × 100
Ein Data-URI spart eine HTTP-Anfrage, was sich bei winzigen Icons im CSS lohnt. Bei großen Bildern ist es kontraproduktiv: Es bläht HTML oder CSS auf, wird nicht getrennt zwischengespeichert und verzögert das Rendern.
Praktisches Beispiel
Ein 900 Byte großes PNG-Icon wird zu etwa 1200 Base64-Zeichen (33 % mehr), die du direkt ins Stylesheet einfügen und damit eine Serveranfrage sparen kannst.
Häufig gestellte Fragen
- Komprimiert Base64 das Bild?
- Nein, im Gegenteil: Es vergrößert es immer um rund 33 %. Es dient dazu, ein Bild in eine Textdatei einzubetten, nicht dazu, es zu verkleinern.
- Wann lohnt sich das Einbetten?
- Bei Icons und Mustern von wenigen Kilobytes, die auf jeder Seite vorkommen. Ab etwa 5-10 KB ist eine separate Datei besser, weil sie eigenständig zwischengespeichert wird.
- Wird mein Bild verändert?
- Nein. Es werden die exakten Bytes der Originaldatei codiert, Format, Qualität und Metadaten bleiben unangetastet.
- Funktioniert das mit SVG?
- Ja, und es passt gut, weil SVG meist klein sind. SVG lässt sich auch uncodiert einbetten, Base64 ist aber die kompatibelste Variante.