Responsive Grafiken mit HTML

Responsive Grafiken: Pixeldichte, Viewportbreite, Bildbreite und Darstellungsbreite

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Browser benötigt zur optimalen Darstellung von responsiven Grafiken Informationen zu Pixeldichte, Viewportbreite, Bildbreite und Darstellungsbreite. Browser und Autor der Webseite ergänzen sich dabei perfekt.

Transkript

Der zweite Anwendungsfall, da geht es um unterschiedliche Viewportbreiten. Das ist also ein typisch responsiver Anwendungsfall. Die unterschiedlichen Größen des Browserfensters werden dabei berücksichtigt. Der Untertitel "Der W-Faktor" deutet bereits an, dass hier ein w-Wert eine Rolle spielen will. Es geht nach wie vor mit dem <img-Element zu Werke hier, das neue Attribut "srcset" in einer Variante mit einem w-Wert, und es wird bei unterschiedlichen Viewportbreiten ein Attribut namens "sizes" eine Rolle spielen. Zunächst ein kurzer Blick auf vier Fragen für den Browser. Der Browser braucht Antworten auf vier Fragen, damit er responsive Grafiken wirklich gut darstellen kann. Die erste Frage ist die nach der Pixeldichte des Bildschirms. Das ist für den Browser nicht sonderlich schwierig; das weiß er. Die zweite Frage ist die nach der Breite des Viewports, also: Wie breit ist das Browserfenster im Augenblick? Denn davon hängt ja auch ab, wie groß die Grafik dargestellt werden soll. Die dritte Frage: Wie breit ist die Grafikdatei in Pixel, also die Bildgröße, genau genommen? Und das weiß der Browser nicht so ohne weiteres, jedenfalls nicht, bevor er die Grafikdatei heruntergeladen hat. Und das wollen wir ja gerade vermeiden, dass er nicht alle Grafiken herunterladen muss, um dann zu gucken: Welche ist die Beste? Weil, dann spielt es eigentlich auch keine Rolle mehr, dann könnte er gleich die größte nehmen. Und Frage numero vier ist: Wie breit soll dieses Bild auf der Webseite dargestellt werden? Das sind die vier Fragen, und der Browser hat Antworten auf einen Teil davon. Im Überblick sehen wir das hier so: In der ersten Spalte, die erste Frage, die Pixeldichte des Bildschirms. Der Autor der Webseite weiß darüber überhaupt gar nichts, auf welchem Gerät seine Webseite dargestellt wird, also ein "nein". Der Browser hingegen weiß das. Die Breite des Viewports, auch da muss der Autor der Webseite passen, denn er weiß nichts darüber, wo seine von ihm erstellte Webseite überall dargestellt wird. Der Browser hingegen weiß natürlich, wie groß sein Fenster ist und der darin enthaltene Viewport. Die Breite der Grafikdatei, das weiß hingegen der Autor der Webseite, der hat die Grafik ja zusammengeschnippelt und auf der Seite eingebunden im Quelltext. Der Browser weiß das erst, wenn er die Grafik heruntergeladen hat. Und zu guter Letzt die letzte Frage: Wie breit soll die Grafik dargestellt werden? Der Autor der Seite hat ja das Layout entworfen, der hat eine Vorstellung davon, wie breit die Grafik sein soll. Der Browser hingegen weiß das nicht. Es gibt ja die Attribute "width" und "height" nicht mehr, und von daher muss er erst die Seite darstellen und weiß dann, wie breit die Grafik sein soll. Wenn man sich das jetzt aber im Überblick anguckt, dann sieht man, dass sich der Autor der Webseite und der Browser eigentlich perfekt ergänzen. Die ersten beiden Fragen kann der Browser beantworten, Frage 3 und 4 kann der Autor der Webseite beantworten. Und jetzt geht es nur noch darum: wie kann der Autor der Webseite dem Browser mitteilen, wie breit die Grafikdatei ist und wie breit sie dargestellt werden soll? Das sind die beiden Dinge, um die es bei responsiven Grafiken in erster Linie geht.

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!