Base64 und die Website Usability
Auch wenn der Website-Traffic durch Inline eingebettete Bilder deutlich ansteigt, sollte die Nutzung dieser Technik nicht leichtfertig verworfen werden. Schließlich kann dieser Nachteil durch entsprechende Gegenmaßnahmen wieder aufgehoben werden. Eine komprimierte Auslieferung kann die Website-Usability sogar verbessern, da am Ende die durch den Webserver zu versendende Datenmenge geringer ist als zuvor.
Da eine Einbettung von Base64-kodierten externen Binärdateien immer auch zu einer Steigerung des zur Auslieferung der Internetseiten einer Website benötigten Datenvolumens führt und sich letzlich auch die Latenzzeit der Seitenaufrufe erhöht, sollte diese Technik überlegt eingesetzt werden. Schließlich wirkt sich eine verlängerte Ladezeit negativ auf die Usability einer Homepage aus.
Durch Komprimierung der Seite lässt sich diese Erhöhung des Datenvolumens nahezu komplett kompensieren, so dass die Datenmenge letzlich gleich bleibt. Auch wenn die Bilder in der Stylesheet-Datei eingebettet sind kommt eine Komprimierung der entsprechenden CSS-Datei in Frage. Werden sowohl Bilddaten, als auch Scripte und die eigentliche HTML-Datei in einer einzigen Datei abgespeichert und danach komprimiert, so kann die zu übertragende Datenmenge insgesamt sogar erheblich geringer sein.
Die Komprimierung kann sowohl bei statischen, als auch bei dynamisch generierten Internetseiten realisiert werden. Dynamische Websites – etwa durch Content-Management-Systeme generierte oder von Community-Software ausgelieferte Websites – beherrschen die Komprimierung des Contents von Hause aus, wobei diese Funktion lediglich im Backend aktiviert werden muss. Alternativ können dynamische und auch statische Seiten durch entsprechende Konfiguration des Webservers – beispielsweise mittels entsprechender Angaben in der .htaccess-Datei – durch diesen automatsch komprimiert und dementsprechend kompakt ausgeliefert werden. Allerdings benötigt ein derart konfigurierter Webserver oder ein auf diese Art eingestelltes dynamisches System auch mehr Resourcen, da die Komprimierung bei jedem Seitenaufruf erneut erfolgt. Mit einer guten Caching-Strategie oder vorkomprimierten statischen Internetseiten kann aber auch dieser Aufwand minimiert werden.
Natürlich benötigt der Browser zum Rendern einer Internetseite mit eingebetteten Graphiken etwas mehr Zeit als bei der direkten Darstellung von externen Bilddateien. Allerdings hält sich die durch den Base64-Decoder benötigte Zeit zur Entschlüsselung in Grenzen und es sollte normalerweise kaum ein spürbarer Unterschied in Punkto Rendering-Geschwindigkeit der Seite auftreten.
Hinzu kommt, dass die darzustellenden Bilder und andere externe Elemente ersteinmal beim Client landen müssen, bevor der Browser mit deren Verarbeitung anfangen kann. Da die eingebetteten Seitenelemente aber direkt mit der HTML-Datei oder dem Stylesheet ausgeliefert werden und somit umgehend verfügbar sind, kann der Vorgang der Dekodierung auch kaum zu einer Erhöhung der Latenzzeit bis zur vollständigen Seitendarstellung führen.
Ein Base64 Encoder wird übrigens auch bei E-Mail-Attachments verwendet um beliebige Binärdaten an eine Mail anzuhängen – aus diesem Beweggrund ist dieses Verfahren auch entwickelt worden. Diese Vorgehensweise ist nötig, da die zum Versenden und Empfangen von Mails genutzten Protokolle SMTP bzw. POP lediglich mit 7-Bit-kodierten ASCII-Inhalten umgehen konnten.
Derart kodierte Dateien werden durch einen Attachment-Header eingeleitet, der unter Anderem den Content-Type und die Art der Kodierung festlegt, damit das Programm, welches die Mail erhält erfährt, wie mit dem jeweiligen Anhang zu verfahren ist. Der Content-Type gibt den Mime-Type vor – image/gif bedeutet beispielsweise, dass der Datenblock ein GIF-Bild enthält – und mit Transfer-Encoding wird festgelegt, dass es sich um eine Base64-kodierte Datei handelt, die mit einem zugehörigen Base64-Decoder wieder in ihre ursprüngliche Form umgewandelt werden muss. Die selbe Vorgehensweise kommt letztlich auch bei der Einbettung von Bildern im HTML-Code und bei der Integration von Bildmaterial in Stylesheets zur Anwendung.