Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Mobify.js: Der einfache Weg zu Responsive Images

Mobify.js

Responsive Images bereiten vielen Webworkern Kopfzerbrechen. Mobify.js kann die einfache Lösung sein. Wir verraten dir, was der Dienst bietet und ob er zu deinem Projekt passen könnte.

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-screenshot

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.

Bitte beachte unsere Community-Richtlinien

6 Reaktionen
nullzwoelf

Aber ich binde meine images doch nicht alle als ein, sondern im css als Hintergrundbild. Funktioniert das dabei auch?

dbader

Hallo Ilja,

danke für deinen informativen Artikel über Mobify.js! Ich bin Softwareentwickler bei Mobify in Vancouver und ich würde gerne noch ein paar Infos zu dem Punkt "CDN Abhängigkeit" geben.

"Einen klaren Nachteil von Mobify.js stellt die Abhängigkeit dar: Der CDN des Dienstes ist ein Punkt für und gegen Mobify.js. [...] Das Ausfallrisiko sollte aber ebenfalls nicht unbeachtet gelassen werden."

Dabei sollte bedacht werden, dass bei einem Ausfall des CDN dennoch alle Bilder korrekt angezeigt werden. Mobify.js installiert für jedes zugeschnittene Bild eine onError Routine, welche im Fehlerfall das originale Bild (vom ursprünglichen Server) lädt.

Fällt das CDN aus, welches das Mobify.js Skript ausliefert, dann wird die ursprüngliche Seite unverändert angezeigt. Wir haben viel Wert auf eine hohe Ausfallsicherheit gelegt. Denn diese wird von unseren Kunden auch zu Recht verlangt.

Viele Grüsse aus Vancouver! :-)

-- Daniel

Ilja Zaglov

Mobify erkennt Retina Geräte und liefert entsprechend bessere Grafiken aus. Nicht so klein wie für non-retina Geräte die mobil unterwegs sind natürlich. Aber hier steht auch die Frage Qualität vs. Geschwindigkeit im Raum.

Wenn du dich für Geschwindigkeit entscheidest, wirst du generell kleinere bildet ausliefern müssen, da es derzeit keine zuverlässige Methode gibt um die Netzwerkqualität deines Benutzers zu bestimmen. Ich würde eher die etwas größeren Bilder bevorzugen und versuchen die höhere Datenmenge durch andere Techniken zu kompensieren.

Truni

Und wie verhält sich die Sache mit der Retina-Auflösung von Geräten? Und komplexer: Wie, wenn ein Retina-Gerät jetzt doch «mobil» unterwegs ist – da ist es ja nicht nötig, die ganzen HighRes-Daten dennoch in gleicher Qualität zu laden wie bei einer schnellen DSL-Verbindung …?

Patrik Krupar

Danke für den kurzen Einblick in diese Problematik. Ich möchte die Nutzung der fremden Server nicht in Kauf nehmen, ebenfalls sollte man beachten, dass es manchmal doch sinnvoller ist, die Bilder per Hand zuzuschneiden und damit die wichtigeren Bereiche für die kleinere Auflösung zur Geltung bringen. Auch den noch weiter in die Tiefe gehenden 2 Wochen alten Artikel auf smashingmagazine kann ich herzlich empfehlen.

Finn Hillebrandt

Cool, nach so einem Script habe ich bereits gesucht, danke! ;-)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst