Bild-zu-Base64-Konverter – Bilder als Data-URIs kodieren

Was Bild zu Base64 bewirkt

Dieses Tool liest Ihre Datei mit der FileReader-API des Browsers und gibt sie als Data-URI zurück: der String `data:image/png;base64,`, gefolgt von den in Base64 umgeschriebenen Bytes der Datei. Base64 ist eine Transportkodierung, kein Kompressionsverfahren. Es bildet jeweils 3 Byte Binärdaten auf 4 ASCII-Zeichen aus A–Z, a–z, 0–9, Plus und Schrägstrich ab, was bedeutet, dass die kodierte Form immer etwa 33 % größer ist als die Ausgangsdatei. Am Bild selbst ändert sich nichts – Pixel, Format, Farbprofil und jegliche EXIF-Metadaten überstehen es unangetastet, und das Dekodieren des Strings liefert eine byteidentische Datei zurück. Was Sie gewinnen, ist eine Darstellung, die vollständig aus Zeichen besteht, die sicher in Quellcode eingefügt werden können, weshalb Data-URIs überall funktionieren, wo eine URL erwartet wird: ein img-src, ein CSS url(), ein Markdown-Bild, ein JSON-Feld. Das Tool erstellt diese vier Ausschnitte für Sie und kopiert den vollständigen String, auch wenn die Bildschirmvorschau gekürzt ist, weil ein Data-URI für ein mittelgroßes Bild schnell zehntausende Zeichen lang wird und das vollständige Rendern die Seite ins Stocken bringen würde. Neben jeder Datei zeigt es die Originalgröße, die kodierte Größe und den Mehraufwand in Prozent, sodass die Kosten des Inline-Einbindens sichtbar sind, bevor Sie sich darauf festlegen. Das Lesen geschieht vollständig auf Ihrem Gerät; keine Datei wird hochgeladen, und die Seite funktioniert auch bei getrennter Netzwerkverbindung weiter.