Base64-Anleitungen

Base64-Data-URLs für Bilder

Eine Data-URL setzt Medientyp und kodierte Bytes direkt in HTML oder CSS, etwa data:image/png;base64,... Sie ist nützlich für kleine Icons, E-Mail-Vorlagen und eigenständige Demos.

Eine gültige Data-URL erstellen

Verwenden Sie den exakten MIME-Typ, ein Komma als Trenner und Base64 ohne versehentlichen Whitespace. PNG- und JPEG-Signaturen unterscheiden sich. Der Dateikodierer kann Testwerte erzeugen.

<img alt="Small logo" src="data:image/png;base64,ENCODED_BYTES">

Performance-Abwägungen

Data-URLs erhöhen die Größe um etwa ein Drittel, verhindern unabhängiges Caching und können bei Übernutzung das Parsen verlangsamen. Für Fotos und wiederverwendete Assets sind normale Dateien besser.