Abbildungen wandeln

Als weiterer Weg, um die Anzahl der Zugriffe zu verringern, bietet sich der geschickte Einsatz von Bildern an. Selbst wenn das eher in das Aufgabenfeld der Redakteure der Webseite fällt, lohnt sich ein Blick auf die Methode. Zu den möglichen Varianten zählen unter anderem das Optimieren von PNG-Bildern, die direkte Integration der Bilder als Base64-codierter Text im HTML-Dokument und das Erzeugen von Sprites.

Die erste Variante stellt den einfachsten Weg dar und reduziert einerseits die Menge der zu übertragenden Daten sowie andererseits die Zeit, die der Webbrowser zum Anzeigen der Bilder benötigt. Mithilfe des Werkzeugs Optipng [21] verringern Sie verlustfrei PNG-Bilder [22], indem Sie die im Bild gespeicherte Palette oder Farbtiefe verkleinern und es auf eine Form zurechtstutzen, die im Browser erscheint. Abbildung 1 zeigt an einem Beispiel den Durchgang, wobei sich hier die Bildgröße um über 30 Prozent verringert.

Abbildung 1: Mit Optipng verringern Sie die Größe von PNG-Bildern im günstigen Fall um einen beträchtlichen Faktor.

Bei der direkten Integration von Bildern als Base64-codierte Daten im HTML-Dokument [23] überträgt der Server die Bilddaten mit dem HTML-Dokument; der Browser muss also die Grafik nicht mittels eines zusätzlichen GET-Requests vom Server beziehen. Um die Bilddatei als Base64-codierte Daten zu erhalten, kombinieren Sie die beiden Kommandos cat und base64 im Terminal (Listing 7). Die resultierende Zeichenkette übernehmen Sie in das HTML-Dokument. Anstelle der Referenz auf die Bilddatei kopieren Sie Zeichen vollständig in einer einzigen Zeile in das IMG-Tag (Listing 8).

Listing 7

$ cat bild.png | base64
iVBORw0KGgoAAAANSUhEUgAAAJYAAAAyCAIAAAAx7rVNAAAAA3NCSVQICAjb4U/gAAAACXBIWXMA
AA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAFbBJREFU
[...]

Listing 8

<img src="data:image/png;base64, iVBORw0KGgoA[...]" alt="Beispielbild" />

Beim Einsatz von sogenannten Sprites handelt es sich um die komplexeste der drei Varianten. Dabei setzen Sie mehrere einzelne Bilder zu einem einzigen zusammen; mithilfe eines passenden CSS-Stylesheets und darin hinterlegter Koordinaten schneiden Sie es dann wieder auseinander. Dieses Vorgehen ersetzt mehrere Downloads durch maximal zwei – das große Bild und das dazugehörige Stylesheet. Ein solches Sprite samt passendem CSS erzeugen Sie mittels des Werkzeugs Glue-sprite [24] aus dem Paket glue-sprite [25].

Zunächst erzeugen Sie ein Verzeichnis mit den einzelnen Bildern – in unserem Beispiel schlicht distro genannt. Danach rufen Sie Glue-sprite mit zwei zusätzlichen Parametern auf (Listing 9). Der erste Parameter benennt das Verzeichnis mit den Bildern, der zweite den Ordner für die Ausgabe, in dem die Software das neue Bild samt CSS abspeichert.

Listing 9

$ glue-sprite distro sprites
Processing 'distro':
  debian.png => .sprite-distro-debian
  gnu.png => .sprite-distro-gnu
  mandriva.png => .sprite-distro-mandriva
Creating 'distro' image file...
Creating 'distro' css file...
$

Im Beispiel liegen im Verzeichnis distro drei Dateien mit den Logos von Debian, GNU und Mandriva Linux. Glue-sprite erzeugt daraus ein Gesamtbild namens distro.png sowie ein zugehöriges CSS namens distro.css (Abbildung 2). Beide Dateien referenzieren Sie nun direkt in der HTML-Seite. Um die Bilder auf verschiedenen Ausgabegeräten optimal darzustellen, hinterlegen Sie für jede Variante ein eigenes Bild – damit erfüllen Sie alle Kriterien des Responsive Programming [26].

Abbildung 2: Glue-sprite kombiniert einzelne Bilder zu einer Datei und erzeugt darüber hinaus ein CSS, mit dem Sie die Bereiche dieses großen Bilds exakt ausgeben.

Anbindung untersuchen

Haben Sie die Software analysiert und optimiert, fällt jedoch der Datendurchsatz immer noch nicht zufriedenstellend aus, dann lohnt ein Blick auf die Infrastruktur. Als Ansatzpunkte dienen dabei die Knoten, die Switches samt ihrer Konfiguration, die Anbindung und Verkabelung, die sich daraus ergebenden Zwischenschritte (Hops) zum Server sowie die generelle Last im Netzwerk.

Die Anzahl der Hops ermitteln Sie mithilfe des Werkzeugs Traceroute (Listing 10). Mit der Analyse der Last [27] und insbesondere deren Verursachern [28] beschäftigten sich bereits ausführlich zwei Artikel in früheren Ausgaben.

Listing 10

$ traceroute www.tu-berlin.de
traceroute to www.tu-berlin.de (130.149.7.201), 30 hops max, 60 byte packets
 1  217.0.117.212 (217.0.117.212)  20.221 ms  21.246 ms  21.224 ms
 2  217.237.153.214 (217.237.153.214)  22.284 ms  22.270 ms  22.248 ms
 3  h-ea3-i.H.DE.NET.DTAG.DE (62.154.49.106)  66.155 ms  66.158 ms  66.138 ms
 4  80.156.160.138 (80.156.160.138)  26.952 ms  27.923 ms  27.911 ms
 5  cr-tub1-hundredgige0-6-0-0-7.x-win.dfn.de (188.1.144.190)  30.851 ms  32.837 ms  32.833 ms
 6  kr-tub87-1.x-win.dfn.de (188.1.235.118)  32.809 ms  68.585 ms  32.355 ms
 7  e-ns-e-n.gate.tu-berlin.de (130.149.126.78)  162.247 ms  162.256 ms  163.436 ms
[...]

Im internen Netz sollten Sie prüfen, ob einige ältere Netzwerkgeräte noch auf Halbduplex eingestellt sind. Bei der Nutzung von Full Duplex fällt die Latenz deutlich geringer aus. Aktuelle Netzwerkkarten wissen, was für Information Sie senden, und funktionieren mit dieser geänderten Einstellung fehlerfrei.

Einen weiteren Knackpunkt stellt die gewählte Software-Architektur des Webservers dar. Es macht einen großen Unterschied, ob Sie den Server nativ auf Hardware betreiben, eine Virtualisierung darunterlegen oder ihn in einen Docker-Container [29] verfrachten. Bei den letzten beiden Varianten verringert sich die Latenz, da sich alle Elemente einschließlich der Netzwerkschnittstellen im RAM befinden, was die Kommunikationszeiten verkürzt.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 6 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 03/2018 NEUE DISTRIBUTIONEN

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Internet abschalten
Karl-Heinz Hauser, 20.02.2018 20:10, 0 Antworten
In der Symbolleiste kann man das Kabelnetzwerk ein und ausschalten. Wie sicher ist die Abschaltu...
JQuery-Script läuft nicht mit Linux-Browsern
Stefan Jahn, 16.02.2018 12:49, 2 Antworten
Hallo zusammen, ...folgender goldener Code (ein jQuery-Script als Ergebnis verschiedener Exper...
XSane-Fotokopie druckt nicht mehr
Wimpy *, 30.01.2018 13:29, 2 Antworten
openSuse 42.3 KDE 5.8.7 Seit einem Software-Update druckt XSane keine Fotokopie mehr aus. Fehler...
TOR-Browser stürzt wegen Wikipedia ab
Wimpy *, 27.01.2018 14:57, 0 Antworten
Tor-Browser 7.5 based on Mozilla Firefox 52.8.0 64-Bit. Bei Aufruf von http: oder https://de.wi...
Wifikarte verhindert Bootvorgang
Maik Kühn, 21.01.2018 22:23, 1 Antworten
iwlwifi-7265D -26 failed to load iwlwifi-7265D -25 failed to load iwlwifi-7265D -24 failed to l...