Wie optimiert man das Laden von Bildern auf einer Webseite?

1. Komprimierung: Verwenden Sie Tools, um die Bildgröße ohne Qualitätsverlust zu optimieren (z.B. TinyPNG, Compressor.io).
2. Formate: Wählen Sie moderne Formate wie WebP oder AVIF, die eine bessere Komprimierung im Vergleich zu JPEG und PNG bieten. Für alte Browser verwenden Sie <picture> oder das srcset-Attribut für Fallbacks.
3. Lazy Loading: Verzögern Sie das Laden von Bildern außerhalb des sichtbaren Bereichs, bis sie benötigt werden. Verwenden Sie loading="lazy" nativ oder JavaScript-Bibliotheken.
4. Responsive Bilder: Stellen Sie verschiedene Versionen von Bildern für unterschiedliche Bildschirmgrößen und Auflösungen bereit, indem Sie <picture> oder die Attribute srcset/sizes verwenden.
5. CDN (Content Delivery Network): Hosten Sie Bilder auf einem CDN, um eine schnellere Bereitstellung des Inhalts an die Nutzer aus der nächstgelegenen Region zu gewährleisten.
6. Caching: Konfigurieren Sie geeignete Cache-Header auf dem Server, damit der Browser Bilder zwischenspeichern und bei wiederholten Besuchen aus dem lokalen Cache laden kann.
7. Placeholder/Blurhash: Zeigen Sie eine niedrigqualitative "Platzhalter"-Version oder einen Blurhash an, während das hochauflösende Bild geladen wird.

Beispiel für die Verwendung von loading="lazy":

<img src="image.jpg" alt="Bildbeschreibung" loading="lazy">

Beispiel für die Verwendung von <picture> für verschiedene Formate:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Bildbeschreibung">
</picture>