Das könnte dich auch interessieren

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

t3n 31

Responsive Images: So setzt du flexible Bilder schon jetzt ein

    Responsive Images: So setzt du flexible Bilder schon jetzt ein
Ein Standard für responsive Bilder würde nicht nur die Performance auf mobilen Geräten verbessern, sondern auch die Anpassung des Detailgrads auf die Displaygröße ermöglichen.

Websites an verschiedene Geräte anzupassen, ist heute kein Problem. Geht es jedoch darum, Ressourcen zu sparen, wird es schon schwieriger, denn Bilddateien sind für mobile Browser oftmals unnötig groß. Auch wenn ein Standard für Responsive Images weiter auf sich warten lässt, können Webentwickler schon jetzt responsive Bilder einsetzen. Wir zeigen, wie es geht.

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.

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.

Ein Standard für responsive Bilder würde nicht nur die Performance auf mobilen Geräten verbessern, sondern auch die Anpassung des Detailgrads auf die Displaygröße ermöglichen.
Ein Standard für responsive Images würde nicht nur die Performance auf mobilen Geräten verbessern, sondern auch die Anpassung des Detailgrads auf die Displaygröße ermöglichen.

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.

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

Links und Literatur

  1. picture-polyfill auf github
  2. Beispiele für den Einsatz von responsiven…
  3. RespImg-WebCore auf github

Finde einen Job, den du liebst zum Thema TYPO3, PHP

7 Reaktionen
ottonormal
ottonormal
30.09.2013, 16:15 Uhr

Warum so umständlich?

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

tuts doch auch...

Antworten

tussidölüx
tussidölüx
30.09.2013, 16:48 Uhr

@ottonormal: ahso. und wie werden mit diesem css die unterschiedlichen bildformate medium, large, extralarge zur schonung der ressourcen eingebunden..? :p

Antworten

Markus
Markus
30.09.2013, 16:54 Uhr

alles schön und gut... aber wenn ein cms dahinter steckt läuft die sache wieder anders...

Antworten

Kim
Kim
30.09.2013, 19:15 Uhr

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.

Antworten

andreas
andreas
01.10.2013, 09:44 Uhr

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?

Antworten

ckdot
ckdot
05.10.2013, 04:14 Uhr

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.

Antworten

Anselm Hannemann
Anselm Hannemann
06.10.2013, 15:20 Uhr

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen