Responsive Grafiken mit HTML

Das Attribut sizes kann Media Queries enthalten

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Attribut sizes kann Media Queries enthalten, sodass der Browser je nach Viewportbreite andere Grafiken laden kann. Für responsive Grafiken per HTML benötigen Sie also das <img>-Element und die neuen Attribute srcset w und sizes.

Transkript

Das Attribut "sizes" kann natürlich nicht nur den Standardwert "100vw" enthalten, sondern zusätzlich auch Media Queries. Hier ein Beispiel: "sizes" und die Viewportbreite, ein "image"-Element, das immer größer wird mit der Zeit. "source" und "alt" wie gehabt, das kennen Sie aus HTML-Einführungen. Dann "srcset" - ein neues Attribut, hier mit vier Grafiken: 400w, 800w, 1.600w und 3.200. Das w gibt die Breite, die Width der Grafik an, sodass der Browser sie nicht herunterladen muss. Jetzt kommt "sizes". 100vw ist der Standardwert, "viewportwidth" die Breite des Viewports in Prozent, 100 Prozent ist also die volle Breite. So, und jetzt kann man eine Media Query in Klammern dazusetzen wie zum Beispiel min-width: 600px, und dann sagen 50vw, also die halbe Viewportbreite. Das heißt dann frei übersetzt hier: Mache das Bild so breit, dass es 100% des Viewports in Anspruch nimmt, es sei denn, der Viewport ist mindestens 600 Pixel breit, dann reichen 50 Prozent des Viewports. Das heißt, diese Anweisung also übersetzt. Das ist der Layoutwunsch des Autors dieser Webseite: 100 Prozent volle Viewportbreite, aber oberhalb von 600 Pixel wird das Bild dann ein bisschen dominant und dann geht es halt runter auf 50 Prozent. Dem steht folgende Rechnung zu Buche hier: "srcset w" und "sizes" zusammen mit einer Media Query, hier oben ist das noch mal aufgeführt, das wird dann so gerechnet: Die Viewportbreite hier in dem Screenshot ist 575 Pixel. Das heißt also, die Media Query ist nicht erfüllt, die DPR des Bildschirms ist 1, das schreibe ich einfach mal so dazu. 100vw sind also in diesem Falle 575 Pixel. Das heißt 100 Prozent sind 575 Pixel bei DPR 1, also nimmt der Browser die "medium.jpg" die 800 Pixel breit ist, die reicht in diesem Falle aus. Und noch ein Rechenbeispiel: Der Viewport ist 613 Pixel, dieselbe Media Query im Attribut "sizes" hier oben. In diesem Falle wird gesagt: Viewport, 600 Pixel, ist größer, DPR ist immer noch 1, die Media Query ist erfüllt. Also in diesem speziellen Fall würde er sagen: 50 Prozent, das sind 306.5 Pixel, also wahrscheinlich 307. Dazu reicht ihm aber die "small.jpg" aus, die 400 Pixel breit ist. Das heißt also, Sie haben hier den Fall, und das möchte ich Ihnen gleich im Browser auch live zeigen, dass die "medium.jpg" hier genommen wird, wenn nichts gesagt wird, wenn die Media Query nicht erfüllt ist. Ich zeige noch mal eben hier im Quelltext, da ist die Media Query min-width 650vw. So, und wenn jetzt hier das Ganze kleiner wird, dann sehen Sie: - da müssen wir noch ein bisschen kleiner werden - So. "small" reicht aus und unterhalb von 600 Pixel sehen Sie hier: Da ist der Sprung, "medium" reicht für 100vw und oberhalb von 600 Pixel sollen es 50 Prozent des Viewports sein und dann reicht "small" aus. Das ist also diese Media Query in Aktion. So, und jetzt noch eben natürlich zeigen, dass die Pixeldichte hier schon wieder enthalten ist. Einmal neu laden. Sie sehen hier: "large" reicht, wenn ich das im Querformat habe. 50% des Viewports, denn das ist größer als 600 Pixel. Da reicht "large", denn 50%, das sind von 1024, das sind 512 mal 2, wegen der DPR 2, das sind 1024, das reicht dicke und auch im Hochformat. Hier neu laden, da gibt es "medium", denn 768, davon die Hälfte, das sind 384, das doppelt, das ist auf jeden Fall unter 800, deswegen reicht "medium" hier aus. So, das ist also "sizes" mit Media Query in Aktion, und wenn Ihnen jetzt langsam der Kopf schwirrt, dann ist es schön zu wissen, dass Sie nicht der Einzige sind, sondern auch Webdesign-Koryphäen wie hier Andy Clarke, auch bekannt als Malarkey, das ist sein Benutzername bei Twitter und seine Website allthatmalarkey, der hat im April 2014, nachdem er das erste Mal da hereingeguckt hat in diese "srcset"- und "sizes"-Attribut-Geschichte, folgenden Tweet hier abgelassen: "Looked at the responsive images srcset & sizes attributes for the first time. Blimey, it's complicated." Ganz schön kompliziert der Kram. Damit Sie sich das live angucken können, das ist die Adresse: https://twitter.com/malarkey/status/ 458336077934522368 ist die Statusnummer dieses Tweets. Man gewöhnt sich dran. So schlimm ist es gar nicht, aber es ist ein bisschen rechnen und ein bisschen Denken am Anfang, aber irgendwann wird es dafür komfortablere Werkzeuge geben, die uns das Leben leichter machen.

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!