Anzeige
Anzeige
UX & Design

Responsive Images: So setzt du flexible Bilder schon jetzt ein

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.

4 Min.
Artikel merken
Anzeige
Anzeige
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.

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (7)

Community-Richtlinien

ottonormal

Warum so umständlich?

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

tuts doch auch…

tussidölüx

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

Markus

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

Kim

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.

andreas

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?

ckdot

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.

Anselm Hannemann

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige