Bildoptimierung für Websites: WebP, AVIF und Lazy Loading 2026

Bilder sind oft die größten Dateien auf einer Website — und damit einer der stärksten Hebel für bessere Ladezeiten. Im Schnitt machen Bilder 50–70 % des Seitengewichts aus. Eine einzige schlecht optimierte Produktseite mit 10 unkomprimierten JPEG-Bildern kann leicht 5–8 MB wiegen.

Die gute Nachricht: Mit den richtigen Formaten (WebP, AVIF) und Techniken (Lazy Loading, responsive Bilder) lässt sich das Seitengewicht oft um 60–80 % reduzieren — ohne sichtbaren Qualitätsverlust. Das verbessert nicht nur die Ladezeit als Ranking-Faktor, sondern direkt auch den LCP-Wert der Core Web Vitals.

Bildformate im Vergleich: JPEG, PNG, WebP, AVIF

Die Wahl des richtigen Bildformats ist der erste und wichtigste Schritt bei der Bildoptimierung.

WebP und AVIF mit <picture> einbinden

Das <picture>-Element ermöglicht es, mehrere Bildformate anzubieten. Der Browser wählt automatisch das beste unterstützte Format:

<!-- Optimales Bild-Markup: AVIF → WebP → JPEG Fallback -->
<picture>
  <!-- AVIF für moderne Browser (beste Komprimierung) -->
  <source srcset="produkt.avif" type="image/avif">
  <!-- WebP als zweite Option -->
  <source srcset="produkt.webp" type="image/webp">
  <!-- JPEG als Fallback für ältere Browser -->
  <img src="produkt.jpg" alt="Beschreibung des Produkts" width="800" height="600" loading="lazy">
</picture>

Wichtig: Das finale <img>-Tag muss immer vorhanden sein — es wird in alten Browsern gezeigt, die <picture> nicht unterstützen.

Responsive Bilder mit srcset

Warum ein 1200 Pixel breites Bild für mobile Nutzer laden, wenn deren Bildschirm nur 390 Pixel breit ist? Mit srcset kannst du verschiedene Bildgrößen für verschiedene Bildschirmauflösungen anbieten:

<!-- Responsive Bild: Browser wählt passende Größe -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="Hero-Bild mit Beschreibung"
  width="800"
  height="600"
  loading="eager">
<!-- loading="eager" für LCP-Bilder im sichtbaren Bereich -->

Kombiniert mit WebP und AVIF sieht das so aus:

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px">
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
    alt="Hero-Bild Beschreibung"
    width="800" height="600"
    loading="eager">
</picture>

Bilder konvertieren: Werkzeuge und Methoden

Methode 1: Squoosh (kostenlos, im Browser)

Google Squoosh läuft vollständig im Browser und unterstützt alle gängigen Formate inklusive AVIF und WebP. Ideal für einzelne Bilder oder kleine Mengen. Einfach auf squoosh.app hochladen, Format wählen und Qualität einstellen.

Methode 2: Sharp (Node.js, für Automatisierung)

// Node.js: Sharp für Massen-Konvertierung
const sharp = require('sharp');

// Einzelnes Bild zu WebP konvertieren
sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

// Mehrere Größen für srcset generieren
const sizes = [400, 800, 1200, 1600];
sizes.forEach(width => {
  sharp('hero.jpg')
    .resize(width)
    .webp({ quality: 82 })
    .toFile(`hero-${width}.webp`);

  sharp('hero.jpg')
    .resize(width)
    .avif({ quality: 65 }) // AVIF braucht niedrigere Qualitätszahl
    .toFile(`hero-${width}.avif`);
});

Methode 3: ImageMagick (Kommandozeile)

# Einzelnes Bild zu WebP konvertieren
convert input.jpg -quality 82 output.webp

# Alle JPEGs im Verzeichnis zu WebP konvertieren
for f in *.jpg; do
  convert "$f" -quality 82 "${f%.jpg}.webp"
done

# Zu AVIF konvertieren (braucht libavif)
convert input.jpg -quality 65 output.avif

Lazy Loading: Bilder nur laden wenn nötig

Bilder die beim ersten Laden der Seite nicht sichtbar sind, müssen nicht sofort heruntergeladen werden. Lazy Loading löst dieses Problem elegant:

<!-- Lazy Loading mit nativem HTML-Attribut -->
<img
  src="produkt.webp"
  alt="Produkt XL in Blau"
  width="600"
  height="400"
  loading="lazy">
<!-- NICHT für Above-the-fold Bilder (LCP-Bild)! -->

Kritischer Fehler: Das LCP-Bild (das wichtigste sichtbare Bild beim Laden) darf NICHT loading="lazy" haben! Das verzögert den LCP und schadet dem Ranking. Nur Bilder unterhalb des sichtbaren Bereichs sollten lazy geladen werden.

fetchpriority für LCP-Bilder (2024+)

Das fetchpriority-Attribut gibt dem Browser Hinweise welches Bild er priorisiert laden soll:

<!-- LCP-Bild: Höchste Priorität, sofort laden -->
<img
  src="hero.webp"
  alt="Hero-Bild"
  width="1200" height="630"
  loading="eager"
  fetchpriority="high">

<!-- Alle anderen Bilder: Normal oder niedrig -->
<img
  src="gallery-1.webp"
  alt="Galerie Bild 1"
  width="400" height="300"
  loading="lazy"
  fetchpriority="low">

Alt-Texte: Pflicht für SEO und Barrierefreiheit

Alt-Texte sind nicht nur für Screenreader wichtig — Google kann Bilder zwar immer besser erkennen, verlässt sich aber nach wie vor stark auf Alt-Texte zur Kategorisierung. Dabei gilt:

• Gut: alt="Elektriker montiert Sicherungskasten in Berliner Altbau"
• Schlecht: alt="Bild" oder alt="image123.jpg"
• Keyword-Stuffing (schlecht!): alt="Elektriker Berlin Elektriker günstig bester Elektriker Berlin Preis"
• Dekorationsbilder: leeres Alt-Attribut setzen: alt=""

Mit unserem Image-Alt-Tag-Checker kannst du prüfen, ob alle Bilder auf deiner Website korrekte Alt-Texte haben.

Bilder mit CDN ausliefern

Ein Content Delivery Network (CDN) liefert Bilder von einem Server nahe beim Nutzer aus. Das reduziert die Latenz erheblich. Für kleine Websites ist Cloudflare kostenlos und einfach einzurichten. Größere Sites nutzen Cloudinary oder imgix — die auch automatisch WebP/AVIF-Konvertierung, Größenanpassung und Optimierung übernehmen.

<!-- Cloudinary: Automatische WebP-Konvertierung via URL-Parameter -->
<img
  src="https://res.cloudinary.com/dein-account/image/upload/f_auto,q_auto,w_800/produkt.jpg"
  alt="Produkt XL"
  width="800" height="600" loading="lazy">
<!-- f_auto: liefert WebP/AVIF wenn der Browser es unterstützt -->
<!-- q_auto: optimale Qualitätsstufe automatisch -->

CSS-Hintergrundbilder optimieren

Hintergrundbilder in CSS werden nicht durch HTML-Attribute wie loading="lazy" oder srcset gesteuert. Aber es gibt Alternativen:

/* Modernes CSS: image-set() für responsive Hintergrundsbilder */
.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
  background-size: cover;
}

/* Responsive Hintergrundbilder mit Media Queries */
.hero {
  background-image: url("hero-mobile.webp");
}
@media (min-width: 768px) {
  .hero { background-image: url("hero-tablet.webp"); }
}
@media (min-width: 1200px) {
  .hero { background-image: url("hero-desktop.webp"); }
}

Checkliste: Bildoptimierung für SEO

Typische Fehler bei der Bildoptimierung

1. LCP-Bild lazy laden: Der häufigste Fehler. Das Bild das als Largest Contentful Paint gilt (oft das Hero-Bild oder das erste große Produktbild) darf niemals loading="lazy" haben. Das verzögert es unnötig.

2. Fehlende width/height-Attribute: Ohne diese reserviert der Browser keinen Platz. Sobald das Bild lädt, springt das Layout (schlechter CLS-Wert). Immer width und height im Original-Seitenverhältnis angeben — CSS kann das Bild dann responsiv skalieren.

3. Überdimensionierte Bilder: Ein 4K-Foto (4000×3000 px) als Hero-Bild hochladen, das nur 800 px breit angezeigt wird, ist Ressourcenverschwendung. Bilder immer auf die maximale Anzeigegröße skalieren (mit einem kleinen Puffer für Retina-Displays: 2x).

4. Fehlende Komprimierung: WebP ist kein Freifahrtschein. Ein qualitativ 100 % komprimiertes WebP ist größer als ein gut komprimiertes JPEG. Qualitätsstufe 75–85 ist für Fotos in der Regel ausreichend und spart bis zu 70 % der Dateigröße.

Fazit: Bilder sind dein stärkster Performance-Hebel

Wenn du nur eine Maßnahme für bessere Ladezeiten umsetzt: Stelle alle Bilder auf WebP um. Das allein reduziert das Seitengewicht um durchschnittlich 30 % und verbessert direkt den LCP-Wert.

Die komplette Optimierung in der Reihenfolge:

1. Format: JPEG/PNG → WebP (sofort 25–35 % Einsparung)
2. Lazy Loading: loading="lazy" auf alle Bilder unter dem Fold
3. Dimensionen: width und height auf alle <img>-Tags (CLS eliminieren)
4. Alt-Texte: Beschreibend, mit relevanten Keywords
5. Responsive Images: srcset für verschiedene Bildschirmgrößen

Wer noch weiter optimieren möchte, schaut sich die verwandten Themen an: JavaScript-Performance und Caching sind die nächsten großen Hebel für schnellere Websites.