Ratgeber

Base64-Bilder und data URLs: wann sie passen

Data URLs helfen bei kleinen Dateien, kosten aber Groesse, Cache und Performance.

Prinzip

Eine data URL legt eine kleine Datei in eine URL-Zeichenkette. Bilder beginnen oft mit data:image/png;base64,.

Sinnvolle Einsatzfälle

Nutze sie für winzige Symbole, Tests, einfache E-Mails oder erzeugte Vorschauen.

Kosten

Base64 macht aus 3 Bytes 4 Zeichen. HTML oder CSS wird groesser, bevor der Browser das Bild findet.

Grenzen

MDN beschreibt Längenlimits und Sicherheitsregeln. Moderne Browser blockieren die Navigation auf oberster Ebene zu data: URLs als Schutz vor Phishing.

Praxisregel

Inline nur Dateien, die im Quellcode lesbar bleiben. Normale Bilder und Uploads bleiben eigene Dateien.

Technische Quellen