„Ein Bild sagt mehr als tausend Worte!“
An diesem Ausspruch ist oft etwas Wahres dran.
Vor allem, wenn inhaltlich nicht nur Fakten, sondern auch Emotionen transportiert werden sollen.
Anstatt einfach zu behaupten, dass der Urlaub wirklich sehr schön gewesen ist, zeigt man schließlich gerne Urlaubsfotos, um die traumhafte Landschaft rund um den weißen Sandstrand, die romantische Atmosphäre des Dinners bei Sonnenuntergang oder das erfrischende Flair des kristallklaren Wassers am Pool besonders eindrucksvoll zu vermitteln.
Der inflationäre Gebrauch von fotografischen Bilddaten im Web hat mit der Einführung der zu erschwinglichen Preisen erhältlichen und heimanwendungstauglichen Digitalkameras gegen Anfang des Jahrhunderts einen spürbaren Aufschwung und letztlich über die Smartphones sogar einen regelrechten Boom erlebt.
Ein aktueller Trend sind sogenannte „Selfies“ – Bilder von sich selbst in teilweise narzisstisch komponierten Posen vor einem selbstgewählten Hintergrund, wobei dieser oft das entscheidende Motiv enthält, um eine Verbindung der fotografierenden Person zu diesem Hintergrund herzustellen. Hierbei reicht die Spanne vom „Gruppenselfie“ über Selbstdarstellungen an besonderen Orten bis hin zu Kompositionen mit Berühmtheiten.
Soziale Netzwerke werden derzeit geradezu überflutet mit dieser Art des Selbst-Portraitierens. Aber auch die üblichen Bildergalerien sowie inhaltsbezogene Illustrationen werden mit steigender Beliebtheit verwendet, um Blogartikel oder andere Textpassagen aufzulockern und authentisch wirken zu lassen.
Jedes Bild ein Request
Was im Zuge der aktuell gewohnten DSL-Bandbreiten oft nicht mehr so deutlich im Fokus der Autoren oder Webseitenbetreiber steht, ist die Tatsache, dass Benutzer aus Gebieten mit eher ungünstigem DSL- bzw. LTE-Ausbau weder am heimischen PC, noch mobil in den Genuss kommen, ein reibungsloses Surfvergnügen zu erleben.
Jedes in den Web-Content mit einem Bildpfad eingebundene Bild bewirkt immerhin eine für die korrekte Darstellung notwendige Ressourcenanfrage bei dem entsprechenden Webserver, der die Inhalte bereitstellt. Die Summe der Anfragen kann entscheidend zur Ladezeit beitragen.
Während der Request für die Webseite an sich vom Webserver mit der Ausgabe des HTML-Codes beantwortet wird, müssen alle weiteren Ressourcen ebenfalls einzeln beantwortet werden.
Dabei spielt es keine Rolle, ob ein Bild beispielsweise als img-Element im Vordergrund oder per CSS-Angabe als Hintergrundbild eines weiteren Elements, beispielsweise einer Link-Schaltfläche, implementiert ist. Es sei denn, man verwendet für die Einbindung von Grafiken sogenannte „Data-URIs“.
Was sind Data-URIs?
Hierbei handelt es sich um ein Schema zur Einbettung von Daten in den Seitenquelltext. Dieses Verfahren bringt eine Vielzahl von Vorteilen mit sich. Es wirkt sich in besonderem Maße positiv auf die Performanz hinsichtlich der Ladezeiten aus.
Die Base64-Kodierung
In diesem Zusammenhang wird eine Kodierung nach dem Base64-Verfahren angewendet, die dafür Sorge trägt, dass 8-Bit-Binärdaten, wie z.B. ausführbare Programme, gepackte Daten-Archive oder Bilder, in eine Codepage-unabhängige ASCII-Zeichenfolge umgewandelt wird.
Diese Zeichenfolge ist für den menschlichen Betrachter nicht mehr sinnvoll nutzbar, um den originären Bildpfad einer Grafikdatei aufzuschlüsseln, die Kodierung wird jedoch beispielsweise für den Versand von E-Mails & inklusive aller Daten-Anhänge – als technische Notwendigkeit vorausgesetzt.
Mit Hilfe der Base64-Kodierung wird beispielsweise diese Logo-Grafik in den nachfolgenden Data URI (Uniform Resource Identifier) umgewandelt:
Die wichtigsten Vorteile der Einbettung
- Weniger Requests
Es wird kein eigener HTTP-Request benötigt, um die Bildinhalte beim Webserver anzufragen. Das Bild wird direkt mit dem restlichen Inhalt der Webseite geladen. Dadurch kann Traffic eingespart werden. - Weniger Sicherheitswarnungen
Wird die Website per https:// übertragen, müssen eingebettete Bilder auch diesem Protokoll folgen, um nicht eine Menge Content von gemischten, teils sicheren und teils unsicheren Daten zu erzeugen, inklusive aller Sicherheitswarnungen des Browsers. - Schnellere Übertragung
TCP-Verbindungen tendieren dazu, die Übertragung von Daten zunächst langsam zu beginnen und erst im Anschluss zu beschleunigen. Bei einer einzigen großen, zu übertragenden Datei, die alle Inhalte bereits mitbringt, ist auch diese Tatsache vorteilhaft gegenüber der Übertragung vieler kleiner Dateien zu bewerten. - Bessere Einteilung aller erlaubten Verbindungen
Die maximale Anzahl der http-Verbindungen zum gleichen Webserver ist üblicherweise begrenzt. Werden Daten in den Code eingebettet, bleiben potenziell mehr nutzbare Verbindungen frei und stehen dadurch zur Übertragung anderer Daten zur Verfügung.
Einige Nachteile von Inline-Grafiken
- Separates Caching nicht möglich
Ein von der umgebenden Datei unabhängiges Caching ist durch die Einbettung leider nicht mehr möglich. Bei Änderungen wird auch die eingebettete Datei wieder erneut mitgeladen. - Erneute Kodierung und Einbettung nach Änderungen
Bei Änderungen an der Datei, die eingebettet werden soll muss im Anschluss an die Änderungen eine erneute Kodierung mit dem Base64-Algorithmus erfolgen, ebenso wie die dadurch notwendige Einbettung in den Content. - Leichte Vergrößerung der Daten
Base64-kodierte Daten sind etwas größer als ihre binären Entsprechungen. Diesem Umstand kann jedoch mit Kompression der zu übertragenden Daten entgegengewirkt werden (z.B. mit Hilfe von „gzip/deflate“).
Kodierungswerkzeuge
Eine Möglichkeit, Daten mit der Base64-Methode zu kodieren, besteht in der Verwendung frei verfügbarer Tools im Internet, beispielsweise dem
- Data URI conversion tool auf der Website von websemantics.co.uk:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ - Data URL Maker auf dataurl.net:
http://dataurl.net/#dataurlmaker - Data: URI Generator von dopiaza.org:
http://dopiaza.org/tools/datauri/index.php
Alternativ kann auch die serverseitige Skriptsprache PHP dafür verwendet werden, Ressourcen über das Base64-Verfahren zu kodieren und in den übrigen Content zu integrieren.
Eine einfache, informative Herleitung zum dargestellten Codebeispiel wird im Blog von David Walsh unter dem Titel „Image Data-URIs with PHP“ verfasst.
Fazit
In Kombination mit der Komprimierung von Webseiten auf Basis von „gzip/deflate“ liefert die Einbettung von Bildinhalten ein Werkzeug, mit dem die Ladezeiten von Web-Projekten effektiv verkürzt werden können. Weitere Möglichkeiten finden Sie zudem im Artikel „Ladehemmung oder Turbolader – Pagespeed als SEO-Faktor“.
- Keyword-Recherche mit dem Keyword Planner - 10. Februar 2016
- Die beliebtesten Content Sharing-Erweiterungen für Joomla! - 19. Januar 2016
- E-Commerce mit Erfolgskurs - 25. November 2015
