Responsive Images sind eines der größten Probleme des Responsive Design. Es gibt so gut wie keine Lösung, die alle Wünsche berücksichtigt und einen perfekten Mix aus einfacher Handhabung, geringem Code-Gewicht und hoher Flexibilität bietet. Eine der einfacheren Lösungen auf dem Markt ist die von Mobify.js.

Was ist Mobify.js?

Mobify.js ist eine Open-Source-Bibliothek, die responsive Sites mit Hilfe von Responsive Images, JS-/CSS-Optimierung und Adaptive Templating verbessern soll. Heute beleuchten wir den Responsive-Images-Ansatz des Frameworks, denn mit Mobify.js ist es möglich, völlig automatisiert für jedes Gerät passende Bilder auszuliefern.

Wie Responsive Images mit Mobify.js funktionieren

Der Lösungsansatz von Mobify.js basiert auf der Manipulation des DOM mit JavaScript. Hierbei wird die große Version des Bildes im src-Attribut eines <img>-Elements hinterlegt. Mobify.js untersucht die Viewport-Eigenschaften der Clients und tauscht den Pfad im src-Attribut mit dem Pfad zum entsprechend herunterskalierten Bild. Die Verarbeitung der Bilder übernimmt der Mobify-Image-Resizing-Service, der das Bild direkt auf dem Mobify CDN hinterlegt. Unterstützt der Browser des Clients das neue WEBP-Format von Google, werden entsprechende Dateien an den Client übertragen, wodurch eine signifikante Einsparung der Dateigröße bei gleichbleibender Qualität erreicht werden kann.

Alles, was du tun musst, um eine grundlegende Responsive-Images-Implementation mit Mobify zu realisieren, ist den nachfolgenden JavaScript-Code in deinem Dokument zu integrieren. Wichtig ist, dass das Snippet vor jeder anderen externen Resource eingeladen wird.

<script>!function(a,b,c,d,e){function g(a,c,d,e){var f=b.getElementsByTagName("script")[0];a.src=e,a.id=c,a.setAttribute("class",d),f.parentNode.insertBefore(a,f)}a.Mobify={points:[+new Date]};var f=/((; )|#|&|^)mobify=(\d)/.exec(location.hash+"; "+b.cookie);if(f&&f[3]){if(!+f[3])return}else if(!c())return;b.write('<plaintext style="display:none">'),setTimeout(function(){var c=a.Mobify=a.Mobify||{};c.capturing=!0;var f=b.createElement("script"),h="mobify",i=function(){var c=new Date;c.setTime(c.getTime()+3e5),b.cookie="mobify=0; expires="+c.toGMTString()+"; path=/",a.location=a.location.href};f.onload=function(){if(e)if("string"==typeof e){var c=b.createElement("script");c.onerror=i,g(c,"main-executable",h,mainUrl)}else a.Mobify.mainExecutable=e.toString(),e()},f.onerror=i,g(f,"mobify-js",h,d)})}(window,document,function(){var a=/webkit|msie\s10|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|3ds/i.exec(navigator.userAgent);return a?a[1]&&+a[2]<4?!1:a[3]&&+a[4]<11?!1:!0:!1},
// path to mobify.js
"//cdn.mobify.com/mobifyjs/build/mobify-2.0.0alpha11.min.js",
// calls to APIs go here (or path to a main.js)
function() {
var capturing = window.Mobify && window.Mobify.capturing || false;
if (capturing) {
Mobify.Capture.init(function(capture){
var capturedDoc = capture.capturedDoc;
var images = capturedDoc.querySelectorAll("img, picture");
Mobify.ResizeImages.resize(images);
// Render source DOM to document
capture.renderCapturedDoc();
});
}
});</script>

<img src="keks.jpg">

Für einen flexibleren Ansatz kann das <picture>-Element genutzt werden. Hier erlaubt Mobify.js die Definition verschiedener Größen für <source>-Elemente. So wird es möglich. das Art-Direction-Problem zu umgehen und gegebenenfalls beschnittene Bilder für mobile Geräte auszuliefern, um trotz Skalierung die Bildwirkung beizubehalten. Außerdem reduziert Mobify.js den Aufwand, indem das Handling der verschiedenen Dateigrößen von Mobify.js übernommen wird und so nicht für jeden Breakpoint ein neues src-Attribut definiert werden muss.

<picture data-src="horse.png">
<source src="alt-horse.png" data-media="(max-width: 480px)">
<source media="(min-width: 480px)" data-width="200">
<source media="(min-width: 800px)" data-width="400">
<source media="(min-width: 1000px)">
<img src="horse-small.png">
</picture>

Ein Blick hinter die Kulissen

Normalerweise würde ein solcher Ansatz darin resultieren, dass der Browser unnötigen Overhead produziert und sowohl die Ursprungsdatei als auch die skalierte Datei herunterlädt. Das liegt daran, dass Browser beim Parsen des Dokuments Downloads von externen Ressourcen starten, noch bevor irgendwelche Veränderungen am DOM durchgeführt werden können. Mobify.js unterbindet dieses Verhalten mit einer Technik, die als „Capturing“ bezeichnet wird. Damit verhindert Mobify.js das Vorladen von Bildern, bevor es die Gelegenheit hatte, die Pfade entsprechend zu korrigieren.

Aber auch ohne das Capturing des Preload-Vorgangs kann Mobify.js die nötige Funktionalität bieten. Hierbei müssen nur die src-Attribute durch x-src-Attribute ausgetauscht werden.

<script async src="//cdn.mobify.com/mobifyjs/build/mobify-2.0.0alpha11.min.js"></script>
<script>
var intervalId = setInterval(function(){
if (window.Mobify) {
var images = document.querySelectorAll('img[x-src]');
if (images.length > 0) {
Mobify.ResizeImages.resize(images);
}
// When the document has finished loading, stop checking for new images
if (Mobify.Utils.domIsReady()) {
clearInterval(intervalId)
}
}
}, 100);
</script>
<img x-src="keks.jpg">

Passt Mobify.js zu deinem Projekt?

Der Responsive-Images-Ansatz von Mobify.js ist eine spannende Sache. Vor allem der einfache Einbau und das Wegfallen von eigenen serverseitigen Verarbeitungsmechanismen macht die Standardlösung zu einem durchaus interessanten Werkzeug.

Einen klaren Nachteil von Mobify.js stellt die Abhängigkeit dar: Der CDN des Dienstes ist ein Punkt für und gegen Mobify.js. Der Download und die Verarbeitung des Bildes durch die Dienste von Mobify führen beim ersten Aufruf zwangsläufig zu Verzögerungen, die durch interne serverseitige Lösungen umgangen werden könnten. Der Einsatz eines Fremden CDN dürfte auch nicht für jedes Projekt in Frage kommen, da die Bilder außerhalb der eigenen Server abgelegt werden. Die hohe Geschwindigkeit der Auslieferung nach Generierung der Bilder ist ein klarer Vorteil für eine solche Lösung. Das Ausfallrisiko sollte aber ebenfalls nicht unbeachtet gelassen werden.

Auf der Webseite von Mobify.js erfährst du mehr zum Projekt und kannst dir selbst ein Bild davon machen, ob Mobify.js sich für den Einsatz in deinen Projekten eignet.