Im ersten Beitrag zu dem Thema (Erstellung) ging es darum, wie man die benötigten Bilder erstellt. Die Dateien haben wir jetzt also — wie bindet man sie nun so ein, dass je nach Browser/Displaygröße/Bandbreite/… das richtige Bild geladen wird? Das ist Thema in diesem zweiten Artikel!
Für eine Webseite ist es sinnvoll, dass Bilder in verschiedenen Auflösungen bereitgestellt werden, um die Nutzererfahrung so positiv wie möglich zu gestalten. Kleine Anzeige, kleines Bild laden, große Anzeige, großes Bild laden. Gerade für mobile Nutzer ist es wieder wichtig, auf die Gesamt-Download-Größe der Seite zu achten und Bilder haben daran nun mal den größten Anteil.
Hier nun meine Art, diese Bilder möglichst bequem zu generieren.