Responsive Images: Wenn Sie nur Auflösungen ändern, verwenden Sie srcset.

Wenn Sie responsive Bilder implementieren (unterschiedliche Bilder in HTML für unterschiedliche Situationen) und nur zwischen verschiedenen Versionen desselben Bildes wechseln (die überwiegende Mehrheit der Nutzung), benötigen Sie nur das Attribut srcset für <img>. Betrachten Sie diese einfache Syntax

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Nicht nur die Syntax ist einfach, sondern sie erledigt auch eine bessere Arbeit als <picture> mit <source> mit expliziten media Attributen (wir werden gleich erklären, warum). Außerdem bietet sie die Möglichkeit, in Zukunft mit Browsereinstellungen und Browserverbesserungen viel besser zu werden.

Ich habe schon früher über dieses Thema gescreencastet, aber es hat besser geklickt, als ich Mat Marquis' Vortrag bei An Event Apart Austin sah, und mit Jason Grigsbys Beitrag. Ich schreibe hier erneut darüber, weil ich denke, dass es für uns alle wichtig ist, das zu verstehen.

Mit srcset erledigt der Browser die Arbeit, herauszufinden, welches Bild am besten geeignet ist.

Im einfachen Beispiel oben teilen wir dem Browser nur mit, welche Bilder wir zur Verfügung haben und welche Größe sie haben. Der Browser erledigt die gesamte Arbeit und findet heraus, welches davon am besten geeignet ist.

Mat Marquis demonstrierte dies, indem er zeigte, wie der Browser dies mit Mathematik angeht. Nehmen wir an, Sie verwenden ein Gerät mit einer Bildschirmbreite von 320 Pixeln und einem 1x (Non-Retina) Display. Und die Bilder, die Sie haben, sind small.jpg (500 Pixel breit), medium.jpg (1000 Pixel breit) und large.jpg (2000 Pixel breit).

Der Browser geht

Lassen Sie mich eine schnelle Berechnung durchführen, die niemanden interessiert außer mich.

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

Okay, da ich ein 1x Display bin, ist 1,5625 das, was mir am nächsten liegt. Es ist etwas zu hoch, aber es ist die beste Option im Vergleich zu den anderen, die viel zu hoch sind.

Nun besucht ein anderer Browser die Seite. Es ist ebenfalls ein 320-Pixel-Display, aber es ist ein Retina (2x) Display. Dieser Browser macht dieselbe Rechnung, geht dann aber nur

Okay, da ich ein 2x Display bin, werde ich dieses 1,5625er Bild verwerfen, da es für mich zu niedrig ist und schlecht aussehen könnte. Ich werde das 3,125er Bild verwenden.

Sehen Sie, wie nützlich das bereits ist? Sie lassen den Browser die Arbeit machen, herauszufinden, was für ihn am besten ist, anstatt dass Sie es selbst versuchen.

Der Browser wird noch intelligenter werden.

Denken Sie daran, dass die Verwendung von srcset auf diese Weise bereits von Vorteil ist, aber sie wird noch besser. Betrachten Sie srcset als Vorschläge oder einfach als zusätzliche Informationen, die dem Browser bei der Entscheidung helfen. Letztendlich kann er tun, was er für richtig hält. Das bedeutet

• Ein Browser könnte Benutzereinstellungen bezüglich Bildern anbieten.
• Ein Browser könnte anfangen, Bandbreite zu berücksichtigen.

Ja, theoretisch, aber wahrscheinlich.

Und wenn Sie sich für <picture> mit expliziten Quellen entscheiden, muss der Browser genau das tun, was Sie sagen und keine eigenen Entscheidungen treffen. Nun, <picture> kann so eingerichtet werden, dass es genau das tut, was srcset derzeit tut, es ist nur viel umständlicher und lässt keinen Raum für Verbesserungen.

Außerdem sizes

Wir haben hier das sizes-Attribut absichtlich gar nicht besprochen. Es ist eigentlich nicht so schlimm, es einfach wegzulassen. In diesem Fall geht es davon aus, dass sizes="100vw", was bedeutet

Ich gehe davon aus, dass ein Bild, wenn es verwendet wird, die volle Breite des Viewports einnimmt.

Das ist normalerweise keine schlimme Annahme.

Wenn Sie möchten, können Sie es ganz spezifisch gestalten. Sie können sizes verwenden, um Ihr CSS-Layout exakt abzugleichen und dem Browser genau mitzuteilen, wie groß das Bild bei jeder Bildschirmgröße sein wird, entsprechend Ihren Breakpoints in Ihrem Design. Das kann etwas kompliziert werden und ehrlich gesagt auch etwas gefährlich, weil Sie CSS-Sachen in Markup schreiben, und Sie wissen ja, wie das so ist. Eric Portis hat gerade darüber geschrieben. Idealerweise kann es automatisiert oder serverseitig eingefügt werden.

Ich denke auch, dass "generische" sizes-Attribute nützlich sein könnten. Auf einer eher generischen Blog-ähnlichen Seite könnte vielleicht etwas wie das hier sinnvoll sein, innerhalb des Inhalts

sizes="(min-width: 800px) 50vw, 100vw"

Bedeutung: "Wenn das Browserfenster breiter als 800 Pixel ist, wird dieses Bild wahrscheinlich etwa halb so groß angezeigt. Wenn es kleiner ist, wird es wahrscheinlich vollbreit."

Warum darüber reden?

Nochmal: Die überwiegende Mehrheit der Anwendungen für responsive Bilder ist nicht "art direction"-basiert. Art Direction ist ein schicker Anwendungsfall, und bitte tun Sie es nach Herzenslust. <picture> ist dafür großartig.

Die meisten Anwendungen für responsive Bilder werden lauten: "Ich habe mehrere Versionen dieser Grafik. Hier sind sie, verwenden Sie die richtige."

Das ist ein sehr verwirrendes Thema. Es muss durchdacht und darüber geschrieben werden, damit es sich festsetzen und ein stärkerer Teil unseres kollektiven Bewusstseins als Frontend-Entwickler werden kann.

Tim Evko hat ein WordPress-Plugin für responsive Bilder erstellt. Es nutzt die Fähigkeit von WordPress, kleinere Versionen von Bildern zu erstellen. Dann klicken Sie auf das gewünschte Bild, und es gibt letztendlich den benötigten Code für responsive Bilder aus. Derzeit verwendet es <picture>. Das liegt daran, dass <picture> im kollektiven Bewusstsein der Frontend-Entwickler viel stärker verankert ist als srcset. Tim versucht, das alles zu verstehen, um herauszufinden, ob und wie er dieses Plugin ändern kann.

@Tevko @brad_frost srcset/sizes = Informationen, die dem Browser helfen, das Beste auszuwählen. Picture mit media attrs = explizit DO THIS ONLY

— Chris Coyier (@chriscoyier) 29. September 2014

Wann?

Das ist auch knifflig.

Wenn Sie es sofort haben möchten und großartige Browserunterstützung wünschen, müssen Sie es polyfillen. Aber das hat einige potenzielle Nachteile. Vorerst müssen Sie diese Entscheidung selbst treffen, ich bin mir nicht sicher, ob es für alle Szenarien bereits eine Best Practice gibt.