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

Mit dem <picture>-Element Viewportbreite und Pixeldichte berücksichtigen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Je ausgefeilter die Wünsche des Art Director sind, desto aufwendiger wird die Umsetzung. In diesem Film werden Viewportbreite und Pixeldichte abgefragt.

Transkript

Mit dem Element "picture" kann man natürlich nicht nur Art Direction machen, sondern auch noch die anderen Anwendungsfälle berücksichtigen und ich möchte Ihnen jetzt zeigen, wie man also ein anderes Bildmotiv ausliefert und dabei auch noch die Pixeldichte der Bildschirme berücksichtigt. <picture geht es los und ganz unten wird es aufhören mit "/picture", dann kommt <source media="(min-width:600px)", also wieder bei einer minimalen Breite von 600 Pixeln des Viewports kommt jetzt hier "medium.jpg 1x" und "large.jpg 2x" im "srcset"-Attribut. Das bedeutet: Bei traditionellen Bildschirmen wird die "medium" genommen, und bei Bildschirmen mit doppelter Pixeldichte kommt die "large.jpg". Sie können sich vorstellen: Wenn man auch noch dreifache Pixeldichte berücksichtigt, braucht man eine Menge Grafiken. "srcset" ohne Media Query, also unterhalb von 600 in diesem Fall, wird dann der Ausschnitt genommen und wir brauchen dann noch einen "medium"-Ausschnitt für die doppelte Pixeldichte und als Fallback wieder für Browser, die das alles nicht begreifen, ein ganz normales "small.jpg" und "/picture" hintendran. Ein kurzer Blick auf die benötigten Grafiken. "small"... Die sind optimiert von der Größe her. "small-ausschnitt", "medium", "medium-ausschnitt" bei 800 Breite und dann haben wir noch "large" mit 1600 und "xlarge" für die ganz hohen Auflösungen. Sie sehen, es werden immer mehr Grafiken. Je mehr Wünsche man hat als Art Director, desto aufwändiger wird es, diese Wünsche umzusetzen. Im Editor ganz kurz hier sehen Sie: Da haben wir <picture <source media="(min-width:600px)" und die entsprechenden Grafiken, die dargestellt werden. Und jetzt rüber in den Browser. Hier sehen Sie 600 Pixel. Größer, also wird "medium" genommen. Sie sehen jetzt hier "Element untersuchen" unten drunter. So. Da haben wir den Quelltext. Picture Source (min-width:600px), medium. Man könnte auch noch eine Media Query darübersetzen, wenn es über 1000 Pixel wird, dann soll er "large" und "xlarge" nehmen. Nach oben gibt es da kaum Grenzen, wie man das verfeinern kann. So, jetzt geht es hier aber erstmal konkret weiter. Wenn ich das jetzt verkleinere, dann kommt hier wie üblich wieder der "small-ausschnitt". Ich mach das mal wieder größer. Jetzt kommt die doppelte Pixeldichte. Ich emuliere hier wieder und selektiere mal das übliche iPad 3 und 4. Einmal neu laden und Sie sehen: Sie haben hier "large". Die Viewport-Breite ist 1024 und noch einmal wieder anzeigen. Also ist größer als "min-width:600". Bei doppelter Pixeldichte wird "large" genommen auf einem iPad. So, jetzt wird es spannend, wenn wir das mal ein bisschen reduzieren. Ich gehe mal auf ein iPhone 5. Einmal wieder neu laden und unten nochmal wieder anzeigen. So. Und jetzt sehen Sie hier "medium-ausschnitt". Das wird also genommen unterhalb von 600 Pixel. Ich gehe hier mal auf 568, dann können wir das besser erkennen. So. Es ist unterhalb von 600. 568. Und doppelte Pixeldichte, Retina-Bildschirm, also wird "medium-ausschnitt" genommen. Sie sehen: Der Browser hat schon eine ganze Menge zu berücksichtigen dabei. Einmal noch im Überblick. Hier sehen Sie: iPad 4 im Querformat wird "large" genommen, denn wir haben eine Viewport-Breite von 1024 Pixeln, DPR von 2, also wird "large" genommen, hier unten ist das zu sehen. Bei einem Smartphone, iPhone 5 im Querformat hier als Beispiel, sehen Sie: Viewportbreite 568, DPR von 2 und es wird entsprechend "medium-ausschnitt" genommen, weil es kleiner ist als 600 Pixel.

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!