Skip to content

Latest commit

 

History

History
57 lines (38 loc) · 2.93 KB

uebung_08.md

File metadata and controls

57 lines (38 loc) · 2.93 KB

Übung 8

Erweitere deine Slideshow um Responsive Images mit srcset und <picture>

Anweisung

Deine Slideshow aus Übung 6 soll verbessert werden, indem die Bilder den Ausgabegeräten angepasst werden. Untersuche dafür, in welchen wirklichen Größen deine Seite die Bilder anzeigt. Du brauchst diese Information, um sie im sizes-Attribut anzugeben. Nur so kann der Browser aus einer Liste möglicher Bilddateien die passende auswählen.

Denke auch daran, deine JPG- oder PNG-Dateien mit ImageOptim (oder ähnlichem) zu optimieren.

Beispiel

<img srcset="pasta-alla-chef-320w.jpg 320w,
             pasta-alla-chef-480w.jpg 480w,
             pasta-alla-chef-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="pasta-alla-chef-800w.jpg" alt="Nudeln mit Schinken, Erbsen und Sahne" />

Bonusaufgabe:

  • Verwende das type-Attribut, um deinen <picture>-Elementen Bilddateien in verschiedenen Formaten zur Verfügung zu stellen, zum Beispiel in .WEBP. (Example Repo mit Code)

Dauer und Abgabe

Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.

Referenzen und weiterführende Links

Elemente

Programme

Verschiedene