Responsive Grafiken mit HTML

Mit dem <picture>-Element ein anderes Bild für schmale Viewports ausliefern

29,95
Mit dem <picture>-Element kann der Autor einer Webseite per Media Query unterschiedliche Bilder ausliefern. Im Beispiel wird unterhalb von 600px Viewportbreite statt des vollständigen Bildes ein Bildausschnitt serviert.

Ich möchte Ihnen nun an einem konkreten Beispiel zeigen, wie das mit der Art Direction mit den unterschiedlichen Bildmotiven funktioniert, sodass in einem breiten Viewport das komplette Bild zu sehen ist, hier, und in einem schmaleren Viewport ein Bildausschnitt. Sie sehen hier das Calem. Das finden Sie hier wieder, das ist also etwa hier dieser Ausschnitt, der dann gezeigt werden soll, wenn das Browserfenster zu schmal wird. Dazu brauchen Sie natürlich erst einmal die entsprechenden Grafiken. Sie sehen hier "small.jpg" im Überblick mit der Anmerkung "small" und "small-ausschnitt" in einem schönen Sprachengemisch. "small-crop" könnte man das nennen, oder "kleiner-ausschnitt". 57 Kilobyte ist es hier. Diese beiden Grafiken liegen bereit und werden in dieser Datei erst einmal gezeigt. So. Und jetzt erst nochmal zurück. Hier in PowerPoint ein Schema. Der Syntax. <picture geht los und <picture hört unten wieder auf. Zwischendurch kommt <source mit einer Media Query. In Klammern wie gewohnt: (min-width:600px) als Beispiel. Natürlich kann man hier auch andere Zahlen oder em-Werte nehmen. Also bei 600 Pixeln soll etwas passieren, und zwar soll dann "srcset" die "medium.jpg" genommen werden. Also, wenn das Browserfenster mindestens 600 Pixel breit ist, nimm Medium. "source srcset", also ohne Bedingung: Wenn es kleiner ist als das, dann soll die "small-ausschnitt" genommen werden. Und als Fallback-Grafik haben wir noch "small", insgesamt genommen, die also einfach den Überblick zeigt für Browser, die das gar nicht verstehen. Am Ende natürlich </picture, rüber in den Editor. Hier sehen Sie das Ganze einmal mit Syntaxeinfärbung. Genau dasselbe. "small", "small.jpg" und so weiter. Kommen wir zu einem Browser, der das Ganze versteht, nämlich zu Opera und sehen jetzt hier was gleich passiert, wenn ich hier den Viewport etwas verkleinere. Vorher mach ich auch hier noch eben den Quelltext sichtbar und Sie sehen hier das "picture"-Element, was gerade hier eingebaut wurde. So, und jetzt wird der Viewport verkleinert. Sie sehen hier: Oben rechts ist die Pixelanzeige. Wir nähern uns der 600-Pixel-Grenze. Trommelwirbel kommt und - "small-ausschnitt". Das heißt, ich gehe nochmal wieder zurück. Hier sehen Sie genau bei 600 Pixel wird der Sprung gemacht. Sobald da 600 ist. "min-width", also da gibt's noch das Große. Bei 599 gibt's das kleine Bild. Der Browser hat also keinerlei Spielraum, sondern wird hier quasi - ja, genötigt ist ein starkes Wort - aber der Browser wird quasi dazu angeleitet, die Grafik zu nehmen, entsprechend der Media Query. Sobald die Media Query zutrifft, hört er auf zu lesen und stellt das Bild dar. Das heißt, die Reihenfolge ist wichtig. Wenn wir das umdrehen würden, dann würde er immer nur noch das kleine Bild darstellen. So, im Überblick hier einmal: "Unterschiedliche Bildmotive (art direction)" Kleiner als 600 Pixel wird der Ausschnitt gezeigt. Sie sehen hier 488 als Beispiel und unten den Quelltext. Und größer als 599, also ab 600 Pixel wird das komplette Bild angezeigt. Das sehen Sie hier. Und damit ist der Autor der Webseite jetzt in der Kontrolle. Ob das nun eine gute Idee ist, dass der Browser hier nur noch ausführendes Organ ist, das sei dahingestellt, aber "picture" gibt die Möglichkeit für den Autoren, zu kontrollieren, welches Bild dargestellt werden 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!