Bildoptimierung jenseits der Komprimierung — Smart SEO Audit

01 Warum Bildoptimierung wichtig ist

Auf den meisten modernen Websites machen Bilder 60–80% des gesamten Seitengewichts aus. Sie zu optimieren ist die einzeln wirkungsvollste Maßnahme für LCP, Gesamtübertragungsgröße und Bandbreitenkosten. Machen Sie die Bildauslieferung richtig, und eine „langsame Website" wird oft zur „schnellen Website" — ohne andere Änderungen.

Dieser Guide geht über „Bilder komprimieren" hinaus. Komprimierung ist das Minimum. Die echten Gewinne 2026 kommen aus der Formatwahl, responsiver Auslieferung und Lazy-Loading-Disziplin.

02 WebP, AVIF und die Formatfrage

Die drei Formate, auf die es ankommt:

Die pragmatische Empfehlung

Liefern Sie WebP als Standard für jedes fotografische Bild aus. Es ist gut unterstützt, Encoder sind ausgereift und die Größeneinsparungen sind erheblich. Verwenden Sie das <picture>-Element als Fallback auf JPEG für die <2% der Nutzer mit Browsern ohne WebP-Support:

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

Für Websites, bei denen Bildbandbreite ein echtes Problem ist (bildreiche Publisher, E-Commerce), fügen Sie AVIF als erste Quelle für weitere 15–20% Einsparungen hinzu:

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

03 Responsive Bilder mit srcset

Ein 2400px breites Bild an ein Telefon zu senden, das es mit 375px anzeigt, ist Verschwendung. Der Fix ist srcset:

<img src="/hero-800.webp"
     srcset="/hero-400.webp 400w,
             /hero-800.webp 800w,
             /hero-1600.webp 1600w,
             /hero-2400.webp 2400w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Beschreibung"
     width="1600" height="800">

Der Browser prüft Viewport und Pixeldichte des Geräts und wählt das kleinste Bild, das dem visuellen Ziel entspricht. Ein Telefon erhält die 400w-Version; ein 4K-Display erhält die 2400w-Version.

Das ist eine der wirkungsvollsten Performance-Änderungen, die Sie vornehmen können. Ein Rollout responsiver Bilder halbiert oft das mobile LCP.

04 Lazy Loading ohne LCP-Einbruch

Natives Lazy Loading ist eine Ein-Zeilen-Ergänzung:

<img src="/below-fold.webp" loading="lazy" alt="…">

Der Browser verzögert das Laden, bis das Bild in der Nähe des Viewports ist. Für Bilder unterhalb der Falz ist das ein klarer Gewinn.

Der Haken: Ihr LCP-Bild niemals lazy-loaden. Ein häufiges Muster ist „alle Bilder lazy-loaden" per CMS-Template. Das Hero-Bild beginnt dann erst zu laden, wenn JavaScript ausgeführt wurde — was Ihren LCP-Score ruiniert.

Der Fix: Above-the-Fold-Bilder explizit als eager markieren:

<img src="/hero.webp" loading="eager" fetchpriority="high"
     alt="…" width="1200" height="600">

fetchpriority="high" ist der 2024+-Weg, dem Browser mitzuteilen, dass dieses Bild kritisch ist — auch wenn es im DOM unter anderen Ressourcen liegt.

05 CDN und Auslieferung

Ein CDN liefert Ihre Bilder von einem Server, der geografisch nah am Nutzer liegt, und verkürzt die Übertragungszeit für internationale Besucher dramatisch. 2026 gibt es keine Entschuldigung mehr, Bilder von einem einzigen Origin-Server zu liefern — jedes große CDN (Cloudflare, Fastly, AWS CloudFront, Bunny, ImageKit) bietet kostenlose oder günstige Tarife.

Moderne Bild-CDNs gehen weiter: Sie konvertieren Formate automatisch, ändern Größen on-the-fly per URL-Parametern und optimieren Komprimierung. Mit einem solchen CDN laden Sie ein einziges hochauflösendes Master-Bild hoch und lassen das CDN Format-/Größen-Varianten basierend auf der Anfrage ausliefern.

Ein wichtiger Punkt: Cache-Header. Setzen Sie Cache-Control: public, max-age=31536000, immutable auf gehashten Bild-URLs, damit Wiederholungsbesuche aus dem Browser-Cache kommen.

06 Alt-Text für SEO und Barrierefreiheit

Alt-Text bedient drei Zielgruppen: Screen-Reader-Nutzer (essenziell), Suchmaschinen (hilfreich) und Nutzer mit langsamen Verbindungen, bei denen Bilder nicht laden (praktisch).

• Beschreibend, nicht keyword-gefüllt. „Schwarze Herren-Lederschuhe, Größe 43" ist gut. „Schuhe kaufen billige Schuhe online Schuhe Rabatt" ist spam und schadet wahrscheinlich mehr als es hilft.
• Dekorative Bilder brauchen kein Alt-Attribut — verwenden Sie alt="", damit Screen-Reader sie überspringen.
• Aufgepasst bei CMS-Feldern: Viele CMS befüllen Alt-Text standardmäßig mit dem Dateinamen. „IMG_4567.jpg" als Alt-Text ist schlimmer als kein Alt-Text.
• Icons in Buttons: Der Button selbst sollte einen zugänglichen Namen haben — entweder über seinen Textinhalt oder über aria-label. Verlassen Sie sich nicht auf das Icon-Alt für den Button-Kontext.

07 Wie man Bilder prüft

Was Smart SEO Audit bei jeder URL prüft:

• Alle Bilder haben Alt-Attribute (Warnung bei fehlendem, Fehler bei leerem Alt auf nicht-dekorativen Bildern).
• Bilder werden in modernen Formaten (WebP oder AVIF) ausgeliefert — JPEG/PNG flaggt eine Empfehlung.
• Bilder haben width- und height-Attribute gesetzt (CLS-Schutz).
• Lazy Loading wird verwendet (Hinweis wenn keine loading="lazy"-Attribute vorhanden).

? Häufige Fragen

Sollte ich 2026 WebP oder AVIF verwenden?

Nutzen Sie WebP als Standard für fotografische Bilder — es wird von ~98% der Browser unterstützt und ist 25–35% kleiner als JPEG. Mit einem picture-Element fallen Sie für die wenigen nicht unterstützten Browser auf JPEG zurück. Ist die Bild-Bandbreite ein echtes Thema, ergänzen Sie AVIF als erste Quelle für weitere 15–20% Einsparung (40–50% kleiner als JPEG), mit WebP und JPEG als Fallback.

Warum brauchen Bilder width- und height-Attribute?

Width und height (oder CSS aspect-ratio) lassen den Browser den richtigen Platz reservieren, bevor das Bild lädt, und verhindern so den Layout-Shift, der Ihren CLS-Wert verschlechtert. Bilder ohne reservierte Maße schieben umliegende Inhalte herum — einer der häufigsten Cumulative-Layout-Shift-Fehler.

Sollte ich alle Bilder lazy-loaden?

Nein — laden Sie Ihr LCP-Bild (meist das Hero- oder erste große Bild above the fold) niemals lazy. Ein loading="lazy" auf allem, auch above-the-fold-Bildern, verzögert den Largest Contentful Paint messbar. Lazy-loaden Sie nur Bilder below the fold und ziehen Sie stattdessen ein Preload des LCP-Bildes in Betracht.

→ Verwandte Guides

Tiefer einsteigen — diese Guides behandeln verwandte Themen.