Bildoptimierung für das Web: Formate, Kompression & Lazy Loading

Bilddateien sind häufig für mehr als die Hälfte des Gesamtgewichts einer durchschnittlichen Webseite verantwortlich. Ein unoptimiertes Hero-Bild kann problemlos 5 MB groß sein; bei korrekter Optimierung schrumpft es auf unter 100 KB – ohne sichtbaren Qualitätsverlust. Die Optimierung Ihrer Grafiken ist einer der effektivsten Hebel für eine schnellere Website, der sich direkt auf die Core Web Vitals (insbesondere den LCP-Wert), die Ladezeit und die Nutzerzufriedenheit auswirkt.

Moderne Bildformate im Überblick

• JPEG: Der Standard für Fotografien. Unterstützt verlustbehaftete Kompression. Dank universeller Unterstützung ideal für eine breite Kompatibilität bei 75-85% Qualität.
• PNG: Die beste Wahl für Grafiken mit Transparenzen, UI-Elementen oder Screenshots. Verlustfrei, aber bei Fotos oft mit deutlich größeren Dateigrößen verbunden.
• WebP: Bietet bei gleicher Qualität eine um 25-35 % kleinere Dateigröße als JPEG und kann zudem Transparenzen ersetzen. Mit einer Browser-Abdeckung von über 97 % (Stand 2025) der Goldstandard.
• AVIF: Das Format der Zukunft mit bis zu 50 % Platzersparnis gegenüber JPEG. Trotz längerer Encodierungszeit aufgrund der überlegenen Kompressionsrate für häufig genutzte Assets absolut empfehlenswert.
• SVG: Vektorformate sind unendlich skalierbar und extrem leichtgewichtig – ideal für Logos, Icons und komplexe Illustrationen.

Das <picture>-Element nutzen

Mit dem picture-Tag liefern Sie modernen Browsern fortschrittliche Formate aus, während Sie für ältere Browser zuverlässige Fallbacks bereitstellen.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero Bild" width="1200" height="600">
</picture>

Responsivität durch srcset

Übertragen Sie nicht ungefiltert 2400px-Bilder an mobile Endgeräte. Mit srcset definieren Sie verschiedene Bildgrößen, damit der Browser genau das Bild lädt, das für den jeweiligen Viewport optimal ist.

<img
  src="product-800.jpg"
  srcset="
    product-400.jpg 400w,
    product-800.jpg 800w,
    product-1200.jpg 1200w,
    product-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt="Produktfoto"
  width="800"
  height="600"
  loading="lazy"
>

Effizientes Lazy Loading

Native Browser-Funktionen für Lazy Loading verzögern das Laden von Bildern, die sich unterhalb des sichtbaren Bereichs befinden. Dies entlastet den ersten Seitenaufruf enorm.

<!-- Lazy load für Bilder im unteren Bereich -->
<img src="photo.webp" alt="Beispiel" loading="lazy" width="600" height="400">

<!-- WICHTIG: Das LCP-Bild "Above-the-fold" niemals lazy-loaden -->
<img src="hero.webp" alt="Hero" loading="eager" fetchpriority="high" width="1200" height="600">

Warum width und height entscheidend sind

Fehlen diese Attribute, kann der Browser das Bildlayout erst berechnen, sobald die Datei geladen wurde. Dies führt zu Layout-Sprüngen, dem sogenannten Cumulative Layout Shift (CLS). Die explizite Angabe der Dimensionen ermöglicht eine Reservierung des Speicherplatzes vor dem Rendering.

<!-- ✅ Dimensionen immer explizit angeben -->
<img src="photo.webp" alt="Foto" width="800" height="600">

<!-- CSS für responsive Darstellung bei festem Aspekt -->
img {
  max-width: 100%;
  height: auto;
}

Empfohlene Tools zur Bildkompression

• Sharp (Node.js): Leistungsstarke Bibliothek (libvips-basiert) für programmatische Transformationen und Komprimierungen.
• Squoosh: Ein exzellentes browserbasiertes Tool von Google für schnelle Einzeloptimierungen.
• ImageMagick: Das CLI-Kraftpaket für umfangreiche Batch-Verarbeitungen.
• CDN-Optimierung: Cloudflare, Imgix oder Cloudinary transformieren Ihre Bilder dynamisch basierend auf Gerätetyp und Browser-Capabilities.

import sharp from 'sharp';

// Konvertierung in WebP bei 80 % Qualität
await sharp('input.jpg')
  .resize(1200, 800, { fit: 'inside', withoutEnlargement: true })
  .webp({ quality: 80 })
  .toFile('output.webp');

// Generierung responsiver Größen
const sizes = [400, 800, 1200, 1600];
for (const size of sizes) {
  await sharp('input.jpg')
    .resize(size)
    .webp({ quality: 80 })
    .toFile(`output-${size}.webp`);
}

Checkliste für sofortige Performance-Erfolge

• ✅ Alle Fotos in WebP umwandeln (AVIF als High-End-Option nutzen).
• ✅ Logos und Icons ausschließlich als SVG einbinden.
• ✅ loading="lazy" für alle Bilder unterhalb des Browser-Fensters.
• ✅ LCP-Elemente (Hero-Bilder) mit fetchpriority="high" priorisieren.
• ✅ width und height Attribute in jedem Tag definieren.
• ✅ srcset für responsive Auflösungsanpassung implementieren.
• ✅ Kompression auf 75-85 % einstellen – der visuelle Unterschied ist meist vernachlässigbar.
• ✅ Einsatz eines CDNs zur automatisierten Bild-Optimierung.