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

Die gewünschte Darstellungsbreite: das Attribut sizes

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Attribut sizes gibt die gewünschte Darstellungsbreite der Grafik an. Fehlt es, geht der Browser vom Standardwert "100vw" aus, also der vollen Breite des Viewport.

Transkript

Das Attribut "sizes" gibt dem Browser an, in welcher Breite die Grafik dargestellt werden soll. Also die Darstellungsbreite für die Grafik, die gewünschte Darstellungsbreite, dazu gibt es das Attribut "sizes". Die Tabelle mit den vier Fragen hat bis jetzt drei Antworten. Der Browser kennt die Pixeldichte des Bildschirms. Der Browser kennt die Breite des Viewports und der Browser kennt die Breite der Grafikdatei. Die teilt ihm der Autor der Webseite mit, und zwar mit dem Attribut "srcset" und einem w-Wert wie 400w. Damit sagt er: Die Grafik ist 400 Pixel breit. Das "w" steht für Width. Jetzt geht es hier weiter. Die gewünschte Darstellungsbreite kennt der Browser noch nicht. Der Browser weiß zwar, wie breit die Grafik ist, aber er weiß noch nicht, wie breit sie dargestellt werden soll, und deshalb geht er davon aus, dass das über die gesamte Viewportbreite gehen soll. Er berechnet das also so, dass die Grafik passt, wenn sie über den gesamten Viewport gehen würde. Dabei schreibt er intern ein neues Attribut für sich dazu, nämlich das bereits erwähnte "sizes". Das sieht dann im Überblick so aus. Sie sehen hier wieder <img mit "src" und "alt" wie immer. Dann "srcset" mit den vier vorbereiteten Grafiken und mit dem w-Wert wird mitgeteilt, wie breit die Grafik ist. Der Browser weiß das also, ohne dass er die Grafiken herunterladen muss. Dann schreibt er für sich intern sizes="100vw" hinzu. Sie haben richtig gelesen: "vw". Das hat nichts mit dem Auto zu tun, sondern gemeint ist hiermit die Einheit "Viewport Width". Die gibt es schon länger, die ist aber bis jetzt sehr, sehr selten gebraucht worden und die Standardangabe "100vw" heißt also 100% der Viewport Width, der Viewportbreite, oder anders ausgedrückt: Volle Viewportbreite. Der Browser sagt also: "Wenn hier "srcset" steht und da ist ein w-Wert mit drin in irgendeiner Form, dann muss auch irgendwo das Attribut "sizes" auftauchen." Wenn dieses Attribut nicht auftaucht, dann denkt er es sich und nimmt den Standardwert von 100vw, also die volle Viewportbreite. Da kann der Autor natürlich auch was anderes hinschreiben, aber wenn da nichts steht, geht der Browser davon aus. Das heißt, die komplette Tabelle, vier Fragen und vier Antworten würde jetzt so aussehen. Die Breite der Grafikdatei teilt der Autor der Webseite dem Browser mit, mit "srcset" und w-Wert und die gewünschte Darstellungsbreite teilt er ihm auch mit, mit dem Attribut "sizes" mit einem vw-Wert, Viewport Width, und das heißt einfach nur Width, das "w" hier oben und wenn der Autor nachlässig ist oder keine Lust hat oder es selber nicht weiß, dann geht der Browser davon aus, dass wenn "sizes" fehlt, dann nimmt er 100vw als Standardwert. Der Browser hat also jetzt Antworten auf alle vier Fragen, die er braucht, um responsive Grafiken optimal darzustellen.

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!