Responsive Grafiken mit HTML

Die Qual der Wahl – <picture> oder <img>?

29,95
Responsive Grafiken kann man mit <img>, srcset w und sizes oder mit dem neuen <picture>-Element umsetzen. In diesem Film werden die Vor- und Nachteile beider Lösungen zusammengefasst.

Ein kurzes Fazit zu "picture" und ein Vergleich mit der anderen Lösung mit "img", "srcset" und "sizes" möchte ich Ihnen jetzt zeigen. Zu einem kurzen Fazit: Unterschiedliche Bildmotive mit picture. Autor und Browser im Verhältnis ist das genau umgekehrt wie bei "img", "srcset" und "sizes". Der Autor ist der Regisseur (director) und entscheidet, was passiert, welche Grafik genommen wird. Der Browser ist ausführendes Organ. Er hat keinerlei Spielraum. Er tut nur das, was der Autor der Webseite ihm vorgeschreiben hat. Das kann problematisch sein, weil der Autor die Umstände, unter denen die Grafik dargestellt wird, nicht wirklich kennt. Da weiß der Browser wesentlich mehr als der Autor. Der Autor benutzt "Media Queries", um dem Browser das vorzuschreiben. Die "Media Queries" werden der Reihe nach von oben nach unten abgearbeitet und die erste passende "Media Query" wird vom Browser genommen. Da hört er auf zu lesen. Insofern ist die Reihenfolge dieser "Media Queries" sehr wichtig. Wie kann man das jetzt mit "img" und "srcset" vergleichen? Die Qual der Wahl: "img" oder "picture"? "img", "srcset w" und "sizes" ist eine sehr flexible Lösung wie wir gleich sehen werden. Der Autor liefert die Informationen und der Browser entscheidet. Sehr flexibel, wie gesagt und meist ausreichend. "picture" hingegen: Der Autor entscheidet, der Browser führt nur aus. Ideal für "art direction" und für unterschiedliche Dateiformate. Was eher ein Sonderfall sein dürfte. Je mehr Wünsche der Autor, der Director hat, desto aufwändiger wird die Umsetzung im Quelltext. Die "Responsive images community group", die treibende Kraft hinter der Spezifikation, hat hier die beiden Fälle im Überblick und auch hier fallen die Worte: Wenn Sie keine Kontrolle brauchen, dann sollten Sie "img", "srcset" und "sizes" nehmen. Wenn Sie, aus welchen Gründen auch immer, die Kontrolle benötigen, dann sollten Sie das "picture"-Element nehmen. Jason Grigsby vom "Cloud Four Blog", der immer wieder lesenswert ist, hat das in einem Artikel im September 2014 sehr schön zusammengefasst und hat gesagt: "Don't use "picture" (most of the time). Verwenden Sie nicht immer grundsätzlich das "picture"-Element, sondern meistens ist es ausreichend. In diesem sehr lesenswerten Beitrag, den ich vorbeiscrollen lasse, denn ich gehe gleich unten zum Fazit hier. "Simple guidelines for using the responsive images specification". Das ist also nicht mehr "picture-specification", sondern die responsive Grafikenspezifikation. Die offizielle Bezeichnung hat sich noch nicht durchgesetzt. Hier hat es sich noch nicht geändert. Deswegen trotzdem hier die Zusammenfassung: Die "picture specification", da gibt es mehr als nur das "picture"-Element. Das haben Sie gesehen, auch "img", "srcset" und "sizes". Für die meisten responsiven Grafiken sollte man nicht "picture" verwenden, sondern "srcset" und "sizes" als Erweiterung für "img". "picture" ist eigentlich nur dann gefragt, wenn Sie den Art Direction usecase wenn Sie wirklich kontrollieren wollen, wenn Sie den Art Direction usecase einsetzen wollen. Er sagt, für die Zukunft des Web ist es relativ wichtig, dass wir dieses hinkriegen. "Go forth and make all your images responsive" Gehet hin und machet eure Grafiken responsiv. In den meisten Fällen bedeutet mit "img", "srcset" und "sizes". Wenn man die Kontrolle braucht, mit "picture".

Responsive Grafiken mit HTML

In diesem Video-Training lernen Sie, wie Sie mit Attributen und Elementen wie srcset, sizes und responsive Grafiken per HTML einbinden können.

1 Std. 39 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!