Bilder optimieren für das Web: Format, Kompression & Lazy Loading im Praxis-Check

Bilder optimieren für das Web: Format, Kompression & Lazy Loading im Praxis-Check

Bilder sind auf den meisten Websites die schwersten Ressourcen – oft verantwortlich für 50 % oder mehr der gesamten Seitenladezeit. Gleichzeitig sind sie unverzichtbar: ein Produktfoto, ein Teamfoto, ein Screenshot oder eine Infografik kann die Absprungrate senken und die Conversion steigern. Die Herausforderung ist nicht, auf Bilder zu verzichten, sondern sie intelligent zu laden.

Dieser Artikel zeigt dir in der Praxis, welche Bildformate du wann nutzt, wie du Bilder ohne sichtbaren Qualitätsverlust verkleinerst und warum Lazy Loading der schnellste Weg zu einem besseren VitoScore ist.

Welche Bildformate gibt es – und wann nutzt du welches?

Die Wahl des richtigen Formats ist die halbe Miete. Nicht jedes Format eignet sich für jeden Einsatzzweck, und die Unterschiede sind enorm.

JPEG / JPG

Der Klassiker für Fotografie und komplexe Bilder mit vielen Farbverläufen. JPEG nutzt verlustbehaftete Kompression, reduziert also Dateigröße durch Information, die das menschliche Auge kaum wahrnimmt.

• Stärke: Gute Kompression bei Fotos, universell unterstützt
• Schwäche: Kein Transparenz-Unterstützung, kein scharfer Rand bei Grafiken
• Wann nutzen: Produktfotos, Teamfotos, Landschaften, Hintergrundbilder

PNG

PNG wurde als verlustfreie Alternative zu JPEG entwickelt und unterstützt Transparenz. Die Dateigrößen sind jedoch oft deutlich größer als bei vergleichbaren JPEGs.

• Stärke: Verlustfreie Kompression, Transparenz
• Schwäche: Große Dateien bei Fotos
• Wann nutzen: Logos mit Transparenz, Screenshots, Icons wo PNG unvermeidbar ist

WebP

WebP ist das modernste Format für das Web und von Google entwickelt. Es bietet sowohl verlustbehaftete als auch verlustfreie Kompression und unterstützt Transparenz sowie Animation. Die Dateigröße ist typischerweise 25–35 % kleiner als bei vergleichbaren JPEGs bei gleicher visueller Qualität.

• Stärke: Exzellente Kompression, breite Unterstützung (alle modernen Browser)
• Schwäche: Nicht in sehr alten Browsern (IE11)
• Wann nutzen: Standard-Format für nahezu alle Webbilder

AVIF

AVIF geht noch einen Schritt weiter als WebP und bietet 20–50 % bessere Kompression. Es basiert auf dem AV1-Video-Codec und wird von Chrome, Firefox und Safari unterstützt.

• Stärke: Bestmögliche Kompression bei hoher Qualität
• Schwäche: Noch nicht so breit unterstützt wie WebP, Encodierung kann dauern
• Wann nutzen: Für maximale Performance, wenn du modernere Browser anvisierst

SVG

SVG ist kein Pixel-Format, sondern ein Vektorformat. Es skaliert ohne Qualitätsverlust auf jede Größe und ist bei Icons und Logos unschlagbar.

• Stärke: Skalierbar, klein, animierbar
• Schwäche: Nicht für Fotos geeignet
• Wann nutzen: Icons, Logos, Diagramme, einfache Grafiken

Die Praxis-Empfehlung

Für die meisten Websites gilt: Nutze WebP als Standardformat. Es wird von über 97 % aller Browser unterstützt und bietet das beste Verhältnis aus Qualität und Dateigröße. Als Fallback für ältere Browser kannst du JPEG oder PNG einbinden – die meisten modernen CMS und Frameworks erzeugen automatisch mehrere Formate.

Bilder komprimieren: Der Unterschied zwischen gut und schlecht

Kompression ist nicht gleich Kompression. Es gibt zwei grundlegende Ansätze:

Verlustbehaftete Kompression (Lossy)

Die Dateigröße wird reduziert, indem Bildinformationen weggelassen werden. Bei moderater Kompression ist der Unterschied visuell kaum wahrnehmbar.

• Werkzeuge: TinyPNG, Squoosh, ImageOptim, ShortPixel
• Praxis-Tipp: Starte mit einer Reduktion um 60–80 % der Originalgröße. Erst wenn du visuelle Artefakte siehst, reduziere die Kompression.

Verlustfreie Kompression (Lossless)

Die Bildqualität bleibt erhalten, aber die Dateigröße wird durch intelligentes Encoding reduziert. Typisch sind 10–30 % Einsparung.

• Werkzeuge: ZopfPNG, OptiPNG
• Praxis-Tipp: Sinnvoll für Logos, Icons und Grafiken wo jede Pixel zählt.

Automatisierte Kompression im Build-Prozess

Das zuverlässigste Setup ist eine automatische Kompression bei jedem Deploy:

# WebP erzeugen (Qualität 80)
cwebp -q 80 input.jpg -o output.webp

# AVIF erzeugen (Qualität 30)
avifenc --min 20 --max 40 input.jpg output.avif

Für WordPress gibt es Plugins wie ShortPixel oder Imagify, die diese Aufgabe automatisch übernehmen. Für statische Sites empfiehlt sich ein Build-Skript, das alle Bilder bei jedem Deployment verarbeitet.

Die goldene Regel der Bildkompression

Wenn du das Bild in Google PageSpeed Insights öffnest, siehst du dort eine konkrete Einsparpotenzial-Zahl. Dort steht beispielsweise: „Properly size images: Potential savings of 1.2 MiB." Das ist dein Startpunkt – komprimiere genau diese Bilder als erstes.

Responsive Images: Das richtige Bild in der richtigen Größe

Ein 4.000 x 3.000 Pixel großes Foto auf einem Smartphone-Display mit 375 Pixel Breite zu laden, ist Verschwendung. Responsive Images sorgen dafür, dass der Browser nur das lädt, was er tatsächlich braucht.

Die srcset-Attribut-Methode

<img
  src="/img/hero-800.webp"
  srcset="/img/hero-400.webp 400w,
          /img/hero-800.webp 800w,
          /img/hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
          33vw"
  alt="Beschreibung des Bildes"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

Was passiert hier? Der Browser wählt automatisch das passende Bild basierend auf der Bildschirmgröße und der Darstellungsgröße. Auf einem Smartphone wird das 400w-Bild geladen, auf einem Desktop das 1200w-Bild.

Das sizes-Attribut korrekt setzen

Das sizes-Attribut ist der häufigste Fehler bei Responsive Images. Es muss beschreiben, in welcher Größe das Bild tatsächlich dargestellt wird – NICHT die Bildschirmgröße. Typische Muster:

• sizes="100vw" – Volle Bildschirmbreite (Hero-Bilder)
• sizes="(max-width: 768px) 100vw, 50vw" – Halbe Breite auf Desktop
• sizes="(max-width: 768px) 100vw, 33vw" – Drittel-Breite auf Desktop

Die aspect-ratio-Klausel

Wenn du width und height im <img>-Tag setzt (was du immer tun solltest), kann der Browser das Seitenverhältnis berechnen, bevor das Bild geladen wird. Das verhindert Layout-Sprünge (CLS) – einer der Core Web Vitals.

Lazy Loading: Bilder erst laden, wenn sie gebraucht werden

Lazy Loading ist die einfachste und wirkungsvollste Maßnahme, um die Ladegeschwindigkeit zu verbessern. Bilder unterhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer dorthin scrollt.

Native Lazy Loading (empfohlen)

Das loading="lazy"-Attribut ist mittlerweile in allen modernen Browsern standardmäßig und benötigt kein JavaScript:

<img src="/img/produkt.webp" alt="Produkt" loading="lazy" decoding="async">

Wann Lazy Loading nutzen:

• Bilder unterhalb des „Fold" (dem sichtbaren Bereich beim Laden)
• Galerien mit vielen Bildern
• Blog-Artikel mit vielen Inline-Bildern

Wann NICHT Lazy Loading:

• Hero-Bilder über dem Fold – diese sollen sofort laden
• Above-the-fold Bilder, die für die First Contentful Paint relevant sind

Die srcset-Verbindung mit Lazy Loading

Kombiniere Responsive Images mit Lazy Loading für maximale Effizienz:

<img
  src="/img/produkt-400.webp"
  srcset="/img/produkt-400.webp 400w,
          /img/produkt-800.webp 800w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Produktbild"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
>

Fetchpriority für Hero-Bilder

Für das wichtigste Bild über dem Fold kannst du dem Browser mitteilen, dass er dieses Bild priorisieren soll:

<img src="/img/hero.webp" alt="Hero" fetchpriority="high">

Das sagt dem Browser: „Lade dieses Bild zuerst – es ist für die First Contentful Paint relevant."

Bilder-Caching: Wie du wiederholte Ladezeiten vermeidest

Ein Browser-cached Bild muss beim zweiten Seitenaufruf nicht erneut vom Server geladen werden. Die richtige Cache-Strategie spart Bandbreite und verbessert die Ladezeit für zurückkehrende Nutzer.

Cache-Control-Header

Cache-Control: public, max-age=31536000, immutable

Setze einen langen Cache für Bilder mit versionierten Dateinamen. Wenn sich das Bild ändert, ändere sich der Dateiname (z.B. hero-v2.webp), und der Browser lädt die neue Version.

Content-Hashing

Viele Build-Tools (Vite, Webpack, Next.js) erzeugen automatisch versionierte Dateinamen. Das ist der sauberste Weg für Cache-Busting.

Praxis-Checkliste: So optimierst du deine Bilder in 5 Schritten

1. Auditen: Nutze PageSpeed Insights oder VitoScore, um die größten Einsparpotenziale zu identifizieren
2. Format wechseln: Wechsle von JPEG/PNG zu WebP (mit Fallback)
3. Komprimieren: Nutze TinyPNG oder automatische Build-Tools für 60–80 % Reduktion
4. Größe anpassen: Erzeuge Responsive Images mit srcset und sizes
5. Lazy Loading: Setze loading="lazy" auf alle Below-the-Fold-Bilder

Häufige Fehler, die du vermeiden solltest

• Bilder ohne width/height: Verursacht CLS (Layout-Sprünge)
• Zu große Bilder auf Mobile: Ein 2.000px-Bild auf einem 375px-Display ist Verschwendung
• Lazy Loading auf Hero-Bildern: Verzögert die First Contentful Paint
• Fehlende alt-Texte: Schlecht für SEO und Barrierefreiheit
• PNG statt WebP bei Fotos: PNG ist 3–5x größer als WebP bei gleicher Qualität

Fazit

Bilder-Optimierung ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Die Kombination aus dem richtigen Format (WebP), moderater Kompression, Responsive Images und Lazy Loading kann die Seitenladezeit um 40–70 % reduzieren – ohne die visuelle Qualität zu beeinträchtigen.

Starte mit den größten Einsparpotenzialen, die dir PageSpeed Insights oder dein VitoScore-Report zeigt. Jedes optimierte Bild ist ein Schritt zu einem besseren Score und einer schnelleren Website.

Frequently Asked Questions

Welches Bildformat ist am besten für Websites?

WebP ist der aktuelle Standard. Es bietet 25–35 % kleinere Dateien als JPEG bei gleicher Qualität und wird von über 97 % aller Browser unterstützt. AVIF geht noch weiter, ist aber noch nicht überall verfügbar.

Wie groß dürfen Bilder auf einer Website sein?

Als Faustregel gilt: Hero-Bilder maximal 200 KB, Content-Bilder maximal 100 KB, Thumbnails maximal 30 KB. Die Gesamtgröße aller Bilder auf einer Seite sollte 500 KB nicht übersteigen.

Macht Lazy Loading die Website wirklich schneller?

Ja, definitiv. Lazy Loading reduziert die initiale Ladezeit, da nur Bilder geladen werden, die sofort sichtbar sind. Typische Einsparungen liegen bei 30–50 % der initialen Bild-Last.

Sollte ich JPG oder PNG für meine Fotos verwenden?

Für Fotos: JPG (oder besser WebP). Für Grafiken mit Transparenz: PNG (oder besser WebP mit Transparenz). PNG ist bei Fotos 3–5x größer als JPG bei gleicher visueller Qualität.

Wie oft sollte ich meine Bilder optimieren?

Bei jedem Website-Relaunch und idealerweise bei jedem Deployment. Automatisierte Build-Skripte übernehmen die Kompression und Konvertierung, sodass du dich nicht manuell darum kümmern musst.