Welche Lösung für responsive Bilder sollten Sie verwenden?

Es gibt in letzter Zeit eine Reihe von Techniken, die für den Umgang mit responsiven Bildern verwendet werden. Das heißt, Lösungen, die uns helfen, das richtige Bild für den jeweiligen Anlass zu liefern (z. B. Bildschirmgröße und verfügbare Bandbreite). Sie alle machen die Dinge ein wenig anders. Um den Überblick zu behalten, haben Christopher Schmitt und ich diese Tabelle mit Techniken erstellt.

Die Tabelle enthält die Daten, aber lassen Sie uns diese durch die Brille praktischer Fragen verdauen.

Um zu entscheiden, welche Technik für Sie und Ihr Projekt die richtige ist, können die folgenden Fragen als Leitfaden dienen. Viele der Fragen können für Ihr Projekt relevant sein, daher müssen Sie sortieren, welche Techniken für welche Szenarien geeignet sind und die Überschneidungen finden.

Habe ich Legacy-Inhalte?

Was wirklich bedeutet... habe ich Legacy-Inhalte, die nicht praktikabel zu aktualisieren sind? Zum Beispiel habe ich Tausende von Seiten mit Inhalten auf CSS-Tricks und nur einen einzigen Schreibmitarbeiter.

Die einzige Technik, die ich kenne und die absolut keine Markup-Änderungen erfordert, ist Adaptive Images. Sie funktioniert, indem Anfragen für Bilder über eine PHP-Datei geleitet werden, die intelligent Bilder der entsprechenden Größe für die Bildschirmbreite liefert (und bei Bedarf erstellt).

Eine weitere Frage, die Sie sich stellen sollten, ist, ob Sie sich für Legacy-Inhalte interessieren. Vielleicht ist der Großteil des Traffics auf Ihrer Website für neuere Inhalte bestimmt, bei denen Sie Markup-Änderungen vornehmen können und somit andere Techniken nutzen können. Wenn das der Fall ist, lesen Sie weiter, um diese anderen Techniken zu entdecken.

Wenn Sie ein kleines Projekt, ein brandneues Projekt oder ein Projekt mit Legacy-Inhalten haben, das Sie zurückverfolgen und aktualisieren können, können Sie auch eine Technik wählen, die spezielles Markup erfordert. Lesen Sie also weiter.

Ist mir spezielles Markup wichtig?

Dies ist im Grunde eine Unterfrage des obigen Punktes. Viele Techniken erfordern die Verwendung von speziellem HTML. Zum Beispiel müssen Sie bei HiSRC höher aufgelöste Bilder als data-attributes einfügen

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png" />

Ich würde sagen, das ist eine saubere, gültige, semantische Technik, aber es bedeutet auch, dass Sie diese Attribute für jedes <img /> auf Ihrer Website benötigen, was auf Websites mit viel Legacy-Inhalt möglicherweise nicht möglich ist.

Wenn Sie wissen, dass spezielles Markup (oder spezialisiertes CSS) keine Option für Sie ist, dann ist Adaptive Images wirklich die einzige Option. Sogar Sencha.IO erfordert das Präfixieren des src-Attributs, was bei Legacy-Inhalten möglicherweise nicht möglich ist.

Ist mir die Semantik wichtig?

Einige Techniken für responsive Bilder beinhalten Markup, das nicht streng semantisch ist. Letztendlich gibt es nur einen Weg, wie ein Bild semantisch sein kann. Das ist, wenn der src darauf verweist, dass es sich um ein echtes Bild handelt, und es alt-Text hat, der dieses Bild beschreibt. Brad Frost fasst es gut zusammen.

@stowball Leider ist es nicht so einfach. Ein Bild eines Pferdes muss ein Bild eines Pferdes sein, sonst ist es kein Bild eines Pferdes. :)

— Brad Frost (@brad_frost) April 5, 2012

Mit anderen Worten, wenn die Technik zu irgendeinem Zeitpunkt erfordert, dass der src des Bildes fehlt oder auf ein transparentes GIF (oder ähnliches) verweist, ist das nicht semantisch.

Warum machen das einige Techniken für responsive Bilder? Weil ein Bild mit einem src, das auf dieses Bild eines Pferdes verweist, bedeutet, dass dieses Bild heruntergeladen wird, sobald es vom Browser analysiert wird. Es gibt keine praktische Möglichkeit, dies zu verhindern. Selbst wenn Sie diesen src super schnell gegen eine geeignetere Version austauschen, laden Sie jetzt zwei Bilder statt eines herunter, was einen Performance-Hit statt eines Performance-Gewinns darstellt. Sie mögen entscheiden, dass das akzeptabel ist (z. B. „Desktop“-Umgebungen haben normalerweise mehr Bandbreite). Normalerweise ist das Bild im src die kleinstmögliche Bilddatei, wenn diese Technik eingesetzt wird.

Wenn Ihnen die Semantik wichtig ist, sollten Sie sich Adaptive Images (oben behandelt) oder HiSRC ansehen, ein Plugin von Christopher Schmitt, das Sie mit einem semantischen src-Attribut verwenden können.

Einige der Techniken verwenden

Ist mir die Gültigkeit wichtig?

Gültigkeit im Sinne von „Ist es gültig?“ laut dem W3C Markup Validation Service. Validierung ist ein Werkzeug, das Ihnen hilft, Probleme zu finden und besseres Markup zu schreiben. Aber nur weil etwas nicht gültig ist, heißt das nicht, dass es schlecht oder falsch ist. Wenn ungültiger Code in allen Browsern wunderbar funktioniert, sollten Sie und niemand sonst sich darum kümmern.

Wenn Ihnen die Gültigkeit wichtig ist (vielleicht verlangt ein Kunde irrational danach und hält Ihren Gehaltsscheck als Geisel), dann gibt es einige Techniken, die Sie nicht verwenden können. Die picturefill-Technik verwendet zum Beispiel das <picture></picture>-Element, um seine Magie zu wirken. Dies könnte schließlich standardisiert werden, ist es aber noch nicht, also ist es technisch gesehen ungültige Syntax. Außerdem ist es erforderlich, dass <img />-Elemente ein src-Attribut haben, so dass Techniken, die dieses entfernen, um das Problem der doppelten Bildanfrage zu umgehen, ungültig sind.

Ich würde diese Techniken empfehlen, wenn Gültigkeit eine Anforderung für Sie ist: Adaptive Images, HiSRC oder Responsive Enhance. Alle verwenden eine einfache, gültige <img />-Syntax, die ein src enthält.

Ist mir Art Direction wichtig?

Einige Techniken für responsive Bilder liefern unterschiedliche Auflösungsversionen desselben Bildes. Das macht zwar die Dinge einfacher (d. h. weniger Arbeit), ist aber möglicherweise nicht akzeptabel. Hier ist ein visuelles Beispiel.

Diese Bilder sind handgefertigt von einem Designer, beschnitten, um Bedeutung und Wirkung zu erhalten. Wenn Sie das Bild auf der rechten Seite nehmen und nur verkleinern würden, wären die Personen im Bild sehr klein und die Wirkung des Bildes ginge verloren.

Wenn diese Idee der Art Direction für Ihr Projekt wichtig ist, benötigen Sie eine Technik, die es Ihnen ermöglicht, genau anzugeben, welcher src unter welchen Umständen geliefert werden soll. Das ist perfekt für picturefill, das es Ihnen ermöglicht, sehr spezifisch über Quellen zu sein und was welche Umstände erhalten.

<picture>
  <source src="small.jpg" />
  <source src="medium.jpg" media="(min-width: 400px)" />
  <source src="large.jpg" media="(min-width: 800px)" />
</picture>

JavaScript erledigt den Rest.

Ist mir JavaScript wichtig?

Die meisten dieser Techniken für responsive Bilder nutzen JavaScript, um ihre Magie zu wirken. Manche nur ein winziges bisschen, um einen Cookie zu setzen, aber trotzdem JavaScript. Manche von ihnen verlangen, dass Sie ein <img /> in einem

Was ist mit Abhängigkeiten von JavaScript-Bibliotheken?

HiSRC und rwdImages sind beide von jQuery abhängig. Wenn Ihr Projekt eine andere Bibliothek verwendet, sind diese wahrscheinlich nichts für Sie. Aber hey, Sie könnten sie portieren und Open Source daraus machen! Wenn Sie keine Bibliothek verwenden, nun, Sie sollten wahrscheinlich eine haben, aber lassen wir das mal beiseite.

Sind mir Server-Side-Komponenten wichtig?

Einige dieser Techniken sind nicht ausschließlich von JavaScript abhängig. Adaptive Images wirkt seine Magie hauptsächlich durch .htaccess und PHP. Nun, .htaccess setzt einen Apache-Server voraus. Und, obwohl wir natürlich alle PHP lieben (hüstel), laufen viele Websites auf Technologien wie Ruby oder Python.

Responsive Images (die ursprüngliche Technik von Filament Group) verwendet ebenfalls .htaccess. Wenn Sie also etwas wie Nginx als Webserver verwenden, ist dies entweder ausgeschlossen oder Sie müssen die .htaccess-Komponente in die ähnliche, aber andersartige Syntax von Nginx portieren.

Ist mir Bandbreitentests wichtig?

Das Testen der Browserfensterbreite und das Treffen von Entscheidungen, welches Bild basierend darauf geliefert werden soll, ist ziemlich cool und fundamental für das Konzept der responsiven Bilder. Aber es ist wirklich nur die Hälfte dessen, worauf die Entscheidung, welches Bild geliefert werden sollte, basieren sollte. Die andere Hälfte ist die verfügbare Bandbreite. Wenn der Benutzer eine sehr schnelle Internetverbindung hat, ist das Liefern großer Bilder in Ordnung. Wenn der Benutzer eine sehr langsame Internetverbindung hat, sollte er kleinere Bilder erhalten (unabhängig von der Bildschirmgröße). Leider existieren native Bandbreiten-Media-Queries nicht.

Zwei der aktuellen Techniken führen Bandbreitentests als Teil ihrer Entscheidungsfindung durch: Foresight.js und HiSRC (beide basieren auf der Technik in Foresight.js). Es funktioniert, indem eine Testdatei heruntergeladen und gemessen wird, wie lange es gedauert hat (konfigurierbar). Der Test selbst ist ein geringer Performance-Hit, aber theoretisch ist die Einsparung durch das Liefern von Bildern basierend auf der Kenntnis der aktuellen Bandbreite ein Netto-(Verstehen Sie es?)-Gewinn.

Ist mir die Abhängigkeit von Dritten wichtig?

Sencha.IO ist eine völlig externe Methode zur Handhabung responsiver Bilder. Soweit ich weiß, funktioniert es großartig und hatte keine größeren Ausfallzeiten, aber natürlich besteht immer dieses Risiko.

Sie denken vielleicht: Wow, die Sencha.IO-Technik ist wirklich cool, aber ich mache mir Sorgen wegen der Abhängigkeit von Dritten. Ich wünschte, ich könnte das auf meinem eigenen Server ausführen. Wenn Sie diesen Weg gehen möchten, gibt es die öffentliche WURFL-Datenbank und diese Server Side Responsive Images-Technik, die das lokal nutzt.

Es gibt auch externe Dienste wie Device Atlas Cloud, die die Geräteerkennung für Sie durchführen. Es ist auch eine Abhängigkeit von Dritten für Ihre App. Zweifellos ist ihr Ziel und Fokus, jederzeit erreichbar und schnell zu sein, aber Sie müssen sehr vorsichtig sein, auf wen und was Sie sich für Ihr Geschäft verlassen.

Einige weitere Drittanbieterdienste: ReSRC.it, Responsive.io, Thumber.io

Ist ein bestimmtes CMS mit spezifischen CMS-Funktionen beteiligt?

Nehmen wir an, Ihr Projekt ist in WordPress. WordPress hat einen integrierten Media-Uploader. Wenn Sie ein Bild damit hochladen, kann es mehrere Versionen (herunterskaliert) dieses Bildes für Sie erstellen. Das ist ziemlich cool und mächtig, und Sie könnten/sollten das nutzen.

Das ist aber kein reines WordPress-Ding. Ich bin sicher, die Konzepte, die hier im Spiel sind, könnten in jedem Content-Management-System umgesetzt werden (oder umgesetzt werden).

Sind mir doppelte Anfragen egal, solange die Lösung Mobile First ist?

Viele dieser Lösungen versuchen, das Problem bestmöglich zu lösen: nur eine einzige Anfrage für die richtige Ressource zu stellen. Wenn Sie damit einverstanden sind, die kleinste Version der Datei zu verlinken (damit diese Anfrage auf jeden Fall gemacht wird) und sie bei Bedarf durch größere Bilder zu ersetzen, funktioniert Source Shuffling vielleicht für Sie. Beachten Sie, dass die Bibliothek, die sie verwendet, nun vorschlägt, font-family anstelle von content zu verwenden, um Medienabfrageänderungen zu erkennen.

Kann ich auf die Zukunft warten?

Die Veröffentlichung des „neuen iPad“ (des dritten, für die Langlebigkeit) war Auslöser für viele dieser Techniken und Diskussionen. Seine hohe Pixeldichte ist großartig für Vektoren und große Fotos, aber eigentlich nicht gut für Dinge wie kleine Icons, die hochskaliert werden müssen, um die richtige Größe zu haben, und verschwommen sein können. Aber das Liefern von höher aufgelösten Icons bedeutet größere Dateigrößen und langsamere Websites. Daher die Notwendigkeit, sie nur in Situationen/Umgebungen zu liefern, in denen sie benötigt werden.

Die Welt der Webstandards ist sich dieses Problems bewusst. Es gibt eine ganze Gruppe, die sich damit beschäftigt. Mit der Zeit werden sie es vielleicht lösen, und dann können wir anfangen, jede Methode zu verwenden, die sie entwickeln (vorausgesetzt, sie ist großartig und besser als das, was wir jetzt haben).

Es könnte das Umschalten des src von Bildern über CSS-Inhalt sein, wie Nicolas Gallagher vorgeschlagen hat. Es könnte das <picture></picture>-Element sein. Es könnte ein srclist-Attribut in HTML oder src-Eigenschaft in CSS sein. Es könnte ein Präfix sein.

Es könnte Browser-Informationsanfragen senden, wie bei Client-Hints.

Weitere Ressourcen

• Jason Grigsby hat eine epische dreiteilige Serie über responsive Bilder hier beginnend.
• Christopher Schmitts Folien zu einem ganzen Vortrag über responsive Bilder.
• Mat Marquis über Responsive Images: How they Almost Worked and What We Need