Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Grafiken mit HTML

Das Element <picture> ermöglicht "art direction"

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Neben <img>, srcset w und sizes gibt es noch das <picture>-Element, das dem Autor der Webseite mit Media Queries die Kontrolle darüber ermöglicht, welche Grafik dargestellt wird.

Transkript

Mit responsiven Grafiken per HTML ist es auch möglich, nicht nur dieselbe Grafik in verschiedenen Versionen oder Auflösungen zu servieren, sondern ganz unterschiedliche Bildmotive auszuliefern. Dabei spricht man von Art Direction, von künstlerischer Leitung. Der Director ist der Regisseur und dazu benötigen Sie die neuen Elemente <picture, <source, sowie Attribute wie "media" und "srcset". In der Responsive Images Community Group - das ist die treibende Kraft hinter der Picture-Spezifikation, in der all diese Elemente und Attribute definiert werden - gibt es gleich auf der Startseite hier ein Beispiel für Art Direction. Dort sehen Sie hier diesen wunderhübschen Pudel vor einem Schloss und einem Rosengarten. Hier etwas kleiner. Der Ausschnitt ist kleiner und auf dem Handy sehen Sie nur noch den Kopf des Pudels. Das sind also unterschiedliche Bildausschnitte, unterschiedliche Bildmotive, die mit dem <picture-Element serviert werden. Sie sehen hier die beiden großen unterschiedlichen Herangehensweisen. Zum Einen die Attribute "srcset" und "sizes", zusammen mit dem <img-Element. Kennzeichen hierfür sind, dass die "srcset"- und "sizes"-Attribute das <img-Element erweitern und zusätzlich hier einen Satz von Grafiken zur Auswahl stellen. Der Browser nimmt die Informationen, die hier in "srcset" und "sizes" vom Autoren der Website gegeben werden, also die w-Werte für die Breite der Grafik und die vw-Werte für die gewünschte Darstellungsbreite. Der Browser nimmt also diese Informationen und wählt dann die beste Grafik aus. Also der Browser entscheidet in dieser Variante. Jetzt gehen wir etwas rüber nach links zum <picture-Element. Art Direction - künstlerische Leitung. Der Autor der Website ist der Regisseur. Und Sie sehen hier: Das <picture-Element, wird hier gesagt, erlaubt es den Entwicklern, den Autoren der Seite, mehrere Quelldateien für eine Grafik anzugeben. By using media queries - also durch Media Querys, ist es den Entwicklern möglich zu kontrollieren, welche Bilder dem Benutzer gezeigt werden. Das heißt, der große Unterschied zwischen diesen beiden Herangehensweisen: Bei <img, "srcset" und "sizes" entscheidet der Browser. Der Autor gibt nur Informationen. Beim <picture-Element hingegen entscheidet und kontrolliert der Autor der Webseite. Der Browser ist eigentlich nur ausführendes Organ, wenn man das so nennen möchte. Deswegen nennt man diesen Use Case auch Art Direction. Der artist, der Künstler, der Autor entscheidet. Das sieht dann zum Beispiel so aus. Ein breiter Viewport. Da wird das komplette Bild gezeigt. Bei einem schmalen Viewport sieht man einen Bildausschnitt. Das Muster, das Schema für <picture sieht in etwa so aus. Es gibt natürlich mehrere Varianten, aber dieses ist ein mögliches Schema. <picture ganz oben, und </picture ganz unten. Das <picture-Element ist ein "Wrapper", das umgibt hier die anderen Elemente. Dann kommt <source, das neue Element mit den Attributen "media" und "srcset". Da gibt es noch mehr, aber für den Anfang reichen die beiden. "source media" ist optional, da kann auch nur "srcset" stehen. Und <img, das bekannte <img-Element mit "src" und "alt". Der Browser arbeitet hier der Reihe nach von oben nach unten diese Angaben ab und bei der ersten zutreffenden Bedingung hört er auf zu lesen, nimmt die Grafik, die passt und setzt sie hier bei "src" rein um das Bild darzustellen. Das ist also die Vorgehensweise des Browsers bei <picture. Das heißt: Wenn Sie hier mehrere Media Querys haben, ist die Reihenfolge durchaus wichtig. <picture mit den Kind-Elementen <source und <img steht immer ganz am Ende hier und <source kann verschiedene Attribute haben. Der springende Punkt bei der Sache ist: Damit kontrolliert der Autor der Webseite, welches Bild der Browser darstellen soll.

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!