Base64-Data-URLs erklärt (und wie Sie eine erstellen)
Eine Data-URL bettet eine Datei direkt in eine Webseite, ein Stylesheet oder eine E-Mail ein — ohne separate Anfrage. Die Bildbytes werden als Base64 kodiert und im src-Attribut selbst transportiert.
Die Anatomie einer Data-URL
Eine Data-URL folgt der Form data:<Medientyp>;base64,<Daten>. Für ein PNG lautet sie data:image/png;base64,iVBORw0KGgo... Das Präfix sagt dem Browser zwei Dinge: welche Art von Daten es ist (ihr MIME-Typ) und dass sie Base64-kodiert sind. Der Browser dekodiert und rendert sie genau wie eine geladene Datei.
Warum Browser sie nativ akzeptieren
Browser bringen einen eingebauten Dekodierer für Data-URLs mit, daher funktioniert ein so eingebettetes Bild überall dort, wo ein <img>-Tag funktioniert — ohne Plugin, ohne zusätzlichen Roundtrip. Gleiches gilt in CSS mit background-image und url() sowie in E-Mails, um Bilder ohne Anhang einzubetten.
Der Kern-Kompromiss: keine Anfrage, aber mehr Bytes
Da Base64 rund 33% hinzufügt, ist eine Data-URL etwa ein Drittel größer als die Originaldatei und zählt zur Größe Ihres HTML oder CSS. Für kleine, wiederverwendbare Elemente — Icons, Logos, kleine Vorschauen — ist das ein fairer Preis. Für Fotos und Dateien im Megabyte-Bereich ist es Verschwendung.
Wann sie verwenden
Nutzen Sie Data-URLs für eine Handvoll kleiner Elemente, die sofort rendern oder in einer einzigen Datei reisen müssen: E-Mail-Signaturen, Einzeldatei-Tools, Offline-Demos oder Favicons. Bei großen oder zahlreichen Bildern gewinnt der Browser-Cache echter Dateien.
Sie erstellen und dekodieren
Das Werkzeug Bild zu Base64 erzeugt aus jeder PNG-, JPG-, WebP-, GIF-, BMP- oder AVIF-Datei eine bereite Data-URL, und Base64 zu Bild macht das Gegenteil: Es erkennt das Format und gibt die Originaldatei zurück. Beide laufen in Ihrem Browser, sodass nichts hochgeladen wird.