Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Webdesign – Grundlagen

Responsive Images – srcset

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um das Problem mit den responsiven Bildern hat sich eine eigene Arbeitsgruppe gekümmert und neue Attribute für HTML-Bilder definiert. Zu den wichtigsten gehören srcset und sizes.

Transkript

Eine eigene Arbeitsgruppe hat sich mit dem Thema Responsive Bilder beschäftigt und die Lösung besteht im Einsatz zusätzlicher Attribute und Elemente. Am wichtigsten sind srcset und sizes. Sehen wir uns an was es da mit auf sich hat. Folgende Situation: ich habe zwei verschiedene Bilder. Und ich möchte gerne, dass der Browser jeweils das Richtige auswählt. Die Bilder unterscheiden sich in ihrer Größe. Wie funktioniert das jetzt mit den responsiven Bildern? Ich habe ein img-Element und habe ganz normal ein src-Attribut. Neu ist das srcset-Attribut. Da können Sie mehrere Quellen angeben. Hier, meine Pfade zu den Bildern. Das eine ist 400 Pixel breit. Ich lasse das über placehold.it machen. Da sehe ich dann auch immer die Größe des Bildes und ob alles geklappt hat. Und das andere ist 800 Pixel breit. Die Größe muss ich dem Browser auch mitteilen, damit der Browser ermitteln kann welches das richtige Bild ist. Außerdem habe ich sizes angegeben. Das gibt dem Browser einen Hinweis, wie groß das Bild im Layout benötigt wird. Mit 100vw ist es bildschirmfüllend in der Breite. Sehen wir uns das im Browser an. Ich rufe das im Firefox auf. Jetzt zeigt er das große Bild an: 800x300. Verkleinere ich einmal und noch ein bisschen, so. Und an dieser Stelle wählt er das kleinere Bild, nämlich 400x150. Damit das funktioniert, müssen Sie im Firefox immer das aktualisieren. Aber das ist ja kein Problem, wenn man es dann wirklich beim echten Projekt hat, weil dann die Nutzer das ja nicht ausprobieren, sondern direkt eben das richtige Bild geliefert bekommen. Nicht immer sind die Fälle so einfach, dass das Bild immer bildschirmfüllend angezeigt werden soll. Es kann ja auch sein, dass ich ein Layout habe, was ich bei viel Platz zweispaltig habe oder sogar noch mehrspaltiger und bei wenig Platz einspaltig. Schauen wir uns mal das Beispiel an, ohne auf das Bild zu achten. Dazu komme ich gleich. Also, wir sehen zweispaltig und einspaltig. Und je nachdem, ob ich jetzt die zweispaltige oder die einspaltige Variante habe, werden natürlich auch unterschiedliche Bilder benötigt. Und das muss ich dem Browser angeben. Und dafür gibt es das sizes-Attribut. Schauen wir vielleicht am Anfang. Sehen Sie, dass über eine Media Query ausgelöst wird, dass ab einer bestimmten verfügbaren Breite die Elemente nebeneinander dargestellt werden sollen. Diese Angabe dopple ich bei sizes und sage dem Browser: "Also, lieber Browser, bei einer Mindestbreite von 40em ist mein Bild halb so breit wie der Viewport und sonst ist es so breit wie der Viewport". Und dann gebe ich ihm bei srcset wieder an welche Bilder zur Verfügung stehen. Und dahinter steht über so genannte Deskriptoren immer wie breit die wirklich sind. Und damit kann der Browser je nach Situation das richtige Bild ermitteln. Wenn wir das so ganz groß machen, muss immer aktualisieren, dann ist es diese 600x300. Wenn ich jetzt zweispaltig bin, aber kleiner, irgendwann ist 400 das Richtige. Und wenn ich es noch kleiner mache, gibt es natürlich ein Moment, wo trotzdem dieses Bild mit 600 Breite das Richtige ist. Und wenn ich es wieder kleiner mache, wird es irgendwann das 400 sein. Sie sehen in diesem Fall ist es auch komplexer welches Bild jeweils das Richtige ist. Es ist nicht automatisch so, dass bei einem kleinen Viewport das kleine Bild benötigt wird und bei einem größeren Viewport das größere, weil es ja eben auch sein kann wie im Beispiel, dass das Layout sich ändert. Sehen wir uns noch einmal die Neuerungen an bei den Attributen. Es gibt srcset für mehrere Quellen. Und mit Hilfe von Deskriptoren wird angegeben was das Richtige ist. sizes brauchen Sie, wenn die Bildgröße je nach Layout variiert. Sie sehen ein kleines Beispiel mit sizes, wo ich Angaben zum Layout gemacht habe und srcset meine verschiedenen Bilder. Das was hinter srcset jeweils angegeben ist, ist ein so genannter Deskriptor. Da können Sie w nehmen wie in unseren Beispielen für die Breite der Bilddatei. Außerdem können Sie über x auch noch auf die Auflösung des Bildschirms reagieren. Und 2x wäre beispielsweise dann das Richtige für einen hochauflösenden Bildschirm.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!