Responsive Images: So setzt du flexible Bilder schon jetzt ein
Das Internet entwickelt sich zum Multi-Device-Web und Nutzer surfen immer häufiger mobil. Daraus resultieren große Herausforderungen für Webentwickler. Sie sind zwar in der Lage, das Layout einer Website an Smartphones anzupassen – aber bisher ist es nicht wirklich möglich, auch die Inhalte auf befriedigende Art und Weise responsiv auszuliefern. Bilder werden aktuell unabhängig von ihrem Ausgabemedium immer in voller Größe geladen.
[metabox keyword=“responsive-webdesign“]Man könnte diesen Missstand theoretisch mit HTML lösen und einfach verschiedene Bildgrößen ausgeben. Auf diese Weise müssten Smartphones nur die kleine, vielleicht gerade mal 50 Kilobyte große Bildversion laden. Einige Entwickler sind der Meinung, es brauche keine HTML- oder CSS-Lösung, sondern ein responsives Bildformat. Die Entwicklung eines solchen Bildformats, das je nach Auflösung und Netzwerkstatus eine bestimmte Dateigröße ausliefert, ist theoretisch möglich. Der Weg zu einem online wirklich nutzbaren responsiven Bildformat ist jedoch steinig. Selbst wenn ein solches Format bereits vorhanden wäre, würde es lange dauern, bis es sich auch wirklich durchsetzt.
Responsive Images: Methoden für die Praxis
Zumindest mittelfristig gilt es deshalb, andere praktikable Lösungen zu finden. Eine Möglichkeit ist die serverseitige Lösung namens adaptive-images.com, die Matt Willcox von der Filament Group entwarf. Dieses PHP-basierte Skript liefert je nach Device das passende Bild aus. Dazu kommen bestehende Media Queries nach dem Mobile-first-Prinzip zum Einsatz. Voraussetzung ist jedoch der Einsatz von PHP, JavaScript, einer .htaccess-Datei und Cookies. Aus diesem Grund ist auch adaptive-images.com keine optimale Lösung. Dennoch stellt die Methode aktuell einen einfachen Weg dar, um responsive Bilder auf der eigenen Website einzusetzen.
Neben der serverseitigen adaptive-images.com-Lösung ermöglichen mehrere JavaScript-Bibliotheken bereits heute, verschiedene Bildauflösungen zuzulassen. Leider haben die meisten dieser Bibliotheken den Nachteil, dass sie jQuery benötigen. Darüber hinaus beschränkt sich der Funktionsumfang oftmals nur auf die Unterstützung von Retina-Displays.
Die bisher vielleicht interessanteste Möglichkeit ist jedoch picture-polyfill. Das Projekt ermöglicht den Einsatz im HTML-Quelltext, arbeitet mit div-Elementen und bietet damit hohe Abwärtskompatibilität sowie Standardkonformität zu HTML5. Picture-polyfill basiert auf JavaScript und ist nicht an jQuery oder eine andere Bibliothek gebunden. Das macht diese Lösung schlank und schnell – was sich auch auf die Geschwindigkeit der Website positiv auswirkt, schließlich wird picture-polyfill im <head>-Bereich eingebunden.
Wer die Kompatibilität mit älteren Browsern erhöhen möchte, kann zusätzlich den matchMedia Polyfill einbinden, der es erlaubt, in den <source>-Elementen das media-Attribut zu nutzen. Beide Libraries kombiniert haben eine Dateigröße von gerade einmal 2,2 Kilobyte (nicht minimiert). Will man picture-polyfill einsetzen, findet sich die aktuellste Version auf GitHub zum freien Download. Die benötigten Daten sind „picturefill.js“ und „external/matchmedia.js“. In der Datei „index.html“ findet sich eine Beispiel-Implementation mit den mitgelieferten Bildern. Zuerst müssen Entwickler die Skripte in den <head>-Bereich der HTML-Datei einbinden.
JavaScript-Code:
<head> <!-- Hier steht ihr head-Bereich-Inhalt --> <script xsrc="external/matchmedia.js"></script> <script xsrc="picturefill.js"></script> </head>
Listing 1
Die eigentlichen Bilder kommen dann wie folgt zum Einsatz:
JavaScript-Code:
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="external/imgs/small.jpg"></div> <div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div> <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback Inhalt für Browser hone JavaScript. Die gleiche img src wie das erste source-Element ohne Media-Query --> <noscript><img xsrc="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </div>
Listing 2
Auf diese Weise bekommen User in Abhängigkeit der Displaygröße ihres Geräts die entsprechenden Bilder angezeigt. Dieses Beispiel verfolgt das Mobile-first Prinzip, weshalb Entwickler zunächst das generische und kleinste, mobil optimierte Bild angeben. Danach folgen die Bilder für höhere Auflösungen. Nach den Bildern wird im noscript-Tag das Fallback-Bild angegeben – für den Fall, dass der Benutzer kein JavaScript aktiviert hat.
Auf responsiveimages.org finden sich verschiedene Beispiele zum Einsatz von responsiven Bildern. Im normalen Browser werden diese durch den Polyfill dargestellt, im speziellen WebKit-Demobuild können sich Webentwickler ansehen, wie der Browser die Bilder rendert. Auch wenn der Aufwand zunächst hoch erscheint, können Entwickler so schon heute den richtigen Inhalt für das entsprechende Gerät ausliefern und damit die User Experience und Performance extrem steigern.
Responsive Images: Ziele und der aktuelle Stand der Dinge
Trotz dieser bereits bestehenden Methoden: Ist irgendwann mit einer nativen Lösung zu rechnen? Im November 2011 jedenfalls begann die Entwicklung des picture-Elements und im April 2012 kam die Entwicklung des srcset-Attributes dazu. Beide Technologien lösen verschiedene Aufgaben: Während srcset sich für die simple Ausgabe mehrerer Auflösungen eines Bildes anbietet, bietet das picture-Element die Möglichkeit, mit Media Queries zu arbeiten und damit Geräte oder Medientypen (Displays, Drucker) explizit anzusprechen. Kombiniert man beide Ansätze miteinander, steht ein mächtiges Toolset für responsive Bilder zur Verfügung. Geplant ist die Veröffentlichung als Standard für HTML5.1.
Für WebKit existiert bereits eine gepatchte Version, die die Funktionen unterstützt. Yoav Weiss hat diese Version zum Testen auf GitHub zum Download veröffentlicht. Es gibt allerdings noch keinerlei Feedback der Browser-Hersteller, die picture- und srcset-Implementation zu unterstützen. Lediglich Opera gab bisher ein generelles „Ja“ zur Unterstützung ab.
[related id=“446306″]
Fazit
Webentwickler können bereits heute mit einigen Techniken wie Polyfills oder Frameworks responsive Bilder auf ihrer Website einsetzen. In hoffentlich nicht allzu ferner Zukunft wird durch die Standardisierung von <picture> und srcset das Ganze erneut einfacher. Den aktuellen Stand der Entwicklung findet man auf responsiveimages.org/.
Warum so umständlich?
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
tuts doch auch…
@ottonormal: ahso. und wie werden mit diesem css die unterschiedlichen bildformate medium, large, extralarge zur schonung der ressourcen eingebunden..? :p
alles schön und gut… aber wenn ein cms dahinter steckt läuft die sache wieder anders…
Was ist eigentlich mit der verfügbaren Bandbreite?
Sollte nicht ein Bild in 3G auf iphone Retina nicht kleiner ausliefern als im WLAN?
Ich denke man sollte bei den recourcen gerade bei mobiler Nutzung schonender umgehen.
einfach nur von der auflösung und dem gerät auszugehen ist doch zu einfach gedacht.
was wenn ich mit dem handy im w-lan bin, dann könnte ich doch auch ein großes bild bekommen.
was wenn ich mit dem laptop oder tablet mobil mit geringer datenrate surfe? dann sollte ich doch ein kleineres bild bekommen.
was wenn ich mobil surfe mit langsamer verbindung aber auf qualität stehe oder zeit zum warten habe, dann müsste ich ein großes bild bekommen.
wie frage ich dann die benutzervorlieben ab?
Und wie möchtest du das lösen? Bleibt ja nur noch übrig, den Benutzer zu fragen. Und das möchten sicherlich die wenigsten.
Ich denke, wenn man auf kleinen Geräten kleine + optimierte Bilder lädt, deckt man den Wunsch der meisten Nutzer ab.
Hallo zusammen,
zu: max-width: 100%; height: auto; – das reicht nicht aus, darum geht es auch nicht. Es geht darum, verschiedene Daten an verschiedene Medien zu senden.
Was die Bandbreite und dieses Thema angeht: Das ist nicht falsch, allerdings ist dies momentan nur durch Nutzerinteraktion möglich. Langfristig sollten Browser hier meiner Meinung nach entsprechende Voreinstellungen anbieten.
Zu dem Thema gibt es auch einen passenden Artikel bei Smashingmag: http://mobile.smashingmagazine.com/2013/01/09/bandwidth-media-queries-we-dont-need-em/
Beste Grüße,
Anselm