Bildoptimierung: WebP, AVIF und Lazy Loading richtig einsetzen

Bilder machen typischerweise 50–70 % der Datenmenge einer Website aus. Genau hier liegt der größte Performance-Hebel. Wer WebP, AVIF und Lazy Loading sauber einsetzt, reduziert Ladezeiten um 40–60 %, verbessert die Core Web Vitals und gewinnt bei mobilen Suchanfragen mit schwachen Verbindungen spürbar Sichtbarkeit.

Warum ist Bildoptimierung so wichtig?

Google bewertet die Ladegeschwindigkeit einer Website als direkten Ranking-Faktor. Seit 2021 sind die Core Web Vitals ein zentraler Bestandteil des Algorithmus. Bilder beeinflussen dabei zwei wichtige Metriken:

• LCP (Largest Contentful Paint): Das größte Element im sichtbaren Bereich — oft ein Hero-Bild
• CLS (Cumulative Layout Shift): Springende Layouts durch nachladende Bilder

Schneller Gewinn — Eine professionelle Bildoptimierung kann Lighthouse-Performance-Scores um 20–40 Punkte verbessern.

WebP vs. AVIF vs. JPEG: Der Vergleich

Dateigröße im Vergleich

Bei gleicher visueller Qualität ergeben sich folgende typische Ersparnisse:

Format	Dateigröße	Ersparnis vs. JPEG	Browser-Support
JPEG	100 KB (Basis)	–	100 %
WebP	70–80 KB	20–30 %	97 %
AVIF	50–60 KB	40–50 %	92 %

Wann welches Format?

WebP empfohlen für:

• Allgemeine Website-Bilder
• Produktfotos im E-Commerce
• Blog-Artikel-Bilder

AVIF empfohlen für:

• Hero-Bilder und große Hintergrundbilder
• Fotografische Inhalte mit vielen Details
• Wenn maximale Kompression wichtig ist

JPEG als Fallback:

• Immer als Rückfalloption behalten
• Für ältere Browser und E-Mail-Clients

Das Picture-Element: Automatische Format-Auswahl

Mit dem HTML <picture>-Element wird automatisch das beste Format serviert:

<picture>
  <!-- AVIF für moderne Browser -->
  <source srcset="bild.avif" type="image/avif">
  <!-- WebP als Fallback -->
  <source srcset="bild.webp" type="image/webp">
  <!-- JPEG für alle anderen -->
  <img src="bild.jpg" alt="Beschreibung" width="800" height="600">
</picture>

Der Browser wählt automatisch das erste Format, das er unterstützt.

Responsive Images mit srcset

Für verschiedene Bildschirmgrößen werden unterschiedliche Bildgrößen geliefert:

<img
  src="bild-800.jpg"
  srcset="
    bild-320.jpg 320w,
    bild-640.jpg 640w,
    bild-800.jpg 800w,
    bild-1200.jpg 1200w,
    bild-1920.jpg 1920w
  "
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Beschreibung"
  width="800"
  height="600"
>

Die sizes-Angabe verstehen

• (max-width: 768px) 100vw: Auf Mobilgeräten nutzt das Bild 100 % der Viewport-Breite
• 800px: Auf größeren Bildschirmen ist das Bild maximal 800 px breit

Der Browser wählt basierend auf Bildschirmgröße und Pixeldichte das optimale Bild.

Lazy Loading implementieren

Native Lazy Loading

Die einfachste Methode — vom Browser unterstützt:

<img
  src="bild.jpg"
  alt="Beschreibung"
  loading="lazy"
  width="800"
  height="600"
>

Wichtig — loading="lazy" NICHT für Bilder im sichtbaren Bereich (above the fold). Diese sollten mit loading="eager" oder ohne Attribut sofort laden.

Intersection Observer für erweiterte Kontrolle

const lazyImages = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
}, {
  rootMargin: '50px 0px' // Lädt 50px bevor sichtbar
});

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

Blur-Up Placeholder (LQIP)

Eine elegante Technik: unscharfe Miniaturversion zeigen, während das vollständige Bild lädt.

.image-container {
  position: relative;
  overflow: hidden;
}

.placeholder {
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity 0.3s;
}

.placeholder.loaded {
  opacity: 0;
}

Vorteile von LQIP

1. Bessere UX: Nutzer sehen sofort Inhalt
2. Kein Layout-Shift: Der Platzhalter reserviert den Platz
3. Professioneller Look: Sanfter Übergang zum finalen Bild

CLS vermeiden: Immer Dimensionen angeben

IMMER width und height angeben:

<!-- RICHTIG -->
<img src="bild.jpg" width="800" height="600" alt="...">

<!-- FALSCH — verursacht CLS -->
<img src="bild.jpg" alt="...">

Oder CSS aspect-ratio nutzen:

.responsive-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

fetchpriority für Hero-Bilder

Das wichtigste Bild sollte priorisiert laden:

<img
  src="hero.jpg"
  alt="Hero Bild"
  fetchpriority="high"
  loading="eager"
  width="1920"
  height="1080"
>

Tools für die Bildoptimierung

Online-Tools

1. Squoosh.app — Kostenlos von Google, verschiedene Formate
2. TinyPNG — Einfach für PNG und JPEG
3. SVGOMG — Für SVG-Optimierung

Build-Tools

# Sharp (Node.js)
npm install sharp

# ImageMagick (CLI)
convert input.jpg -quality 85 -resize 1920x output.webp

Automatisierung mit Sharp

const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1920, 1080, { fit: 'inside' })
    .webp({ quality: 80 })
    .toFile(output);
}

Checkliste für optimale Bilder

• Bilder in WebP und AVIF bereitstellen
• <picture>-Element für Format-Fallbacks nutzen
• Responsive srcset für verschiedene Größen
• loading="lazy" für Bilder unterhalb des Folds
• fetchpriority="high" für Hero-Bilder
• Immer width und height angeben
• Alt-Texte nicht vergessen

Häufige Fehler vermeiden

1. Zu große Bilder hochladen

Ein 4000 px breites Bild für einen 800 px Container verschwendet Bandbreite.

2. Lazy Loading für alles

Above-the-fold Bilder sollten SOFORT laden.

3. Fehlende Dimensionen

Ohne width/height springt das Layout beim Laden.

4. Nur ein Format

Immer WebP/AVIF plus JPEG-Fallback anbieten.

Fazit

Bildoptimierung ist einer der wenigen SEO-Hebel mit sofortiger Wirkung. Wer mit WebP, AVIF und intelligenten Ladestrategien arbeitet, verbessert Core Web Vitals, senkt Ladezeiten auf älteren Smartphones und verschafft sich gegenüber schwerfälligen Wettbewerber-Sites einen handfesten Vorsprung in den Google-Rankings.

Verwandte Themen

• LCP optimieren: Largest Contentful Paint unter 2,5 Sekunden bringen
• Core Web Vitals Optimierung mit Mustern aus der Praxis
• Framer Motion Performance: Layout-Animationen optimieren

Häufige Fragen

Sollten alle Bilder in AVIF konvertiert werden?

Nicht unbedingt. AVIF hat noch nicht 100 % Browser-Support. AVIF als erste Option im <picture>-Element nutzen, aber WebP und JPEG als Fallbacks behalten.

Wie werden Bilder identifiziert, die die Seite langsam machen?

Google PageSpeed Insights oder Lighthouse in Chrome DevTools nutzen. Beide zeigen genau, welche Bilder optimiert werden sollten.

Ist natives Lazy Loading ausreichend?

Für die meisten Websites ja. Der Intersection Observer bietet mehr Kontrolle, ist aber auch komplexer. Mit loading="lazy" starten und bei Bedarf erweitern.

Wie wirkt sich Bildoptimierung auf SEO aus?

Direkt über die Core Web Vitals (LCP, CLS) und indirekt über bessere Nutzererfahrung und niedrigere Absprungraten.