AntiModerate - entwickler.de

Eine leichtgewichtige, unabhängige JavaScript-Bibliothek

AntiModerate

Gerade Bilder blähen Webseiten ungemein auf, machen aber oft bis zu zwei Drittel einer Site aus. Hält man sich vor Augen, dass die Durchschnittswebseite eine Größe von 2 MB bereits überschritten hat, wird klar, dass an der Optimierung gefeilt werden sollte. Die progressive Image-Loading-Library AntiModerate setzt genau da an.

Die optimale Größe einer Webseite sollte laut Experten bestenfalls 1 MB nicht überschreiten, da sonst die Ladezeit und somit die User Experience empfindlich leiden. Das führt wiederum dazu, dass User abspringen. Der Gedanke, dass schnellere und bessere Internetverbindungen einem solchen Problem vorbeugen, ist ein Trugschluss: Wie eine Studie zeigt, dauerte das Laden einer Webseite in Chrome 2012 rund 7,1 Sekunden, 2015 waren es bereits 10,4 Sekunden.

Am besten sollte die Ladezeit allerdings nur zwischen zwei und vier Sekunden liegen, da danach – gerade in Zeiten des mobilen Internets – die Absprungrate extrem ansteigt. Einen Beitrag zur Optimierung von Ladezeiten steuert AntiModerate bei.

Features von AntiModerate

Bei AntiModerate handelt es sich um eine leichtgewichtige, unabhängige JavaScript-Bibliothek zum stufenweisen Laden von Bildern. Dabei nutzt die Library den Blur-Effekt von StackBlur.js, um das Bild zu verkleinern und so die Ladezeit einer Webseite zu verringern. Im Hintergrund werden währenddessen die Bilder in der Originalgröße geladen, die die verschwommenen Bilder ersetzen, sobald sie vollständig geladen sind.

Quelle: https://github.com/whackashoe/antimoderate

AntiModerate ist relativ einfach zu verwenden: Man fügt ein Bild zum Dokument hinzu und nutzt das data-antimoderate-idata-Attribut, um das verschwommene Bild in Base64 zu spezifizieren:

<img class="antimoderate"
id="demo"
data-antimoderate-scale="1"
data-antimoderate-idata="data:image/jpg;base64, ..."
>

Anschließend bindet man die AntiModerate-Library in die Webseite ein und aktiviert sie:

<script src="antimoderate.js"></script>

<script>

var img = document.getElementById('demo');


AntiModerate.process(img, img.getAttribute("data-antimoderate-idata"));

</script>

Die Library ist speicheroptimiert, mit gzip braucht sie weniger als 2 KB Platz. Das Tool steht Open Source und lizenzfrei („Do whatever with it.”) auf GitHub zur Verfügung.