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

Grafiken nach Viewportbreite auswählen: <img> und srcset w

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Autor der Webseite sagt dem Browser mit dem Attribut srcset und einem w-Wert (für width), wie breit die Grafiken sind. Der Browser wählt dann je nach Viewportbreite die entsprechende Grafik aus.

Transkript

Um einem Browser zu sagen, dass er je nach Viewportbreite eine bestimmte Grafik anzeigen soll, nimmt man das "img"-Element und das neue Attribut "srcset" mit einem sogenannten "w"-Wert. Tausche x gegen w könnte man sagen. In der Syntax sieht das Ganze etwa so aus: img, src, alt, wie gewohnt, srcset. Ich habe hier noch eine 4. Grafik hinzugenommen: small, medium, large und xlarge. Hier hinter steht jetzt: leerstelle 400w, 800w, 1600w und 3200w. Das "w" steht für "width", für Breite, und es sagt dem Browser, vorausgesetzt, er versteht diese Syntax, wie breit diese Datei in Pixel ist. Ohne, dass er sie extra herunterladen muss. Der Browser weiß also hierdurch, dass small.jpg 400 Pixel breit ist, medium.jpg 800 und so weiter. Der w-Wert gibt die Breite der Grafikdatei in Pixel an. Der Autor weiß das, weil er hat die Grafiken vorbereitet. Small, medium 800, 1600 und xlarge 3200. Er teilt das dem Browser mit. Im Editor sieht das so aus. Er hat hier small.jpg und medium.jpg, large und xlarge jeweils hinten dran hier. src small.jpg, mit dem alt-Text. Das Ganze bekommt der Browser. Wenn er die Syntax versteht, kann er damit etwas anfangen. Wenn der Browser die Information bekommt, dann kann er so agieren, dass er bei einem Viewport von 600 Pixel, also als 400px, nimmt er die medium.jpg. small.jpg reicht nicht, nur 400px breit. Der Viewport ist 600px breit. Die Grafik soll über die ganze Breite laufen. Also nimmt er automatisch medium. Bei einem noch größeren Viewport nimmt er dann die nächst größere Datei, oberhalb von 800px, reicht medium nicht mehr mit 800w, das ist hier sehr schön zu sehen. Der Browser weiß, der Viewport ist 817px breit. Also nehme ich large.jpg, das ist 1600 breit. Das ist besser als hier medium. Im Editor sieht das so aus. Jetzt kommen wir in den Browser live. Dort sehen Sie hier "Opera". Der versteht diese Syntax. Unten habe ich Element untersuchen aufgerufen. Hier sehen Sie die vier Grafikdateien im Angebot für den Browser: 400w, 800w, 1600w und 3200w. Dadurch, dass ich unten den Inspektor aufgerufen habe, wird oben rechts angezeigt, wie breit der Viewport ist. Sie sehen, da wird etwas verkleinert. Jetzt gehe ich runter auf 800px. Jetzt kommen wir in die Nähe. Da sehen Sie ist der Sprung von large zu medium. Da sagt der Browser: bis 800px reicht mir diese medium.jpg und darüber muss ich die large.jpg laden. So erreicht man nur im HTML hier schon, dass der Browser andere Grafiken lädt. Opera kann übrigens kleiner als 488 nicht. Small können wir also nicht ausprobieren. Aber das ist schon mal ein echter Fortschritt gegenüber immer nur die große Grafik laden. Ein Blick auf die vier Fragen, die der Browser hat, bevor er vernünftig mit responsiven Grafiken umgehen kann. Sie sehen, die dritte Frage ist jetzt beantwortet: der Autor der Webseite weiß, wie breit die Grafikdatei ist. Er sieht hier ein ja, das weiß ich. Und er teilt es dem Browser mit durch das Attribut "src set" mit dem "w"-Wert, und dann kann der Browser entsprechend agieren.

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!