Erweitere deine Slideshow um Responsive Images mit srcset
und <picture>
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.
<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)
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.
- ImageOptim (Mac)
- FileOptimizer (Win)
- Squoosh (Website)
- avif CLI converter (Mac, Win)
- CSS-Tricks: Responsive Images (englisch)
- Picture perfect images (englisch)
- Serving sharp images to Retina screens (englisch)
- Image Resizing with Imagemagick (englisch)
- DPI.lv Auflösung von Screens berechnen (englisch)
- Understanding DPI (englisch)
- Next generation image codecs (siehe Bild unten)