WebyTooly

Bild zu Base64

Lade ein Bild hoch und erhalte seine Base64-Darstellung, samt fertiger Variante für CSS oder ein img-Tag.

Espacio publicitario

Zieh dein Bild hierher oder klicke, um es auszuwählen

Jedes Bildformat funktioniert, auch SVG und GIF

Espacio publicitario

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.

Verwandte Rechner