Wie kann man dafür sorgen, dass das Bild auf Mobilgeräten in verkleinerter Größe geladen wird?

Um Bilder in verkleinerter Form auf mobilen Geräten zu laden, werden adaptive Bilder mit HTML und CSS verwendet:

1. Verwenden Sie das <img>-Element mit den Attributen srcset und sizes, damit der Browser die passende Bildgröße je nach Bildschirmgröße auswählt:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Bildbeschreibung">

2. Verwenden Sie CSS, um die maximale Breite des Bildes zu begrenzen:

img {
  max-width: 100%;
  height: auto;
}

3. Es ist auch möglich, moderne Bildformate (WebP, AVIF) zu verwenden, um die Dateigröße zu verringern.

Auf diese Weise lädt der Browser auf einem mobilen Gerät die optimal große Datei, was die Leistung verbessert und den Datenverkehr reduziert.