Lazy Loading: Bilder erst laden wenn nötig

Lazy Loading lädt Bilder erst, wenn sie in den Viewport scrollen. Das spart Bandbreite und beschleunigt den initialen Seitenaufbau erheblich.

Warum Lazy Loading?

• Schnellerer Seitenaufbau: Nur sichtbare Bilder laden
• Bandbreite sparen: Nutzer scrollt nicht immer ans Ende
• Bessere Core Web Vitals: Schnelleres LCP
• Weniger Serverlast: Weniger gleichzeitige Requests

Native Browser-Lösung

Moderner und empfohlener Ansatz – ohne JavaScript:

<!-- Einfach loading="lazy" hinzufügen -->
<img
  src="bild.jpg"
  alt="Beschreibung"
  loading="lazy"
  width="800"
  height="600"
>

<!-- Für iframes funktioniert es auch -->
<iframe
  src="https://example.com"
  loading="lazy"
></iframe>

loading-Attribut Werte

<!-- Hero-Bild: KEIN Lazy Loading -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">

<!-- Bilder weiter unten: Lazy Loading -->
<img src="content-1.jpg" alt="Content" loading="lazy">
<img src="content-2.jpg" alt="Content" loading="lazy">

Width und Height angeben

Vermeidet Layout Shifts (CLS):

<!-- RICHTIG: Dimensionen angeben -->
<img
  src="bild.jpg"
  alt="Beschreibung"
  loading="lazy"
  width="800"
  height="600"
>

<!-- Oder mit CSS aspect-ratio -->
<style>
  .lazy-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
</style>

<img src="bild.jpg" class="lazy-img" loading="lazy" alt="Bild">

JavaScript: Intersection Observer

Für mehr Kontrolle oder als Fallback:

<!-- HTML: data-src statt src -->
<img
  data-src="bild.jpg"
  alt="Beschreibung"
  class="lazy"
  width="800"
  height="600"
>

// JavaScript
const lazyImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '50px 0px',  // 50px vor dem Viewport laden
  threshold: 0.01
});

lazyImages.forEach(img => imageObserver.observe(img));

Mit Fade-In Animation

/* CSS */
.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy.loaded {
  opacity: 1;
}

Lazy Loading mit Placeholder

Blur-Up Technik

<div class="image-wrapper">
  <img
    src="bild-tiny.jpg"        <!-- Kleines Blur-Bild -->
    data-src="bild-full.jpg"   <!-- Volles Bild -->
    class="lazy blur"
    alt="Beschreibung"
  >
</div>

/* CSS */
.image-wrapper {
  position: relative;
  overflow: hidden;
}

.blur {
  filter: blur(20px);
  transition: filter 0.5s ease;
}

.blur.loaded {
  filter: blur(0);
}

LQIP (Low Quality Image Placeholder)

<img
  src="data:image/jpeg;base64,/9j/4AAQ..."  <!-- Base64 Thumbnail -->
  data-src="bild-full.jpg"
  class="lazy"
  alt="Beschreibung"
>

Responsive Lazy Loading

<picture>
  <source
    media="(min-width: 800px)"
    data-srcset="bild-large.webp"
    type="image/webp"
  >
  <source
    media="(min-width: 800px)"
    data-srcset="bild-large.jpg"
  >
  <img
    data-src="bild-small.jpg"
    src="placeholder.jpg"
    loading="lazy"
    alt="Beschreibung"
    class="lazy"
  >
</picture>

Background Images

Für CSS-Hintergrundbilder:

<div class="lazy-bg" data-bg="url(hintergrund.jpg)">
  Content
</div>

// JavaScript
const lazyBackgrounds = document.querySelectorAll('.lazy-bg');

const bgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      el.style.backgroundImage = el.dataset.bg;
      el.classList.add('loaded');
      bgObserver.unobserve(el);
    }
  });
});

lazyBackgrounds.forEach(el => bgObserver.observe(el));

Libraries

lazysizes Beispiel

<script src="lazysizes.min.js" async></script>

<img
  data-src="bild.jpg"
  class="lazyload"
  alt="Beschreibung"
>

Best Practices

Weitere Informationen

• 🖼️ WebP Bildoptimierung
• ⚡ Website Ladezeit optimieren
• 🔧 Performance mit Domain Toolkit testen