Responsive Images wie bei der BBC
Kommentare

Webentwickler der British Broadcasting Corporation, nämlich Mark McDonnell und Tom Maslen, sowie der Googler Addy Osmani, haben für das Online-Newsportal der Rundfunkanstalt das Problem der Responsive

Webentwickler der British Broadcasting Corporation, nämlich Mark McDonnell und Tom Maslen, sowie der Googler Addy Osmani, haben für das Online-Newsportal der Rundfunkanstalt das Problem der Responsive Images angepackt. Unter dem Titel Imager.js steht nun das Resultat auf GitHub unter Apache Lizenz v2 zum Forken zur Verfügung.

Gesetzt, Ihr habt einen Bildverarbeitungs-Dienst auf Eurem Server, der über REST-Schnittstellen mit Eurer App kommunizieren kann, könnt Ihr dank der JavaScript-Bibliothek die Bilder auf Eurer Website so einbinden, dass ihre Auflösung für das Anzeigegerät perfekt angepasst wird. Wie es genau funktioniert, erklärt McDonnell im Post:

The way we determine what size image to place onto the page is by taking the current screen width and then looking at the ‘rendered’ size of our image (using myImageElement.clientWidth). We then check if the rendered image size approximately matches one of the sizes available in our predefined list of image dimensions.Once we have a match we then parse the current image URL (which if using a RESTful format would look something like http://your-image-service.com/horse/100/ -> and would return an image of a horse 100px wide), finally we replace the width in the URL with the new replacement width and update the image source to load that more appropriately sized image based from the new RESTful URL we set as the image source.

Polyfills und andere derzeit oft gesehene Hacks werden dabei so gut es geht umgangen. Während künftige Lösungen des Responsive-Image-Problems, wie das srcset für WebKit oder das Picture Element noch inkubieren, soll Imager.js die beste Alternative bieten.

Doch noch sind die Entwickler mit dem derzeitigen Stand von Imager.js nicht zufrieden. In folgenden Versionen sollen via Grunt-Support die Task-Abläufe einfacher automatisiert werden. Auch das Caching soll verbessert werden, damit die Server-CPUs vom ständigen Resizing nicht allzu sehr ins Schwitzen geraten.

Bis man sich auf die Lösungen des W3C oder WebKits verlassen kann, scheint Imager.js eine adequate Lösung zu sein, um Eure Bilder Traffic-sparend auf die Smartphones Eurer Besucher zu bringen. In seinen ersten zwei Wochen hat das Projekt auf GitHub schon rund 250 Fans gewonnen. Auch aktiv Beteiligte gibt es immer mehr. Wer mehr über die Arbeit der BBC-Webcrew erfahren möchte, kann sich den tumblr responsivenews.co.uk abonnieren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -