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 12/2017: Perfekte Videos

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

Broadcom Adapter 802.11n nachinstallieren
Thomas Mengel, 31.10.2017 20:06, 2 Antworten
Hallo, kann man nachträglich auf einer Liveversion, MX Linux auf einem USB-Stick, nachträglich...
RUN fsck Manually / Stromausfall
Arno Krug, 29.10.2017 12:51, 1 Antworten
Hallo, nach Absturz des Rechners aufgrund fehlendem Stroms startet Linux nicht mehr wie gewohn...
source.list öffnet sich nicht
sebastian reimann, 27.10.2017 09:32, 2 Antworten
hallo Zusammen Ich habe das problem Das ich meine source.list nicht öffnen kann weiß vlt jemman...
Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 6 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...