Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
mobify

Mobify.js – neue Lösung für Responsive Images

Responsive Design ist eine fabelhafte Lösung für viele Probleme, doch mit den Responsive Images tun sich einige schwer. Nicht alle Wünsche und Ideen können umgesetzt werden und somit ist es oftmals problematisch für Webworker damit zu arbeiten.

Nun ist Mobify.js da und es bietet viel versprechende Ansatzpunkte für Framework. Ziel ist es für alle Geräte die passenden Bilder zu ermöglichen und dies soll auch noch völlig automatisch erfolgen.

Funktion von Mobify.js

Grundlegend funktioniert Mobify.js auf der Beeinflussung des DOM mit JavaScript. Dabei wird lediglich die größere Version des entsprechenden Bildes eines <img> Elementes im src-Attribut hinterlegt. Dann prüft Mobify.js die Eigenschaften der Clients und wechselt lediglich den Pfad. Mobify-Image-Resizing-Service übernimmt die Verarbeitung und speichert das Bild auf Mobify CDN. Die gleich hochwertige Qualität und Minimierung der Dateigröße wird durch Unterstützung des Browsers erreicht. Der Browser des Clients muss das neue WEBP-Format von Google unterstützen und schon funktioniert die Anwendung.
Einziger Anwenderpunkt ist es einen JavaScript-Code in das Dokument einzufügen. Dabei ist es wichtig, dass das Snippet vor jeder beliebigen externen Resources eingeladen und eingefügt wird.

JavaScrpit-Code:

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

 

Außerdem ist es möglich beschnittene Bilder auch für mobile Geräte sichtbar zu machen. Dafür wird das <picture> Element genutzt und das Art-Direction-Problem fällt komplett weg. Des Weiteren übernimmt Mobify.js die eigentliche Arbeit und es muss nicht ständig ein neues src-Attribut erarbeitet werden.

 

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

 

Doch Mobify.js kann noch mehr. Die Funktion – Capturing – verhindert, dass der Browser vor jeglicher Veränderung beide Dateien herunterlädt. Dadurch ist die Änderung der Pfade vor dem Laden möglich. Wenn die src- und x-src-Attribute getauscht werden ist diese Anwendung auch ohne Capturing möglich.

Mobify.js ist eine super Sache, doch leider gibt es auch einige kleinere Probleme in der Anwendung. Beispielsweise kann durch eigene serverseitige Lösungen die erste lange Aufrufzeit beim Download und bei der Bildverarbeitung abgewendet werden. Auch die Abhängigkeit zu CDN ist problematisch, da unter Einsatz fremden CDN die Bilder rund Daten nicht auf dem eigenen Server hinterlegt werden. Trotzdem ist Mobify.js besonders durch die rasche Lieferung nach der Generierung empfehlenswert.
Ich hoffe der Beitrag hat Euch einen Eindruck über Mobify.js vermitteln können. Wenn Ihr Fragen oder Anregungen habt, freue ich mich über Kommentare.