Base64 Encoder: Bilder als Quelltext für Webseiten umwandeln!

Zahlreiche Bilder auf einer Webseite erhöhen die Lade-Geschwindigkeit. Nicht nur wegen der Dateigröße, sondern auch wegen den zusätzlichen Anfragen, die der Browser an den Server stellen muss. Sendet man die Bilder nicht als zusätzliche Datei, sondern als Quellcode in dem HTML- oder CSS Dokument, spart man sich diese zusätzlichen Request!

Die Webseite „base64-image.de“ wandelt die Bilder ganz einfach in den für den Browser benötigten Base64 Code um: Dazu zieht man die Bilddatei in den Formaten JPG, PNG, GIF, WebP, SVG oder BMP in das Browser-Fenster. Anschließend kann man den Code schon passend formatiert übernehmen: Zum Beispiel mit dem zugehörigen CSS oder HTML Quellcode.

Dieser Code zeigt ein durchsichtiges 8-Bit PNG Bild:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=">

Als CSS sieht der Code so aus:

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=')

Einen alternativen Online-Dienst bieten die onlinepngtools: Neben verschiedenen anderen Tools zum Bearbeiten von Bildern im PNG Format lassen sich die Grafiken hiermit auch in das Base64 Format umwandeln, um sie später auf Webseiten zu nutzen.