Responsive Grafiken mit HTML

HTML, responsive Grafiken und die vier Anwendungsfälle

Testen Sie unsere 1987 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieser Film zeigt kurz die Entstehung der <picture>-Spezifikation, die neue Elemente und Attribute definiert, und die vier Anwendungsfälle, die die Spezifikation zu lösen versucht.

Transkript

BIlder sind auf responsiven Webseiten eine ganz besondere Herausforderung, denn Grafiken bilden im Web einen Großteil der übertragenen Daten, und es gibt bisher noch keine wirklich funktionierende Lösung für responsive Grafiken im HTML. 2010 wurde das responsive Webdesign entwickelt, und die "picture"-Spezifikation ist der vorläufige Endpunkt auf der Suche nach Antworten auf dieses Problem. Im Grunde sind sich alle einig, dass es keine gute Idee ist, all diesen verschiedenen Geräten, auf denen das Web dargestellt wird, eine und dieselbe Grafik zu schicken. So gab es diverse Vorschläge, dieses Problem zu lösen, aber keiner dieser Vorschläge hat sich wirklich auf breiter Form durchgesetzt. Ende 2013 gab es in kurzer Folge zwei bemerkenswerte Blogbeiträge von an der Diskussion beteiligten Entwicklern. Zunächst einmal ist hier HTML 5 Doctor Bruce Lawson, der Mitte November 2013 schrieb, dass sein Vorschlag von zwei Jahre vorher hier gemacht, das "picture"-Element letztlich abgelehnt wurde von den Browser-Herstellern. Da gab es ein Meeting in Paris, und das Fazit war, "So, once again, impasse." Ein Patt, und er sagt, wir müssen es noch doller, noch härter probieren, hier "must try harder". Das ist ein eher trauriges Zwischenfazit im November 2013, wenige Wochen später, im Dezember, schreibt dann Entwicklerkollege Mat Marquis von der Filament Group, dass hier die Sache sich zum Guten gewendet hat, denn alle Browser-Hersteller, Mozilla, Blink, WebKit, Opera und so weiter, sind sich einig, dass eine leicht überarbeitete Version des "picture"-Elements eine gute Grundlage bildet. Die Responsive Images Community Group, ein Zusammenschluss von Entwicklern, die versuchen, da Lösungen zu finden, und die mit dem W3C und der WHATWG zusammenarbeiten, kamen dann mit zwei Lösungen. Zum Einen das "picture"-Element. Hier ist ein Beispiel-Picture, und so weiter und sofort. "What are the 'srcset' and 'sizes' attributes?", also neue Attribute, "srcset" und "sizes", das könnte dann in etwa so aussehen. Bei den Standardisierungsgremien, beim W3C, ist es Teil von HTML 5.1 im Kapitel zum "Embedded content", eingebetteter Inhalt, mehr oder weniger Synonym für Multimedia, Bilder, Audio und so weiter. Bei der WHATWG sehen Sie das hier auch im Kapitel zu "Embedded content" "picture element" und "img element" mit neuen Attributen. Es gibt, wie gesagt, im Grunde genommen, zwei Vorschläge, die sich ergänzen. Die "picture"-Spezifikation definiert diese Vorschläge, aber, im Grunde genommen, erweitern beide das gute alte "image"-Element. Im ersten Vorschlag gibt es "<img"-Element plus neue Attribute, wie schon erwähnt, "srcset" und "sizes". Im zweiten Vorschlag gibt es "<img"-Element plus neue Elemente und neue Attribute drum herum. Das sieht dann im Schema so aus: "picture" als neues Element, "source" als neues Element, und neue Attribute hier, aber im Kern bleibt nach wie vor das gute alte "image". Dieses "image"-Element wird auch nach wie vor verwendet, um die Grafik darzustellen. Das ganze Drumherum dient nur dazu, dass der Browser herausfinden kann, welche Grafik ist ideal geeignet für die Darstellung auf dem Gerät, auf dem er gerade läuft. Aber die Grafik wird nach wie vor dargestellt vom "image"-Element mit dem "source"-Attribute und einem "alt"-Text. Es gibt insgesamt vier Anwendungsfälle, "used cases", die unterschieden werden bei den Problemen rund um responsive Grafiken. Nummer eins ist unterschiedliche Pixeldichte von Bildschirmen. Das heißt also, dass Bildschirme unterschiedlich viele Pixel auf derselben Fläche haben. Für normale und hochauflösende Bildschirme sollen jeweils passende Grafiken ausgeliefert werden. Auf nicht responsiven Webseiten ist es das größte Problem. Unterschiedliche Viewport-Breite ist der zweite Anwendungsfall. Das heißt, dass im HTML je nach Browserfenstergröße unterschiedliche Grafiken ausgeliefert werden können. Nummer drei nennt dich Artdirection, unterschiedliche Bildmotive, auf Deutsch könnte man das so nennen. Je nach Browserumgebung sollen unterschiedliche Bildausschnitte, oder auch ganz andere Bilder geschickt werden. Ein bisschen ein Sonderfall, unterschiedliche Dateiformate, es gibt neue Grafikformate in der Entwicklung, die besser komprimieren als JPEG oder PNG. Die sollen dann auch getrennt ausgeliefert werden, an Browser, die die bereits verstehen. Diese vier Anwendungsfälle, Sie sehen, die trennen sich ein bisschen von der Lösung her, "img" und "srcset" ist für die ersten beiden Anwendungsfälle die ideale Lösung. Das "picture"-Element mit allem drum und dran für Nummer drei und vier, so ergänzen sich die Lösungen für die Anwendungsfälle. Am Ende wird hoffentlich alles gut.

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)
Tipps vom Meister
Sascha T.
In gewohnt guter Manier versteht es Herr Müller Sachverhalte gut und verständlich zu erklären. Ein Video-Tut nicht nur für Newebees. Sehr empfehlenswert.
 

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!