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,.

Guter Einsatz

Nutze sie fuer winzige Icons, Tests, einfache E-Mails oder generierte Vorschauen.

Kosten

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

Grenzen

MDN beschreibt Laengenlimits und Sicherheitsregeln. Moderne Browser blockieren Top-Level-Navigation zu data: URLs gegen Phishing.

Praxisregel

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

Technische Quellen