Base64 Bild Konverter

Datei hinzufügen

Anleitung

Normalerweise sind Bilder und Webseite in verschiedenen Dateien. Manchmal will man jedoch nur eine HTML-Datei haben. Doch was ist mit den Bildern? Es gibt eine Möglichkeit diese direkt in die HTML-Seite einzubinden:

Beispiel

Da Bilder binäre Daten sind, müssen diese zuvor in reinen Text konvertiert werden. Hierfür wird eine Base64-Kodierung vorgenommen. Der Inhalt wird statt dem Link zum Bild in das "src"-Attribut des Img-Tags eingefügt. Aus dem bisherigen Image-Tag:

<img src="bild.png">

wird

<img src="data:image/jpg;base64,/9j/4AAQSkZ ... "/>

Gibt es Nachteile? Ja die gibt es, durch die Kodierung wird die Datenmenge für das Bild größer, damit die Ladenzeiten länger. Ebenfalls wird die Lesbarkeit des HTML-Codes schlechter, da die Bilder lange Code-Passagen sind.