Sie sind hier: Blog: Base64-kodierte Bilder als CSS-Regel einbetten
Base64-kodierte Bilder lassen sich mit data urls in CSS-Regeln einbetten. Diese Webdesign-Technik spart Serveranfragen ein und beschleunigt damit die Anzeige von Webseiten im Browser. Mein kleines Tutorial zeigt Ihnen anhand von Anwendungsbeispielen, wie es geht (attributbedingte und klassenbedingte CSS-Zuweisungen).
Mit base64-Kodierung können Bilddateien der Formate GIF, JPG, PNG und ICO verschlüsselt werden. Das Ergebnis dieser Verschlüsselung ist reiner ASCII-Text. Bekanntester Verwendungszweck: Wenn Bilder als Email-Anlage versendet werden, werden sie zunächst base64-kodiert und beim Empfänger wieder dekodiert. Auch MHT-Webarchive, die alle Elemente einer Webseite unabhängig vom Datenformat in einer Datei zusammenfassen, speichern Bilder base64-kodiert. Für Mathematik-Interessierte: Ausführliche Informationen zum Kodierungs-Standard base64 finden Sie bei Arndt Brünner.
Die base64-Technik kann auch genutzt werden, um Bilder als ASCII-Text per data url in HTML- oder CSS-Dateien einzubinden. Durch diese Einbettung können für Bilddateien gesonderte Anfragen an den Webserver vermieden werden. Damit verringert sich zugleich die Menge der HTTP-Kopfdaten, die zwischen Client und Server ausgetauscht werden. Das Ergebnis ist eine schnellere Anzeige der Webseite im Browser Ihrer Besucher. Zur Erinnerung: Die Website-Geschwindigkeit
ist eines der etwa 200 Ranking-Kriterien der Suchmaschine Google™.
Mit der base64-Technik können sowohl Vordergrundbilder als auch Hintergrundbilder eingebettet werden. Moderne Browser können schon lange base64-kodierte Bilddaten interpretieren, der Internet Explorer jedoch erst seit Version 8.
Der Speicherplatz base64-kodierter Bilder beträgt etwa das 1,35-fache der ursprünglichen Bild-Quelldatei vor der Verschlüsselung. Die Webdesign-Technik, Bilder ASCII-verschlüsselt per data url in die CSS-Stylesheet-Datei einzubetten, ist also nur bei kleineren Bilddateien bis etwa 5 KB sinnvoll. Perfekt geeignet für Zweck- oder Schmuck-Grafiken, die zum Layout einer Website gehören. Gut zu wissen: Hintergrundbilder werden nicht in den Google-Bilderindex aufgenommen, was für Layout-Grafiken ohnehin überflüssig ist.
Weitere Informationen zum Thema Client-Server-Kommunikation (Zahl der Serveranfragen, HTTP-Request/HTTP-Response und zugehörige Datenmengen) lesen Sie in meinem Artikel CSS-Sprites erstellen: Info, Anleitung, Tipps.
Bilder, die Bestandteil des Layouts einer Website sind, sich also auf mehreren Seiten wiederholen, fügt man am besten als Hintergrundbild per CSS-Regel mit data url in die zentrale Stylesheet-Datei ein: Wie üblich werden zuerst der Selektor festgelegt und dann die zugehörigen Eigenschaften. Je nach verwendetem Format/Datentyp (JPG/JPEG, GIF, PNG) sieht die data url so aus (die drei Punkte sind jeweils der Platzhalter für die base64-kodierten Bilddaten):
url(data:image/jpeg;base64,...)
Mit diesem Beispiel würde ein Bild im jpg-Format (der Datentyp heißt dann jpeg) base64-kodiert als Hintergrundbild eines
url(data:image/gif;base64,...)
url(data:image/png;base64,...)div
-Behälters angezeigt (anstelle der drei Punkte müßte der ASCII-Text des Bildes stehen):
.kopf div.logo{float:left;margin:.7em 1.2em 0 .6em;width:2.38em;height:3.12em;
background:#fff url(data:image/jpeg;base64,...) center no-repeat;}
Und hier der zugehörige HTML-Text:
<div class="kopf">
<div class="logo"> </div>
<h1>Gösta Thomas' Blog</h1>
</div>
Das Ergebnis sehen Sie oben links auf dieser Seite.
(Dieser Absatz ist mein Beispieltext für klassen- und attributbedingte CSS-Zuweisungen von base64-kodierten Hintergrundbildern:) CSS4You (trotz des englischen Namens in deutscher Sprache ) ist eine Referenz für die CSS-Version 2 und bietet außerdem zahlreiche CSS-Tipps, Anleitungen und Layout-Beispiele. Das Nachschlagewerk kann auch auf den heimischen Rechner runtergeladen werden: auf der Download-Seite sind Archive im 7z-Format (447 KB) und im zip-Format (1134 KB) verfügbar.
Das Pfeil-Symbol für externe Links (Klasse extern
beim Element a
) und die deutsche Flagge (Klasse deutsch
beim Element span
) werden als klassenbedingte CSS-Zuweisungen automatisch
angezeigt. Das Symbol für ZIP-Dateien wird über eine attribut-bedingte CSS-Zuweisung eingeblendet: Kriterium ist die Dateiendung .zip am Ende des href
-Attributs im a
-Element. Die drei Hintergrundbilder sind als base64-kodierte Daten in der CSS-Datei gespeichert. Hierdurch werden drei Anfragen an den Webserver eingespart.
Die erforderlichen CSS-Regeln in der Stylesheet-Datei:
Wenn Sie eine oder mehrere der drei CSS-Regeln für Ihren eigenen Bedarf kopieren wollen (können Sie gerne machen), beachten Sie bitte: Die base64-kodierten Bilddaten dürfen keine zusätzlich eingefügten Sonderzeichen wie zB Leerzeichen, Tab-Zeichen oder Zeilenumbrüche enthalten, sondern müssen fortlaufend in eine Zeile geschrieben werden: Die von mir aus Darstellungsgründen eingefügten Zeilenumbrüche müßten Sie also entfernen.
a[class ^="extern"]{background:url(data:image/gif;base64,
R0lGODlhDAAMAKIGAABm/zOZzGaZzP///wBmzJnM/////wAAACH5BAHoAwYALAAAAAAMAAwAAA
M3aKrQDou9FoMYGMMIQsgAIYpAUYCidg7FFxJDyRaN8ManWd+FQIeGgCHFAmAIC2JmgFSMnqJFAgA7)
right no-repeat;padding-right:18px;}
span[class ^="deutsch"]{background:url(data:image/gif;base64,
R0lGODlhEAAKALMAAAAAAGZEM8wAAERERLtmRLuIZqqIiP+7ZrvM3d3d3d27mf/du///3d3u/
5mZmf///ywAAAAAEAAKAEAEGhDISSs4OOt9hP9gKFjkJJ5fWaJsG3JwLGMRADs=)
right no-repeat;padding-right:23px;}
Das Dachzeichen hinter dem Schlüsselwort class
und unmittelbar vor dem Gleichheitszeichen bedeutet, daß die angegebenen Klassen (hier also extern
oder deutsch
) im class
-Attribut an erster Stelle stehen müssen. Es könnten also dahinter noch weitere Klassen zugewiesen werden.
a[href $=".zip"]{background:url(data:image/gif;base64,
R0lGODlhDgAOAIIAMQAAAP///wD/AACAAICAgMDAwAAAAAAAACH5BAEAAAEALAAAAAAOAA4AAgM6
GLrQvhCUQmgB6rl9gRgCBgUA0YDD1pDd5w4gVp6v8Mkd6t5sU8MhkklFlIgYk4ryyCCORqVnZOZIAAA7)
right no-repeat;padding-right:19px;}
Das Dollarzeichen hinter dem Schlüsselwort href
und unmittelbar vor dem Gleichheitszeichen bedeutet, daß die Zeichenkette .zip
die vier letzten Stellen des Inhalts des href
-Attributs einnehmen muß. Wenn auf der Seite im href
-Attribut des Links zipdatei.html
stünde, würde das Bild also nicht zugewiesen.
Der zugehörige HTML-Quelltext (auf den hier relevanten Code verkürzt):
<a class="extern" href="...">Linktext</a>
<span class="deutsch">in deutscher Sprache</span>
<a href="....zip">im zip-Format</a>
Nur der Vollständigkeit halber: Sie können auch base64-kodierte Vordergrundbilder direkt in den HTML-Quelltext irgendeiner Seite einfügen. Im src
-Attribut des img
-Elements müßte dann anstelle des Pfades zur Quelldatei des Bildes der base64-kodierte ASCII-Text nach folgendem Muster eingetragen werden (die drei Punkte sind der Platzhalter für die kodierten Bilddaten): <img src = "data:image/png; base64,..." alt = "irgendwas">
Die vom Server runterzuladende Datenmenge der Seite erhöht sich dadurch. Deshalb wäre dieses Vorgehen nur dann sinnvoll, wenn das Vordergrundbild nur auf einer einzigen Seite vorkommt. Bei Vorkommen des gleichen Bildes auf mehreren Seiten wäre es angebrachter, das Bild vom Server anzufordern und dann zu cachen, so daß es von den weiteren Seiten aus dem Browser-Cache geholt wird.
Bliebe noch zu klären, wie Bilder base64-kodiert werden, wenn man es nicht als Denksportaufgabe mit dem eigenen Kopf machen will.
Für die meisten Browser gibt es Erweiterungen, die das erledigen: Man wählt das zu verschlüsselnde Bild aus, drückt auf den Knopf und erhält den base64-kodierten ASCII-Text, den man dann über die Zwischenablage in die data url der CSS-Regel einfügt. Ich selbst verwende stets das Widget base64 image encoder
meines altgedienten Opera 12 (immer noch mein Standardbrowser). Die Subdomain widgets.opera.com ist jetzt aber nicht mehr erreichbar, so daß dort keine Widgets mehr runtergeladen werden können.
Wer keine passende Browser-Erweiterung findet oder keine installieren will: Es gibt auch einige Web-Anwendungen, also Online-Tools, die Bilder als ASCII-Text verschlüsseln können, zB die Base64 Online De-/Encoder von F2KO und von Werner Zenk (kostenlos und ohne Cookies
nutzbar).
veröffentlicht in kat_Webdesign
olape schrieb am 15.02.2017 um 22:28:36:
Sehr guter und sehr ausführlicher Artikel.
Auch wenn man den Inhalt eigentlich kennt, ergeben sich doch immer wieder Ansätze, seine eigenen Seiten und Ideen / Entwürfe zu überdenken und vielleicht auch zu verbessern.